Merge pull request #2687 from nocodb/enhancement/sort

enhancement: sort menu

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,44 @@ export default {
       this.$emit('updated');
       this.$e('a:sort:delete');
     },
+    renderSortDirection(sort) {
+      // 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 +209,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;
 }

packages/noco-docs/content/en/setup-and-usages/column-operations.md

@@ -38,7 +38,7 @@ Tip: You can create different grid views with different fields shown in each vie
 
 ## Sort 
 
-Sorting allows you to order contents alphabetically (A -> Z) / (Z -> A)  (OR) in ascending / descending order. NocoDB allows nested sorting. You can choose column fields & order in which to apply nested sorting. Lookup, Formula, Nested Data are also supported in Sorting.
+Sorting allows you to order contents alphabetically (A → Z) / (Z → A)  (OR) in ascending / descending order. NocoDB allows nested sorting. You can choose column fields & order in which to apply nested sorting. Lookup, Formula, Nested Data are also supported in Sorting.
   
   
 <img src="https://user-images.githubusercontent.com/86527202/144435903-84ed8e81-64ec-45e5-a045-9a993238c78c.png" width="75%"/>  

scripts/cypress/integration/common/1c_sql_view.js

@@ -54,7 +54,7 @@ export const genTest = (apiType, dbType) => {
                 mainPage.unhideField(`ZipCode`);
 
                 // Column operations: Sort
-                mainPage.sortField("Name", "Z -> A");
+                mainPage.sortField("Name", "Z → A");
                 mainPage
                     .getCell(`Name`, 1)
                     .contains("ZACHARY HITE")
@@ -114,7 +114,7 @@ export const genTest = (apiType, dbType) => {
                 mainPage.unhideField("FilmInfo");
 
                 // Column operations: Sort
-                mainPage.sortField("FirstName", "Z -> A");
+                mainPage.sortField("FirstName", "Z → A");
                 mainPage
                     .getCell(`FirstName`, 1)
                     .contains("ZERO")

scripts/cypress/integration/common/1e_meta_sync.js

@@ -148,7 +148,7 @@ export const genTest = (apiType, dbType) => {
 
             cy.openTableTab("Table1", 9);
             mainPage.hideField("Col1");
-            mainPage.sortField("Col1", "Z -> A");
+            mainPage.sortField("Col1", "9 → 1");
             mainPage.filterField(`Col1`, ">=", "5");
             cy.get(".nc-grid-row").should("have.length", 5);
             cy.closeTableTab("Table1");

scripts/cypress/integration/common/1e_pg_meta_sync.js

@@ -156,7 +156,7 @@ export const genTest = (apiType, dbType) => {
 
             cy.openTableTab("Table1", 9);
             mainPage.hideField("Col1");
-            mainPage.sortField("Col1", "Z -> A");
+            mainPage.sortField("Col1", "9 → 1");
             mainPage.filterField(`Col1`, ">=", "5");
             cy.get(".nc-grid-row").should("have.length", 5);
             cy.closeTableTab("Table1");

scripts/cypress/integration/common/3a_filter_sort_fields_operations.js

@@ -140,7 +140,7 @@ export const genTest = (apiType, dbType) => {
 
         describe(`Sort operations`, () => {
             it("Enable sort", () => {
-                mainPage.sortField("Country", "Z -> A");
+                mainPage.sortField("Country", "Z → A");
 
                 // Sort menu operations (Country Column, Z->A)
                 // cy.get(".nc-sort-menu-btn").click();
@@ -151,7 +151,7 @@ export const genTest = (apiType, dbType) => {
                 // ).click();
                 // cy.get(".nc-sort-dir-select div").first().click();
                 // cy.get(
-                //   '.menuable__content__active .v-list-item:contains("Z -> A")'
+                //   '.menuable__content__active .v-list-item:contains("Z → A")'
                 // ).click();
 
                 cy.contains("Zambia").should("exist");

scripts/cypress/integration/common/4f_grid_view_share.js

@@ -88,7 +88,7 @@ export const genTest = (apiType, dbType) => {
                     .contains("Address1")
                     .click();
                 mainPage.hideField("Address2");
-                mainPage.sortField("District", "Z -> A");
+                mainPage.sortField("District", "Z → A");
                 mainPage.filterField("Address", "is like", "Ab");
                 generateViewLink("combined");
                 cy.log(viewURL["combined"]);
@@ -209,8 +209,8 @@ export const genTest = (apiType, dbType) => {
             });
 
             it(`Share ${viewType.toUpperCase()} view : Enable sort`, () => {
-                // Sort menu operations (Country Column, Z->A)
-                mainPage.sortField("District", "Z -> A");
+                // Sort menu operations (Country Column, Z → A)
+                mainPage.sortField("District", "Z → A");
                 mainPage
                     .getCell("District", 1)
                     .contains("West Bengali")

scripts/cypress/integration/common/4f_pg_grid_view_share.js

@@ -88,7 +88,7 @@ export const genTest = (apiType, dbType) => {
                     .contains("Address1")
                     .click();
                 mainPage.hideField("Address2");
-                mainPage.sortField("Address", "Z -> A");
+                mainPage.sortField("Address", "Z → A");
                 mainPage.filterField("Address", "is like", "Ab");
                 generateViewLink("combined");
                 cy.log(viewURL["combined"]);
@@ -207,7 +207,7 @@ export const genTest = (apiType, dbType) => {
 
             it(`Share ${viewType.toUpperCase()} view : Enable sort`, () => {
                 // Sort menu operations (Country Column, Z->A)
-                mainPage.sortField("Address", "Z -> A");
+                mainPage.sortField("Address", "Z → A");
                 mainPage
                     .getCell("Address", 1)
                     .contains("669 Firozabad Loop")

scripts/cypress/integration/common/9a_QuickTest.js

@@ -330,7 +330,7 @@ export const genTest = (apiType, dbType, testMode) => {
               .contains('Name')
               .should("exist");
             cy.get(".nc-sort-dir-select").eq(0)
-              .contains('A -> Z')
+              .contains('A → Z')
               .should("exist");
             cy.get(".nc-sort-menu-btn").click();