Merge pull request #20452 from davelopez/25.0_fix_pagination_state_in_files_dialog

[25.0] Fix pagination state in FilesDialog

Author: mvdbeek

client/src/components/DataDialog/utilities.js

@@ -6,19 +6,25 @@ export class UrlTracker {
     }
 
     /** Returns urls for data drilling **/
-    getUrl(url) {
+    getUrl(url, returnWithPrevious = false) {
+        let previous = undefined;
         if (url) {
             this.navigation.push(url);
         } else {
-            this.navigation.pop();
+            previous = this.navigation.pop();
             const navigationLength = this.navigation.length;
             if (navigationLength > 0) {
                 url = this.navigation[navigationLength - 1];
             } else {
                 url = this.root;
             }
         }
-        return url;
+
+        if (returnWithPrevious) {
+            return { url, popped: previous };
+        } else {
+            return url;
+        }
     }
 
     /** Returns true if the last data is at navigation root **/

client/src/components/FilesDialog/FilesDialog.vue

@@ -2,7 +2,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert } from "bootstrap-vue";
-import Vue, { computed, onMounted, ref } from "vue";
+import Vue, { computed, onMounted, ref, watch } from "vue";
 
 import {
     browseRemoteFiles,
@@ -70,6 +70,8 @@ const { config, isConfigLoaded } = useConfig();
 
 const selectionModel = ref<Model>(new Model({ multiple: props.multiple }));
 
+const query = ref<string>();
+const selectionDialog = ref();
 const allSelected = ref(false);
 const selectedDirectories = ref<SelectionItem[]>([]);
 const errorMessage = ref<string>();
@@ -249,13 +251,14 @@ function checkIfAllSelected(): boolean {
 }
 
 function open(record: SelectionItem) {
-    load(record);
+    currentDirectory.value = urlTracker.value.getUrl({ ...record, parentPage: selectionDialog.value.currentPage });
+    selectionDialog.value?.resetPagination(1);
+    load();
 }
 
 /** Performs server request to retrieve data records **/
-function load(record?: SelectionItem) {
-    currentDirectory.value = urlTracker.value.getUrl(record);
-    showFTPHelper.value = record?.url === "gxftp://";
+function load() {
+    showFTPHelper.value = currentDirectory.value?.url === "gxftp://";
     filter.value = undefined;
     optionsShow.value = false;
     undoShow.value = !urlTracker.value.atRoot();
@@ -353,8 +356,8 @@ async function provideItems(ctx: ItemsProviderContext, url?: string): Promise<Se
         }
         const limit = ctx.perPage;
         const offset = (ctx.currentPage ? ctx.currentPage - 1 : 0) * ctx.perPage;
-        const query = ctx.filter;
-        const response = await browseRemoteFiles(url, false, props.requireWritable, limit, offset, query);
+        query.value = ctx.filter;
+        const response = await browseRemoteFiles(url, false, props.requireWritable, limit, offset, query.value);
         const result = response.entries.map(entryToRecord);
         totalItems.value = response.totalMatches;
         items.value = result;
@@ -437,21 +440,38 @@ function pushToPropRouter(route: string) {
     }
 }
 
+function onGoBack(record?: SelectionItem) {
+    const res = urlTracker.value.getUrl(record, true);
+
+    currentDirectory.value = res.url;
+
+    load();
+
+    if (res?.popped) {
+        selectionDialog.value?.resetPagination(res?.popped.parentPage);
+    }
+}
+
+watch(query, () => {
+    selectionDialog.value?.resetPagination(1);
+});
+
 onMounted(() => {
-    load(props.selectedItem);
+    currentDirectory.value = urlTracker.value.getUrl(props.selectedItem);
+    load();
 });
 </script>
 
 <template>
     <SelectionDialog
+        ref="selectionDialog"
         :disable-ok="okButtonDisabled"
         :error-message="errorMessage"
         :file-mode="fileMode"
         :fields="fields"
         :is-busy="isBusy"
         :items="items"
         :items-provider="itemsProvider"
-        :provider-url="currentDirectory?.url"
         :total-items="totalItems"
         :modal-show="modalShow"
         :modal-static="modalStatic"
@@ -460,12 +480,13 @@ onMounted(() => {
         :select-all-variant="selectAllIcon"
         :show-select-icon="undoShow && multiple"
         :undo-show="undoShow"
+        :watch-on-page-changes="false"
         @onCancel="() => (modalShow = false)"
         @onClick="clicked"
         @onOk="onOk"
         @onOpen="open"
         @onSelectAll="onSelectAll"
-        @onUndo="load()">
+        @onUndo="onGoBack">
         <template v-slot:helper>
             <BAlert v-if="showFTPHelper && isConfigLoaded" id="helper" variant="info" show>
                 This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at

client/src/components/SelectionDialog/SelectionDialog.vue

@@ -45,6 +45,7 @@ interface Props {
     searchTitle?: string;
     okButtonText?: string;
     filterClass?: Filtering<any>;
+    watchOnPageChanges?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -71,6 +72,7 @@ const props = withDefaults(defineProps<Props>(), {
     searchTitle: undefined,
     okButtonText: "Select",
     filterClass: undefined,
+    watchOnPageChanges: true,
 });
 
 const emit = defineEmits<{
@@ -143,31 +145,26 @@ function resetFilter() {
     filter.value = "";
 }
 
-function resetPagination() {
-    currentPage.value = 1;
+function resetPagination(toInitialPage = 1) {
+    currentPage.value = toInitialPage;
+}
+
+if (props.watchOnPageChanges) {
+    watch(
+        () => props.items,
+        () => {
+            if (props.itemsProvider === undefined) {
+                resetPagination();
+            }
+        }
+    );
 }
 
 defineExpose({
     resetFilter,
     resetPagination,
+    currentPage,
 });
-
-watch(
-    () => props.items,
-    () => {
-        filtered(props.items);
-    }
-);
-
-watch(
-    () => props.providerUrl,
-    () => {
-        // We need to reset the current page when drilling down sub-folders
-        if (props.itemsProvider !== undefined) {
-            resetPagination();
-        }
-    }
-);
 </script>
 
 <template>