Merge pull request #20452 from davelopez/25.0_fix_pagination_state_in_files_dialog (01679117) · Commits · NDIP / Galaxy

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>