From 74cab111917c91c64b39f8d913be228259d42982 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 16 Oct 2023 17:17:14 +0100
Subject: [PATCH] Improve grid sorting labels to account for date types and
 provide better labels

---
 .../components/grid/cells/HeaderCell.svelte   | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 6648ba1a69..f367e3427f 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -51,16 +51,33 @@
   $: sortedBy = column.name === $sort.column
   $: canMoveLeft = orderable && idx > 0
   $: canMoveRight = orderable && idx < $renderedColumns.length - 1
-  $: numericType = [FieldType.NUMBER, FieldType.BIGINT].includes(
-    column.schema?.type
-  )
-  $: ascendingLabel = numericType ? "low-high" : "A-Z"
-  $: descendingLabel = numericType ? "high-low" : "Z-A"
+  $: sortingLabels = getSortingLabels(column.schema?.type)
   $: searchable = isColumnSearchable(column)
   $: resetSearchValue(column.name)
   $: searching = searchValue != null
   $: debouncedUpdateFilter(searchValue)
 
+  const getSortingLabels = type => {
+    switch (type) {
+      case FieldType.NUMBER:
+      case FieldType.BIGINT:
+        return {
+          ascending: "low-high",
+          descending: "high-low",
+        }
+      case FieldType.DATETIME:
+        return {
+          ascending: "old-new",
+          descending: "new-old",
+        }
+      default:
+        return {
+          ascending: "A-Z",
+          descending: "Z-A",
+        }
+    }
+  }
+
   const resetSearchValue = name => {
     searchValue = $inlineFilters?.find(x => x.id === `inline-${name}`)?.value
   }
@@ -318,14 +335,14 @@
         on:click={sortAscending}
         disabled={column.name === $sort.column && $sort.order === "ascending"}
       >
-        Sort {ascendingLabel}
+        Sort {sortingLabels.ascending}
       </MenuItem>
       <MenuItem
         icon="SortOrderDown"
         on:click={sortDescending}
         disabled={column.name === $sort.column && $sort.order === "descending"}
       >
-        Sort {descendingLabel}
+        Sort {sortingLabels.descending}
       </MenuItem>
       <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
         Move left