From: Bill Erickson Date: Tue, 13 Apr 2021 17:05:18 +0000 (-0400) Subject: LP1923640 Manage visibility of grid action menu entries X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=6d45dcbfb2770a7e1722e6584b473c9c80aa9a10;p=evergreen%2Ftadl.git LP1923640 Manage visibility of grid action menu entries Adds a new Angular Grid configuration menu entry labeled "Manage Actions Menu", which launches a new dialog which allows staff to show/hide individual entries in the grid toolbar actions menu / context menu. The new menu action is disabled when a grid has no toolbar actions. Signed-off-by: Bill Erickson Signed-off-by: Erica Rohlfs Signed-off-by: Galen Charlton --- diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-editor.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-editor.component.html new file mode 100644 index 0000000000..984ef04096 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-editor.component.html @@ -0,0 +1,37 @@ + +
+

Grid Menu Configuration

+ +
+
+
+
Menu Item
+
Visible
+
+
+ +
{{action.label}}
+ + +
+ + +
+
{{action.label}}
+
+
+ ✓ + ✗ +
+ +
+
+
+ +
+ diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-editor.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-editor.component.ts new file mode 100644 index 0000000000..1808b61bc8 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-editor.component.ts @@ -0,0 +1,32 @@ +import {Component, Input, OnInit, Host} from '@angular/core'; +import {GridToolbarAction, GridContext} from '@eg/share/grid/grid'; +import {DialogComponent} from '@eg/share/dialog/dialog.component'; + +/** Allows users to show/hide toolbar action entries */ + +@Component({ + selector: 'eg-grid-toolbar-actions-editor', + templateUrl: 'grid-toolbar-actions-editor.component.html' +}) + +export class GridToolbarActionsEditorComponent extends DialogComponent { + + @Input() gridContext: GridContext; + + showHideClicked(action: GridToolbarAction) { + action.hidden = !action.hidden; + + if (!action.group) { return; } + + // When hiding the last entry in a group, hide the group as well. + + const group = this.gridContext.toolbarActions + .filter(entry => entry.isGroup && entry.label === action.group)[0]; + + const visibles = this.gridContext.toolbarActions + .filter(a => a.group === action.group && !a.hidden); + + group.hidden = visibles.length === 0; + } +} + diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.html index 224128d310..97db338210 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.html +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.html @@ -1,15 +1,17 @@ - + + 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 14607b7c5f..656ab99086 100644 --- 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 @@ -1,3 +1,5 @@ + +
@@ -114,6 +116,12 @@ compare_arrows Manage Column Widths + diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts index b738ac6302..0757fab28e 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts +++ b/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts @@ -15,6 +15,7 @@ import {GridColumnConfigComponent} from './grid-column-config.component'; import {GridColumnWidthComponent} from './grid-column-width.component'; import {GridPrintComponent} from './grid-print.component'; import {GridFilterControlComponent} from './grid-filter-control.component'; +import {GridToolbarActionsEditorComponent} from './grid-toolbar-actions-editor.component'; @NgModule({ @@ -33,7 +34,8 @@ import {GridFilterControlComponent} from './grid-filter-control.component'; GridColumnConfigComponent, GridColumnWidthComponent, GridPrintComponent, - GridFilterControlComponent + GridFilterControlComponent, + GridToolbarActionsEditorComponent ], imports: [ EgCommonModule, 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 447d9e68f9..51d4def48c 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts +++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts @@ -490,6 +490,7 @@ export class GridPersistConf { version: number; limit: number; columns: GridColumnPersistConf[]; + hideToolbarActions: string[]; } export class GridContext { @@ -588,6 +589,7 @@ export class GridContext { if (conf.limit && !this.disablePaging) { this.pager.limit = conf.limit; } + this.applyToolbarActionVisibility(conf.hideToolbarActions); } // This is called regardless of the presence of saved @@ -596,6 +598,29 @@ export class GridContext { }); } + applyToolbarActionVisibility(hidden: string[]) { + if (!hidden || hidden.length === 0) { return; } + + const groups = []; + this.toolbarActions.forEach(action => { + if (action.isGroup) { + groups.push(action); + } else if (!action.isSeparator) { + action.hidden = hidden.includes(action.label); + } + }); + + // If all actions in a group are hidden, hide the group as well. + // Note the group may be marked as hidden in the configuration, + // but the addition of new entries within a group should cause + // it to be visible again. + groups.forEach(group => { + const visible = this.toolbarActions + .filter(action => action.group === group.label && !action.hidden); + group.hidden = visible.length === 0; + }); + } + reload() { // Give the UI time to settle before reloading grid data. // This can help when data retrieval depends on a value @@ -1154,6 +1179,13 @@ export class GridContext { conf.limit = this.pager.limit; conf.columns = this.columnSet.compileSaveObject(); + // Avoid persisting group visibility since that may change + // with the addition of new columns. Always calculate that + // in real time. + conf.hideToolbarActions = this.toolbarActions + .filter(action => !action.isGroup && action.hidden) + .map(action => action.label); + return this.store.setItem('eg.grid.' + this.persistKey, conf); } @@ -1180,6 +1212,7 @@ export class GridToolbarAction { isGroup: boolean; // used for group placeholder entries isSeparator: boolean; disableOnRows: (rows: any[]) => boolean; + hidden?: boolean; } // Buttons are global actions