LP1891699 Ang grid column picker sorting

Angular grid column picker displays colums in the following order:

1. Visible colums first, sorted alphabetically.
2. Non-visible columns second, sorted alphabetically.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Mike Risher <mrisher@catalyte.io>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
index eb701ce..14607b7 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
@@ -140,7 +140,8 @@
       <div class="dropdown-divider"></div>
 
       <a class="dropdown-item label-with-material-icon"
-        (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
+        (click)="col.visible=!col.visible"
+        *ngFor="let col of gridContext.columnSet.sortForColPicker()">
         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
         <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>
         <span class="ml-2">{{col.label}}</span>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
index c45acb3..72c0947 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -274,6 +274,19 @@ export class GridColumnSet {
         return this.columns.filter(c => c.visible);
     }
 
+    // Sorted visible columns followed by sorted non-visible columns.
+    // Note we don't sort this.columns directly as it would impact
+    // grid column display ordering.
+    sortForColPicker(): GridColumn[] {
+        const visible = this.columns.filter(c => c.visible);
+        const invisible = this.columns.filter(c => !c.visible);
+
+        visible.sort((a, b) => a.label < b.label ? -1 : 1);
+        invisible.sort((a, b) => a.label < b.label ? -1 : 1);
+
+        return visible.concat(invisible);
+    }
+
     insertBefore(source: GridColumn, target: GridColumn) {
         let targetIdx = -1;
         let sourceIdx = -1;