Unverified Commit 4eab3488 authored by Alireza Heidari's avatar Alireza Heidari Committed by davelopez
Browse files

Fix pagination state in FilesDialog 

Remember last page when navigating back
parent 01209e17

client/src/components/DataDialog/utilities.js

+9 −3
Original line number Diff line number Diff line
@@ -6,11 +6,12 @@ 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];
@@ -18,8 +19,13 @@ export class UrlTracker { 
                url = this.root;

            }

        }



        if (returnWithPrevious) {

            return { url, popped: previous };

        } else {

            return url;

        }

    }



    /** Returns true if the last data is at navigation root **/

    atRoot() {

client/src/components/FilesDialog/FilesDialog.vue

+31 −10
Original line number Diff line number Diff line
@@ -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,13 +440,31 @@ 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"
@@ -451,7 +472,6 @@ onMounted(() => { 
        :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

+16 −19
Original line number Diff line number Diff line
@@ -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;

}



defineExpose({

    resetFilter,

    resetPagination,

});



if (props.watchOnPageChanges) {

    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) {

            if (props.itemsProvider === undefined) {

                resetPagination();

            }

        }

    );

}



defineExpose({

    resetFilter,

    resetPagination,

    currentPage,

});

</script>



<template>