From 1315cc366fa634f750292aeaa4c5ffe470017705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?=
 <jaroslaw.sadzinski@gmail.com>
Date: Wed, 9 Oct 2024 11:13:31 +0200
Subject: [PATCH] Adding sort order for filters

---
 app/client/models/entities/ColumnRec.ts      | 11 ++++++++---
 app/client/models/entities/ViewSectionRec.ts |  2 +-
 app/client/ui/CustomSectionConfig.ts         |  7 ++++---
 app/client/ui/SortConfig.ts                  |  3 ++-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/client/models/entities/ColumnRec.ts b/app/client/models/entities/ColumnRec.ts
index 8a4b8aa7..2ecdd471 100644
--- a/app/client/models/entities/ColumnRec.ts
+++ b/app/client/models/entities/ColumnRec.ts
@@ -230,9 +230,14 @@ export function formatterForRec(
   return func(args);
 }
 
-export function labelsOrder(a: ColumnRec, b: ColumnRec): number {
-  const left  = a.label.peek().toLowerCase();
-  const right = b.label.peek().toLowerCase();
+type ColumnInfo = {label: string}|{label: ko.Observable<string>};
+function peekLabel(info: ColumnInfo): string {
+  return typeof info.label === 'string' ? info.label : info.label.peek();
+}
+
+export function labelsOrder(a: ColumnInfo, b: ColumnInfo): number {
+  const left  = peekLabel(a).toLowerCase();
+  const right = peekLabel(b).toLowerCase();
 
   // Order is as follows:
   // - First columns with normal labels starting with a letter.
diff --git a/app/client/models/entities/ViewSectionRec.ts b/app/client/models/entities/ViewSectionRec.ts
index 2dc36c77..c99849f0 100644
--- a/app/client/models/entities/ViewSectionRec.ts
+++ b/app/client/models/entities/ViewSectionRec.ts
@@ -521,7 +521,7 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel):
     const savedFiltersByColRef = new Map(this._savedFilters().all().map(f => [f.colRef(), f]));
     const viewFieldsByColRef = new Map(this.viewFields().all().map(f => [f.origCol().getRowId(), f]));
 
-    return this.columns().map(column => {
+    return [...this.columns()].sort(labelsOrder).map(column => {
       const savedFilter = savedFiltersByColRef.get(column.origColRef());
       // Initialize with a saved filter, if one exists. Otherwise, use a blank filter.
       const filter = modelUtil.customComputed({
diff --git a/app/client/ui/CustomSectionConfig.ts b/app/client/ui/CustomSectionConfig.ts
index 4ce4bf77..82245f3e 100644
--- a/app/client/ui/CustomSectionConfig.ts
+++ b/app/client/ui/CustomSectionConfig.ts
@@ -76,12 +76,13 @@ class ColumnPicker extends Disposable {
       void use(refreshTrigger);
 
       const columnsAsOptions: IOption<number|null>[] = use(canBeMapped)
-        .sort(labelsOrder)
         .map((col) => ({
           value: col.getRowId(),
           label: col.label.peek() || '',
-          icon: 'FieldColumn',
-        }));
+          icon: 'FieldColumn' as const,
+        }))
+        .sort(labelsOrder);
+
 
       // For optional mappings, add 'Blank' option but only if the value is set.
       // This option will allow to clear the selection.
diff --git a/app/client/ui/SortConfig.ts b/app/client/ui/SortConfig.ts
index 44c4f43c..ec675188 100644
--- a/app/client/ui/SortConfig.ts
+++ b/app/client/ui/SortConfig.ts
@@ -4,6 +4,7 @@ import * as kf from 'app/client/lib/koForm';
 import {makeT} from 'app/client/lib/localization';
 import {addToSort, updatePositions} from 'app/client/lib/sortUtil';
 import {ViewSectionRec} from 'app/client/models/DocModel';
+import {labelsOrder} from 'app/client/models/entities/ColumnRec';
 import {ObjObservable} from 'app/client/models/modelUtil';
 import {dropdownWithSearch} from 'app/client/ui/searchDropdown';
 import {cssIcon, cssRow, cssSortFilterColumn} from 'app/client/ui/RightPanelStyles';
@@ -215,7 +216,7 @@ export class SortConfig extends Disposable {
       const currentSection = this._section;
       const currentSortSpec = use(currentSection.activeSortSpec);
       const specRowIds = new Set(currentSortSpec.map(_sortRef => Sort.getColRef(_sortRef)));
-      return use(columns).filter(_col => !specRowIds.has(_col.value));
+      return use(columns).filter(_col => !specRowIds.has(_col.value)).sort(labelsOrder);
     });
     const {menuOptions} = this._options;
     return cssButtonRow(