From 63645205c0bace4ee76922ba04c600d6c6ecd655 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Tue, 26 Sep 2023 16:48:56 +0300
Subject: [PATCH] web/satellite: fix object browser pagination for the folders

Fix pagination for the folders which are not on the first page.
Also, fixed object count calculation inside folders.

Issue:
https://github.com/storj/customer-issues/issues/1055

Change-Id: I1d0fbb8856f13be6fb20698315a7e4d20b4affd9
---
 .../src/components/browser/FileBrowser.vue         | 14 +++++++++++++-
 .../src/components/common/TablePagination.vue      |  8 +++++++-
 web/satellite/src/components/common/VTable.vue     |  3 +++
 .../src/store/modules/objectBrowserStore.ts        |  6 ++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
index fd45934b1..e070034d5 100644
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@@ -114,6 +114,7 @@
                         :loading="isLoading"
                         class="file-browser-table"
                         :on-page-change="isPaginationEnabled ? changePageAndLimit : null"
+                        :page-number="cursor.page"
                         @selectAllClicked="toggleSelectAllFiles"
                     >
                         <template #head>
@@ -272,6 +273,7 @@ const isOver = ref<boolean>(false);
 const routePath = ref(calculateRoutePath());
 
 const NUMBER_OF_DISPLAYED_OBJECTS = 1000;
+const routePageCache = new Map<string, number>();
 
 /**
  * Calculates page count depending on object count and page limit.
@@ -440,7 +442,8 @@ const bucket = computed((): string => {
 /**
  * Changes table page and limit.
  */
-async function changePageAndLimit(page: number, limit: number): void {
+async function changePageAndLimit(page: number, limit: number): Promise<void> {
+    routePageCache.set(routePath.value, page);
     obStore.setCursor({ limit, page });
 
     const lastObjectOnPage = page * limit;
@@ -501,6 +504,15 @@ async function onRouteChange(): Promise<void> {
             await list(routePath.value);
         }
     });
+
+    if (isPaginationEnabled.value) {
+        const cachedPage = routePageCache.get(routePath.value);
+        if (cachedPage !== undefined) {
+            obStore.setCursor({ limit: cursor.value.limit, page: cachedPage });
+        } else {
+            obStore.setCursor({ limit: cursor.value.limit, page: 1 });
+        }
+    }
 }
 
 /**
diff --git a/web/satellite/src/components/common/TablePagination.vue b/web/satellite/src/components/common/TablePagination.vue
index 7bfcf0c0f..00ada327d 100644
--- a/web/satellite/src/components/common/TablePagination.vue
+++ b/web/satellite/src/components/common/TablePagination.vue
@@ -87,7 +87,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { PageChangeCallback } from '@/types/pagination';
 import { useLoading } from '@/composables/useLoading';
@@ -114,6 +114,7 @@ const props = withDefaults(defineProps<{
     onNextClicked?: (() => Promise<void>) | null;
     onPreviousClicked?: (() => Promise<void>) | null;
     onPageSizeChanged?: ((size: number) => Promise<void> | void) | null;
+    pageNumber?: number;
 }>(), {
     itemsLabel: 'items',
     totalPageCount: 0,
@@ -124,6 +125,7 @@ const props = withDefaults(defineProps<{
     onNextClicked: null,
     onPreviousClicked: null,
     onPageSizeChanged: null,
+    pageNumber: 1,
 });
 
 const currentPageNumber = ref<number>(1);
@@ -260,6 +262,10 @@ async function prevPage(): Promise<void> {
         currentPageNumber.value--;
     });
 }
+
+watch(() => props.pageNumber, () => {
+    goToPage(props.pageNumber);
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/web/satellite/src/components/common/VTable.vue b/web/satellite/src/components/common/VTable.vue
index bea3d12ce..0657f4a4a 100644
--- a/web/satellite/src/components/common/VTable.vue
+++ b/web/satellite/src/components/common/VTable.vue
@@ -31,6 +31,7 @@
                 :on-page-change="onPageChange"
                 :on-next-clicked="onNextClicked"
                 :on-previous-clicked="onPreviousClicked"
+                :page-number="pageNumber"
             />
         </div>
     </div>
@@ -57,6 +58,7 @@ const props = withDefaults(defineProps<{
     showSelect?: boolean,
     simplePagination?: boolean,
     loading?: boolean,
+    pageNumber?: number,
 }>(), {
     selectable: false,
     selected: false,
@@ -71,6 +73,7 @@ const props = withDefaults(defineProps<{
     onPreviousClicked: null,
     onPageSizeChanged: null,
     loading: false,
+    pageNumber: 1,
 });
 
 const emit = defineEmits(['selectAllClicked']);
diff --git a/web/satellite/src/store/modules/objectBrowserStore.ts b/web/satellite/src/store/modules/objectBrowserStore.ts
index f61708730..9a52d1e56 100644
--- a/web/satellite/src/store/modules/objectBrowserStore.ts
+++ b/web/satellite/src/store/modules/objectBrowserStore.ts
@@ -297,6 +297,12 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
             }
 
             keyCount += response.KeyCount ?? 0;
+            // We decrement key count if we're inside a folder to exclude .file_placeholder object
+            // which was auto created for this folder because it's not visible by the user
+            // and it shouldn't be included in pagination process.
+            if (path) {
+                keyCount -= 1;
+            }
 
             if (!response.NextContinuationToken) break;