From ccb9b7ae8e87f8e59cec54776661071fd319704a Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Wed, 13 Sep 2023 15:07:32 +0000
Subject: [PATCH] satellite/web/vuetify-poc: make tables consistent

This change makes tables in the vuetify app more consistent. Also
clearing search has been fixed for tables whose data would not populate
after search has been cleared.

Issue: https://github.com/storj/storj/issues/6267

Change-Id: I053d9e5f23662774c60d67a29f814a2c1c3067ed
---
 .../src/components/AccessTableComponent.vue      |  4 ++--
 .../src/components/BrowserTableComponent.vue     |  2 +-
 .../src/components/BucketsDataTable.vue          |  3 ++-
 .../src/components/ProjectsTableComponent.vue    |  1 +
 .../src/components/TeamTableComponent.vue        |  2 +-
 .../TokenTransactionsTableComponent.vue          |  7 +++++++
 .../src/components/billing/BillingHistoryTab.vue | 16 ++++++++++------
 7 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
index 61da94dd5ca0..69ff282204e4 100644
--- a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -25,9 +25,9 @@
             :items-length="page.totalCount"
             :items-per-page-options="tableSizeOptions(page.totalCount)"
             item-value="name"
+            no-data-text="No results found"
             select-strategy="all"
             class="elevation-1"
-            show-select
             @update:itemsPerPage="onUpdateLimit"
             @update:page="onUpdatePage"
             @update:sortBy="onUpdateSortBy"
@@ -139,7 +139,7 @@ watch(() => search.value, () => {
     clearTimeout(searchTimer.value);
 
     searchTimer.value = setTimeout(() => {
-        agStore.setSearchQuery(search.value);
+        agStore.setSearchQuery(search.value || '');
         fetch();
     }, 500); // 500ms delay for every new call.
 });
diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
index 35f30d77dd56..a9673627b0e5 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -26,7 +26,7 @@
             :search="search"
             class="elevation-1"
             :item-value="(item: BrowserObjectWrapper) => item.browserObject.Key"
-            show-select
+            no-data-text="No results found"
             hover
             must-sort
             :loading="isFetching || loading"
diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
index 769159628a56..af86330cb43d 100644
--- a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -26,6 +26,7 @@
             :items-length="page.totalCount"
             :items-per-page-options="tableSizeOptions(page.totalCount)"
             item-value="name"
+            no-data-text="No results found"
             class="elevation-1"
             hover
             @update:itemsPerPage="onUpdateLimit"
@@ -292,7 +293,7 @@ watch(() => search.value, () => {
     clearTimeout(searchTimer.value);
 
     searchTimer.value = setTimeout(() => {
-        bucketsStore.setBucketsSearch(search.value);
+        bucketsStore.setBucketsSearch(search.value || '');
         fetchBuckets();
     }, 500); // 500ms delay for every new call.
 });
diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
index 3a628d34f073..b9cec57830d2 100644
--- a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -17,6 +17,7 @@
             :headers="headers"
             :items="items"
             :search="search"
+            no-data-text="No results found"
             class="elevation-1"
             item-key="path"
         >
diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
index a9b13b4eeb29..002f3bf3f81c 100644
--- a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
@@ -22,10 +22,10 @@
             :sort-by="sortBy"
             :headers="headers"
             :items="projectMembers"
+            no-data-text="No results found"
             :search="search"
             class="elevation-1"
             item-value="email"
-            show-select
             hover
         >
             <template #item.name="{ item }">
diff --git a/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue b/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
index a037334b9706..f20e669137d9 100644
--- a/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
@@ -8,7 +8,13 @@
             label="Search"
             prepend-inner-icon="mdi-magnify"
             single-line
+            variant="solo-filled"
+            flat
             hide-details
+            clearable
+            density="comfortable"
+            rounded="lg"
+            class="mx-2 mt-2"
         />
         <v-data-table
             :sort-by="sortBy"
@@ -19,6 +25,7 @@
             :items-per-page-options="tableSizeOptions(nativePaymentHistoryItems.length)"
             :search="search"
             :custom-key-sort="customSortFns"
+            no-data-text="No results found"
             class="elevation-1"
         >
             <template #item.timestamp="{ item }">
diff --git a/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue b/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
index fce688557372..50399f4d8a2b 100644
--- a/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
+++ b/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
@@ -8,6 +8,7 @@
             :headers="headers"
             :items="historyItems"
             :must-sort="false"
+            no-data-text="No results found"
             class="elevation-1"
             hover
         >
@@ -36,10 +37,7 @@
                 <div class="v-data-table-footer">
                     <v-row justify="end" align="center" class="pa-2">
                         <v-col cols="auto">
-                            <v-btn-group density="compact">
-                                <v-btn :disabled="!historyPage.hasPrevious" icon="mdi-chevron-left" @click="previousClicked" />
-                                <v-btn :disabled="!historyPage.hasNext" icon="mdi-chevron-right" @click="nextClicked" />
-                            </v-btn-group>
+                            <span class="caption">Items per page:</span>
                         </v-col>
                         <v-col cols="auto">
                             <v-select
@@ -50,6 +48,12 @@
                                 @update:model-value="sizeChanged"
                             />
                         </v-col>
+                        <v-col cols="auto">
+                            <v-btn-group density="compact">
+                                <v-btn :disabled="!historyPage.hasPrevious" icon="mdi-chevron-left" @click="previousClicked" />
+                                <v-btn :disabled="!historyPage.hasNext" icon="mdi-chevron-right" @click="nextClicked" />
+                            </v-btn-group>
+                        </v-col>
                     </v-row>
                 </div>
             </template>
@@ -59,7 +63,7 @@
 
 <script setup lang="ts">
 
-import { VBtn, VBtnGroup, VCard, VChip, VCol, VRow, VSelect, VWindowItem } from 'vuetify/components';
+import { VBtn, VBtnGroup, VCard, VChip, VCol, VRow, VSelect } from 'vuetify/components';
 import { computed, onMounted, ref } from 'vue';
 import { VDataTable } from 'vuetify/labs/components';
 
@@ -67,7 +71,7 @@ import { centsToDollars } from '@/utils/strings';
 import { useBillingStore } from '@/store/modules/billingStore';
 import { useNotify } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
-import { PaymentHistoryPage, PaymentsHistoryItem, PaymentsHistoryItemStatus } from '@/types/payments';
+import { PaymentHistoryPage, PaymentsHistoryItem } from '@/types/payments';
 import { useLoading } from '@/composables/useLoading';
 import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';