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 658b230..9bf7b8f 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
@@ -143,7 +143,8 @@
       <div class="dropdown-divider"></div>
 
       <a class="dropdown-item label-with-material-icon"
-        (click)="toggleVisibility(col)" *ngFor="let col of gridContext.columnSet.columns">
+        (click)="toggleVisibility(col)"
+        *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 7fb4117..f414b8d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -386,6 +386,19 @@ export class GridColumnSet {
             this.columns.filter(c => c.required && !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;