Merge pull request galaxyproject#17992 from guerler/add_tags_datasele…

…ctor Add tags to data dialog display, restores update_time and extension columns
guerler · Apr 17, 2024 · 235f84f · 235f84f
2 parents 67436a6 + 25e6809
commit 235f84f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/client/src/components/DataDialog/DataDialog.vue b/client/src/components/DataDialog/DataDialog.vue
@@ -61,6 +61,22 @@ const services = new Services();
 const model = new Model({ multiple: props.multiple, format: props.format });
 let urlTracker = new UrlTracker(getHistoryUrl());
 
+/** Specifies data columns to be shown in the dialog's table */
+const fields = [
+    {
+        key: "label",
+    },
+    {
+        key: "extension",
+    },
+    {
+        key: "tags",
+    },
+    {
+        key: "update_time",
+    },
+];
+
 /** Add highlighting for record variations, i.e. datasets vs. libraries/collections **/
 function formatRows() {
     for (const item of items.value) {
@@ -168,6 +184,7 @@ watch(
     <SelectionDialog
         :error-message="errorMessage"
         :disable-ok="!hasValue"
+        :fields="fields"
         :items="items"
         :modal-show="modalShow"
         :multiple="multiple"

diff --git a/client/src/components/SelectionDialog/BasicSelectionDialog.vue b/client/src/components/SelectionDialog/BasicSelectionDialog.vue
@@ -54,18 +54,8 @@ async function load() {
         const response = await props.getData();
         const incoming = response.data;
         items.value = incoming.map((item: any) => {
-            let timeStamp = item[props.timeKey];
+            const timeStamp = item[props.timeKey];
             showTime.value = !!timeStamp;
-            if (timeStamp) {
-                const date = new Date(timeStamp);
-                timeStamp = date.toLocaleString("default", {
-                    day: "numeric",
-                    month: "short",
-                    year: "numeric",
-                    minute: "numeric",
-                    hour: "numeric",
-                });
-            }
             return {
                 id: item.id,
                 label: item[props.labelKey] || null,

diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -11,6 +11,7 @@ import { SELECTION_STATES } from "@/components/SelectionDialog/selectionTypes";
 import { type FieldEntry, type SelectionItem } from "./selectionTypes";
 
 import DataDialogSearch from "@/components/SelectionDialog/DataDialogSearch.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
 library.add(faCaretLeft, faCheck, faCheckSquare, faFolder, faMinusSquare, faSpinner, faSquare, faTimes);
 
@@ -100,6 +101,22 @@ function filtered(items: Array<SelectionItem>) {
     currentPage.value = 1;
 }
 
+/** Format time stamp */
+function formatTime(value: string) {
+    if (value) {
+        const date = new Date(value);
+        return date.toLocaleString("default", {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+            minute: "numeric",
+            hour: "numeric",
+        });
+    } else {
+        return "-";
+    }
+}
+
 watch(
     () => props.items,
     () => {
@@ -167,8 +184,15 @@ watch(
                     <template v-slot:cell(details)="data">
                         <span :title="`details-${data.item.url}`">{{ data.value ? data.value : "-" }}</span>
                     </template>
+                    <template v-slot:cell(tags)="data">
+                        <StatelessTags v-if="data.value?.length > 0" :value="data.value" :disabled="true" />
+                        <span v-else>-</span>
+                    </template>
                     <template v-slot:cell(time)="data">
-                        {{ data.value ? data.value : "-" }}
+                        {{ formatTime(data.value) }}
+                    </template>
+                    <template v-slot:cell(update_time)="data">
+                        {{ formatTime(data.value) }}
                     </template>
                 </BTable>
                 <div v-if="isBusy" class="text-center">