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: #6267 Change-Id: I053d9e5f23662774c60d67a29f814a2c1c3067ed
storj · Sep 13, 2023 · ccb9b7a · ccb9b7a
1 parent f14fabc
commit ccb9b7a
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +63,15 @@
 
 <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';
 
 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';