From e276fd1e176a934aec127c284ef9afda39ee5024 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 15 Jul 2022 14:43:27 +0800
Subject: [PATCH] enhancement: sorting menu

---
 .../spreadsheet/components/SortListMenu.vue   | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
index 5e3f72c598..262d3336eb 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
@@ -37,13 +37,11 @@
             @change="saveOrUpdate(sort, i)"
           />
           <v-select
+            v-if="sort && sort.fk_column_id"
             :key="i + 'sel2'"
             v-model="sort.direction"
             class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
-            :items="[
-              { text: 'A -> Z', value: 'asc' },
-              { text: 'Z -> A', value: 'desc' },
-            ]"
+            :items="renderSortDirection(sort)"
             :label="$t('labels.operation')"
             solo
             flat
@@ -101,6 +99,9 @@ export default {
     validSortsExist() {
       return this.sortList && this.sortList.filter(sort => sort.fk_column_id !== null).length > 0;
     },
+    columnsById() {
+      return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {});
+    },
   },
   watch: {
     value(v) {
@@ -163,6 +164,45 @@ export default {
       this.$emit('updated');
       this.$e('a:sort:delete');
     },
+    renderSortDirection(sort) {
+      console.log(this.sortList);
+      // TODO: handle single / multiple select when reordering is available
+      // [
+      //     { text: 'First → Last', value: 'asc' },
+      //     { text: 'Last → First', value: 'desc' },
+      // ]
+      switch (this.columnsById[sort.fk_column_id].uidt) {
+        case UITypes.Year:
+        case UITypes.Number:
+        case UITypes.Decimal:
+        case UITypes.Rating:
+        case UITypes.Count:
+        case UITypes.AutoNumber:
+        case UITypes.Time:
+        case UITypes.Currency:
+        case UITypes.Percent:
+        case UITypes.Duration:
+        case UITypes.PhoneNumber:
+        case UITypes.Date:
+        case UITypes.DateTime:
+        case UITypes.CreateTime:
+        case UITypes.LastModifiedTime:
+          return [
+            { text: '1 → 9', value: 'asc' },
+            { text: '9 → 1', value: 'desc' },
+          ];
+        case UITypes.Checkbox:
+          return [
+            { text: '▢ → ✓', value: 'asc' },
+            { text: '✓ → ▢', value: 'desc' },
+          ];
+        default:
+          return [
+            { text: 'A → Z', value: 'asc' },
+            { text: 'Z → A', value: 'desc' },
+          ];
+      }
+    },
   },
 };
 </script>
@@ -170,7 +210,7 @@ export default {
 <style scoped>
 .sort-grid {
   display: grid;
-  grid-template-columns: 22px auto 100px;
+  grid-template-columns: 22px auto 120px;
   column-gap: 6px;
   row-gap: 6px;
 }