web/satellite/vuetify-poc: fix object browser pagination inside folders

Reflects the same changes made for main app.
https://review.dev.storj.io/c/storj/storj/+/11313

Change-Id: I8e0a2a64b1adfdf411c3044890e85928d592259d
This commit is contained in:
Vitalii 2023-10-09 17:08:58 +03:00 committed by Vitalii Shpital
parent db7c6d38e5
commit f41e117918

View File

@ -27,6 +27,7 @@
class="elevation-1" class="elevation-1"
:item-value="(item: BrowserObjectWrapper) => item.browserObject.Key" :item-value="(item: BrowserObjectWrapper) => item.browserObject.Key"
no-data-text="No results found" no-data-text="No results found"
:page="cursor.page"
hover hover
must-sort must-sort
:loading="isFetching || loading" :loading="isFetching || loading"
@ -199,6 +200,7 @@ const isDeleteFileDialogShown = ref<boolean>(false);
const fileToShare = ref<BrowserObject | null>(null); const fileToShare = ref<BrowserObject | null>(null);
const isShareDialogShown = ref<boolean>(false); const isShareDialogShown = ref<boolean>(false);
const isFileGuideShown = ref<boolean>(false); const isFileGuideShown = ref<boolean>(false);
const routePageCache = new Map<string, number>();
const sortBy = [{ key: 'name', order: 'asc' }]; const sortBy = [{ key: 'name', order: 'asc' }];
const headers = [ const headers = [
@ -337,6 +339,8 @@ const firstFile = computed<BrowserObject | null>(() => {
* Handles page change event. * Handles page change event.
*/ */
function onPageChange(page: number): void { function onPageChange(page: number): void {
const path = filePath.value ? filePath.value + '/' : '';
routePageCache.set(path, page);
obStore.setCursor({ page, limit: options.value?.itemsPerPage ?? 10 }); obStore.setCursor({ page, limit: options.value?.itemsPerPage ?? 10 });
const lastObjectOnPage = page * cursor.value.limit; const lastObjectOnPage = page * cursor.value.limit;
@ -346,7 +350,6 @@ function onPageChange(page: number): void {
return; return;
} }
const path = filePath.value ? filePath.value + '/' : '';
const tokenKey = Math.ceil(lastObjectOnPage / MAX_KEY_COUNT) * MAX_KEY_COUNT; const tokenKey = Math.ceil(lastObjectOnPage / MAX_KEY_COUNT) * MAX_KEY_COUNT;
const tokenToBeFetched = obStore.state.continuationTokens.get(tokenKey); const tokenToBeFetched = obStore.state.continuationTokens.get(tokenKey);
@ -436,6 +439,15 @@ async function fetchFiles(): Promise<void> {
} }
selected.value = []; selected.value = [];
if (isPaginationEnabled.value) {
const cachedPage = routePageCache.get(path);
if (cachedPage !== undefined) {
obStore.setCursor({ limit: cursor.value.limit, page: cachedPage });
} else {
obStore.setCursor({ limit: cursor.value.limit, page: 1 });
}
}
} catch (err) { } catch (err) {
err.message = `Error fetching files. ${err.message}`; err.message = `Error fetching files. ${err.message}`;
notify.notifyError(err, AnalyticsErrorEventSource.FILE_BROWSER_LIST_CALL); notify.notifyError(err, AnalyticsErrorEventSource.FILE_BROWSER_LIST_CALL);