Provide total items from FilesDialog to SelectionDialog

This will allow to decouple the total matches from the actual returned items from pagination.
galaxyproject · May 16, 2024 · 7efbd99 · 7efbd99
1 parent 4fbb49a
commit 7efbd99
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/client/src/api/remoteFiles.ts b/client/src/api/remoteFiles.ts
@@ -46,6 +46,11 @@ export async function getFileSources(options: FilterFileSourcesOptions = {}): Pr
 
 export const remoteFilesFetcher = fetcher.path("/api/remote_files").method("get").create();
 
+export interface BrowseRemoteFilesResult {
+    entries: RemoteEntry[];
+    totalMatches: number;
+}
+
 /**
  * Get the list of files and directories from the server for the given file source URI.
  * @param uri The file source URI to browse.
@@ -65,8 +70,8 @@ export async function browseRemoteFiles(
     offset?: number,
     query?: string,
     sortBy?: string
-): Promise<RemoteEntry[]> {
-    const { data } = await remoteFilesFetcher({
+): Promise<BrowseRemoteFilesResult> {
+    const { data, headers } = await remoteFilesFetcher({
         target: uri,
         recursive: isRecursive,
         writeable,
@@ -75,7 +80,8 @@ export async function browseRemoteFiles(
         query,
         sort_by: sortBy,
     });
-    return data as RemoteEntry[];
+    const totalMatches = parseInt(headers.get("total_matches") ?? "0");
+    return { entries: data as RemoteEntry[], totalMatches };
 }
 
 const createEntry = fetcher.path("/api/remote_files").method("post").create();

diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
@@ -66,6 +66,7 @@ const currentDirectory = ref<SelectionItem>();
 const showFTPHelper = ref(false);
 const selectAllIcon = ref(SELECTION_STATES.UNSELECTED);
 const urlTracker = ref(new UrlTracker(""));
+const totalItems = ref(0);
 
 const fields = computed(() => {
     const fields = [];
@@ -156,7 +157,7 @@ function selectDirectoryRecursive(record: SelectionItem) {
         const recursive = true;
         isBusy.value = true;
         browseRemoteFiles(record.url, recursive).then((incoming) => {
-            incoming.forEach((item) => {
+            incoming.entries.forEach((item) => {
                 // construct record
                 const subRecord = entryToRecord(item);
                 if (subRecord.isLeaf) {
@@ -167,6 +168,7 @@ function selectDirectoryRecursive(record: SelectionItem) {
                     selectedDirectories.value.push(subRecord);
                 }
             });
+            totalItems.value = incoming.totalMatches;
             isBusy.value = false;
         });
     }
@@ -241,6 +243,7 @@ function load(record?: SelectionItem) {
                 optionsShow.value = true;
                 showTime.value = false;
                 showDetails.value = true;
+                totalItems.value = convertedItems.length;
             })
             .catch((error) => {
                 errorMessage.value = errorMessageAsString(error);
@@ -258,8 +261,9 @@ function load(record?: SelectionItem) {
             return;
         }
         browseRemoteFiles(currentDirectory.value?.url, false, props.requireWritable)
-            .then((results) => {
-                items.value = filterByMode(results).map(entryToRecord);
+            .then((result) => {
+                items.value = filterByMode(result.entries).map(entryToRecord);
+                totalItems.value = result.totalMatches;
                 formatRows();
                 optionsShow.value = true;
                 showTime.value = true;
@@ -346,6 +350,7 @@ onMounted(() => {
         :fields="fields"
         :is-busy="isBusy"
         :items="items"
+        :total-items="totalItems"
         :modal-show="modalShow"
         :modal-static="modalStatic"
         :multiple="multiple"

diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -26,6 +26,7 @@ interface Props {
     isBusy?: boolean;
     isEncoded?: boolean;
     items?: Array<SelectionItem>;
+    totalItems?: number;
     leafIcon?: string;
     modalShow?: boolean;
     modalStatic?: boolean;
@@ -45,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
     isBusy: false,
     isEncoded: false,
     items: () => [],
+    totalItems: 0,
     leafIcon: "fa fa-file-o",
     modalShow: true,
     modalStatic: false,
@@ -67,7 +69,6 @@ const emit = defineEmits<{
 
 const filter = ref("");
 const currentPage = ref(1);
-const nItems = ref(0);
 const perPage = ref(100);
 
 const fieldDetails = computed(() => {
@@ -97,7 +98,6 @@ function selectionIcon(variant: string) {
 
 /** Resets pagination when a filter/search word is entered **/
 function filtered(items: Array<SelectionItem>) {
-    nItems.value = items.length;
     currentPage.value = 1;
 }
 
@@ -200,7 +200,7 @@ watch(
                     <BSpinner small type="grow" />
                     <BSpinner small type="grow" />
                 </div>
-                <div v-if="nItems === 0">
+                <div v-if="totalItems === 0">
                     <div v-if="filter">
                         No search results found for: <b>{{ filter }}</b
                         >.
@@ -223,12 +223,12 @@ watch(
                     <slot v-if="!errorMessage" name="buttons" />
                 </div>
                 <BPagination
-                    v-if="nItems > perPage"
+                    v-if="totalItems > perPage"
                     v-model="currentPage"
                     class="justify-content-md-center m-0"
                     size="sm"
                     :per-page="perPage"
-                    :total-rows="nItems" />
+                    :total-rows="totalItems" />
                 <div>
                     <BButton
                         data-description="selection dialog cancel"