LP1806087 Catalog holds display WIP (grid grouped actions)

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-action.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-action.component.ts
index 0a33376..4849193 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-action.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-action.component.ts
@@ -13,6 +13,9 @@ export class GridToolbarActionComponent implements OnInit {
     @Input() label: string;
     @Input() action: (rows: any[]) => any;
 
+    // When present, actions will be grouped by the provided label.
+    @Input() group: string;
+
     // Optional: add a function that returns true or false.
     // If true, this action will be disabled; if false
     // (default behavior), the action will be enabled.
@@ -31,6 +34,7 @@ export class GridToolbarActionComponent implements OnInit {
         const action = new GridToolbarAction();
         action.label = this.label;
         action.action = this.action;
+        action.group = this.group;
         action.disableOnRows = this.disableOnRows;
 
         this.grid.context.toolbarActions.push(action);

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 5eaa81f..b39149f 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
@@ -38,7 +38,16 @@
       <button class="dropdown-item" (click)="performAction(action)"
         *ngFor="let action of gridContext.toolbarActions"
         [disabled]="shouldDisableAction(action)">
-        <span class="ml-2">{{action.label}}</span>
+        <ng-container *ngIf="action.isGroup">
+          <span class="ml-2 font-weight-bold font-italic">{{action.label}}</span>
+        </ng-container>
+        <ng-container *ngIf="action.group && !action.isGroup">
+          <!-- grouped entries are indented -->
+          <span class="ml-4">{{action.label}}</span>
+        </ng-container>
+        <ng-container *ngIf="!action.group && !action.isGroup">
+          <span class="ml-2">{{action.label}}</span>
+        </ng-container>
       </button>
     </div>
   </div>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts
index 399a4c7..dc77cdb 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts
@@ -17,13 +17,54 @@ export class GridToolbarComponent implements OnInit {
     @Input() colWidthConfig: GridColumnWidthComponent;
     @Input() gridPrinter: GridPrintComponent;
 
+    renderedGroups: {[group: string]: boolean};
+
     csvExportInProgress: boolean;
     csvExportUrl: SafeUrl;
     csvExportFileName: string;
 
-    constructor(private sanitizer: DomSanitizer) {}
+    constructor(private sanitizer: DomSanitizer) {
+        this.renderedGroups = {};
+    }
+
+    ngOnInit() {
+        this.sortActions();
+    }
+
+    sortActions() {
+        const actions = this.gridContext.toolbarActions;
+
+        const unGrouped = actions.filter(a => !a.group)
+        .sort((a, b) => {
+            return a.label < b.label ? -1 : 1;
+        });
+
+        const grouped = actions.filter(a => Boolean(a.group))
+        .sort((a, b) => {
+            if (a.group === b.group) {
+                return a.label < b.label ? -1 : 1;
+            } else {
+                return a.group < b.group ? -1 : 1;
+            }
+        });
 
-    ngOnInit() {}
+        // Insert group markers for rendering
+        const seen: any = {};
+        const grouped2: any[] = [];
+        grouped.forEach(action => {
+            if (!seen[action.group]) {
+                seen[action.group] = true;
+                const act = new GridToolbarAction();
+                act.label = action.group;
+                act.isGroup = true;
+                grouped2.push(act);
+            }
+            grouped2.push(action);
+        });
+
+        this.gridContext.toolbarActions = unGrouped.concat(grouped2);
+        console.log(this.gridContext.toolbarActions);
+    }
 
     saveGridConfig() {
         // TODO: when server-side settings are supported, this operation

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 d2b120a..0e0439a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -890,6 +890,8 @@ export class GridContext {
 export class GridToolbarAction {
     label: string;
     action: (rows: any[]) => any;
+    group: string;
+    isGroup: boolean; // used for group placeholder entries
     disableOnRows: (rows: any[]) => boolean;
 }