Add additional columns to data dialog, properly format update time

guerler · Apr 16, 2024 · c3403d6 · c3403d6
1 parent d5458b0
commit c3403d6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 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/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -100,6 +100,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,
     () => {
@@ -170,6 +186,9 @@ watch(
                     <template v-slot:cell(time)="data">
                         {{ data.value ? data.value : "-" }}
                     </template>
+                    <template v-slot:cell(update_time)="data">
+                        {{ formatTime(data.value) }}
+                    </template>
                 </BTable>
                 <div v-if="isBusy" class="text-center">
                     <BSpinner small type="grow" />