JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

satellite/web/vuetify-poc: make tables consistent

Browse Source 
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
This commit is contained in:
Wilfred Asomani 2023-09-13 15:07:32 +00:00 committed by Storj Robot
parent f14fabc90a
commit ccb9b7ae8e
7 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
View File

@ -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.
});

2
web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
View File

@ -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"

3
web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
View File

@ -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.
});

1
web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
View File

@ -17,6 +17,7 @@
:headers="headers"
:items="items"
:search="search"
no-data-text="No results found"
class="elevation-1"
item-key="path"
>

2
web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
View File

@ -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 }">

7
web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
View File

@ -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 }">

16
web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
View File

@ -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';