From bb54eadf813dd6f01e8ad6f9c5286e1e6ca2bf14 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 20 Oct 2023 21:00:45 +0300
Subject: [PATCH] Add sorting option

---
 client/src/components/Grid/GridList.vue       | 46 ++++++++++++++++---
 client/src/components/Grid/configs/types.ts   |  8 +++-
 .../components/Grid/configs/visualizations.js | 10 ++--
 lib/galaxy/schema/visualization.py            |  2 +-
 4 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
index f6ffa8b6881d..d2348e90457a 100644
--- a/client/src/components/Grid/GridList.vue
+++ b/client/src/components/Grid/GridList.vue
@@ -46,6 +46,9 @@ const totalRows = ref(0);
 // loading indicator
 const loading = ref(true);
 
+// search term
+const searchTerm = ref("");
+
 // current grid configuration
 const gridConfig = computed(() => {
     return registry[props.id];
@@ -54,13 +57,27 @@ const gridConfig = computed(() => {
 // check if loading has completed and data rows are available
 const isAvailable = computed(() => !loading.value && totalRows.value > 0);
 
+// sort references
+const sortBy = ref(gridConfig.value ? gridConfig.value.sortBy : "");
+const sortDesc = ref(gridConfig.value ? gridConfig.value.sortDesc : false);
+
 /**
  * Request grid data
  */
 async function getGridData() {
     if (gridConfig.value) {
         try {
-            const response = await axios.get(withPrefix(gridConfig.value.getUrl(currentPage.value, props.perPage, "")));
+            const response = await axios.get(
+                withPrefix(
+                    gridConfig.value.getUrl(
+                        currentPage.value,
+                        props.perPage,
+                        sortBy.value,
+                        sortDesc.value,
+                        searchTerm.value
+                    )
+                )
+            );
             if (response.headers.total_matches) {
                 totalRows.value = parseInt(response.headers.total_matches);
             }
@@ -77,7 +94,7 @@ async function getGridData() {
 /**
  * Execute grid operation and display message if available
  */
-async function executeOperation(operation: Operation, rowData: RowData) {
+async function onOperation(operation: Operation, rowData: RowData) {
     const response = await operation.handler(rowData, router);
     if (response) {
         await getGridData();
@@ -86,6 +103,14 @@ async function executeOperation(operation: Operation, rowData: RowData) {
     }
 }
 
+function onSort(sortKey: string) {
+    if (sortBy.value !== sortKey) {
+        sortBy.value = sortKey;
+    } else {
+        sortDesc.value = !sortDesc.value;
+    }
+}
+
 /**
  * Process tag inputs
  */
@@ -106,7 +131,7 @@ onMounted(() => {
 /**
  * Load current page
  */
-watch(currentPage, () => getGridData());
+watch([currentPage, sortDesc, sortBy], () => getGridData());
 
 /**
  * Operation message timeout handler
@@ -131,8 +156,17 @@ watch(operationMessage, () => {
         <BAlert v-else-if="!isAvailable" v-localize variant="info" show>No entries found.</BAlert>
         <table v-else class="grid-table">
             <thead>
-                <th v-for="(fieldEntry, fieldIndex) in gridConfig.fields" :key="fieldIndex" class="px-2">
-                    {{ fieldEntry.title || fieldEntry.key }}
+                <th v-for="(fieldEntry, fieldIndex) in gridConfig.fields" :key="fieldIndex" class="text-nowrap px-2">
+                    <span v-if="gridConfig.sortKeys.includes(fieldEntry.key)">
+                        <b-link @click="onSort(fieldEntry.key)">
+                            <span>{{ fieldEntry.title || fieldEntry.key }}</span>
+                            <span v-if="sortBy === fieldEntry.key">
+                                <icon v-if="sortDesc" icon="caret-up" />
+                                <icon v-else icon="caret-down" />
+                            </span>
+                        </b-link>
+                    </span>
+                    <span v-else>{{ fieldEntry.title || fieldEntry.key }}</span>
                 </th>
             </thead>
             <tr v-for="(rowData, rowIndex) in gridData" :key="rowIndex" :class="{ 'grid-dark-row': rowIndex % 2 }">
@@ -141,7 +175,7 @@ watch(operationMessage, () => {
                         v-if="fieldEntry.type == 'operations'"
                         :title="rowData.title"
                         :operations="fieldEntry.operations"
-                        @execute="executeOperation($event, rowData)" />
+                        @execute="onOperation($event, rowData)" />
                     <GridText v-else-if="fieldEntry.type == 'text'" :text="rowData[fieldEntry.key]" />
                     <GridSharing
                         v-else-if="fieldEntry.type == 'sharing'"
diff --git a/client/src/components/Grid/configs/types.ts b/client/src/components/Grid/configs/types.ts
index 6f86eeafd886..083c09fab640 100644
--- a/client/src/components/Grid/configs/types.ts
+++ b/client/src/components/Grid/configs/types.ts
@@ -3,7 +3,7 @@ type Field = FieldKey | FieldOperations;
 // TODO: type FieldType = "date" | "operations" | "sharing" | "tags" | "text" | undefined;
 
 interface FieldKey {
-    key?: string;
+    key: string;
     type: string;
     handler?: FieldKeyHandler;
 }
@@ -16,15 +16,19 @@ interface OperationHandlerMessage {
 type OperationHandlerReturn = OperationHandlerMessage | void;
 
 export interface Config {
-    getUrl: (currentPage: number, perPage: number, search: string) => string;
+    getUrl: (currentPage: number, perPage: number, sortBy: string, sortDesc: boolean, search: string) => string;
     resource: string;
     item: string;
     plural: string;
     title: string;
     fields: Array<Field>;
+    sortBy: string;
+    sortKeys: Array<string>;
+    sortDesc: boolean;
 }
 
 export interface FieldOperations {
+    key: string;
     title: string;
     operations: Array<Operation>;
 }
diff --git a/client/src/components/Grid/configs/visualizations.js b/client/src/components/Grid/configs/visualizations.js
index a5e6f0cd5e80..f9adb765d257 100644
--- a/client/src/components/Grid/configs/visualizations.js
+++ b/client/src/components/Grid/configs/visualizations.js
@@ -4,17 +4,21 @@ import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString, rethrowSimple } from "@/utils/simple-error";
 
 export const VisualizationsGrid = {
-    getUrl: (currentPage, perPage, searchTerm) => {
+    getUrl: (currentPage, perPage, sortBy, sortDesc, searchTerm) => {
         const offset = perPage * (currentPage - 1);
-        return `/api/visualizations/detailed?limit=${perPage}&offset=${offset}`;
+        return `/api/visualizations/detailed?limit=${perPage}&offset=${offset}&sort_by=${sortBy}&sort_desc=${sortDesc}`;
     },
     resource: "visualizations",
     item: "visualization",
     plural: "Visualizations",
     title: "Saved Visualizations",
+    sortBy: "update_time",
+    sortDesc: true,
+    sortKeys: ["create_time", "title", "update_time"],
     fields: [
         {
             title: "Title",
+            key: "title",
             type: "operations",
             operations: [
                 {
@@ -107,7 +111,7 @@ export const VisualizationsGrid = {
         },
         {
             key: "update_time",
-            title: "Last updated",
+            title: "Updated",
             type: "date",
         },
         {
diff --git a/lib/galaxy/schema/visualization.py b/lib/galaxy/schema/visualization.py
index 359f5679c712..3a72feb38e73 100644
--- a/lib/galaxy/schema/visualization.py
+++ b/lib/galaxy/schema/visualization.py
@@ -24,7 +24,7 @@
 )
 
 
-VisualizationSortByEnum = Literal["update_time", "title", "username"]
+VisualizationSortByEnum = Literal["create_time", "title", "update_time", "username"]
 
 
 class VisualizationIndexQueryPayload(Model):