From 94d1f041d834f3ef5bd63b8195e8b263edd25991 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 9 May 2019 11:50:19 -0400
Subject: [PATCH] LP1803787 Grid toolbar actions menu component; cleanup
Moves the guts of the grid toolbar actions menu (the buttons) to a
dedicated component that can be shared by both the actions drop-down
menu and the actions popover. This adds support for honoring
disableOnRow for the popover actions. And avoids duplication.
Adds a sandbox example of using the toolbar action click event and
divider.
Some minor code cleanup/consistency changes.
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---
.../src/app/share/grid/grid-body.component.html | 12 ++-------
.../eg2/src/app/share/grid/grid-body.component.ts | 8 +-----
.../share/grid/grid-toolbar-action.component.ts | 3 ++-
.../grid/grid-toolbar-actions-menu.component.html | 15 +++++++++++
.../grid/grid-toolbar-actions-menu.component.ts | 31 ++++++++++++++++++++++
.../src/app/share/grid/grid-toolbar.component.html | 18 +++----------
.../src/app/share/grid/grid-toolbar.component.ts | 16 -----------
Open-ILS/src/eg2/src/app/share/grid/grid.module.ts | 2 ++
Open-ILS/src/eg2/src/app/share/grid/grid.ts | 3 ++-
.../src/app/staff/sandbox/sandbox.component.html | 5 ++++
.../eg2/src/app/staff/sandbox/sandbox.component.ts | 5 ++++
11 files changed, 68 insertions(+), 50 deletions(-)
create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.html
create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.ts
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
index 616b6d20e0..b83c619044 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -1,15 +1,7 @@
<!-- uses dropdown menu CSS for easy stying, but it's not a dropdown -->
<ng-template #contextMenu let-gridContext="gridContext">
- <ng-container *ngFor="let action of gridContext.toolbarActions">
- <ng-container *ngIf="action.separator">
- <div class="dropdown-divider"></div>
- </ng-container>
- <ng-container *ngIf="!action.separator">
- <a class="dropdown-item" (click)="performAction(action)">
- <span class="ml-2">{{action.label}}</span>
- </a>
- </ng-container>
- </ng-container>
+ <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
+ </eg-grid-toolbar-actions-menu>
</ng-template>
<!--
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
index 6a95b35d3d..3869ea4000 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
@@ -91,9 +91,7 @@ export class GridBodyComponent implements OnInit {
if (this.context.disableMultiSelect) {
this.context.selectOneRow(index);
} else if ($event.ctrlKey || $event.metaKey /* mac command */) {
- if (this.context.toggleSelectOneRow(index)) {
- this.context.lastSelectedIndex = index;
- }
+ this.context.toggleSelectOneRow(index);
} else if ($event.shiftKey) {
// TODO shift range click
@@ -112,10 +110,6 @@ export class GridBodyComponent implements OnInit {
this.grid.onRowActivate.emit(row);
}
- performAction(action: GridToolbarAction) {
- action.action(this.context.getSelectedRows());
- }
-
// Apply row selection, track the new menu if needed,
// manually close any existing open menus, open selected menu.
onRowContextClick($event, row: any, contextMenu: NgbPopover) {
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 7901035139..6982525527 100644
--- 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
@@ -36,7 +36,7 @@ export class GridToolbarActionComponent implements OnInit {
@Input() disableOnRows: (rows: any[]) => boolean;
// If true, render a separator bar only, no action link.
- @Input() separator: boolean;
+ @Input() isSeparator: boolean;
// get a reference to our container grid.
constructor(@Host() private grid: GridComponent) {
@@ -60,6 +60,7 @@ export class GridToolbarActionComponent implements OnInit {
this.toolbarAction.group = this.group;
this.toolbarAction.action = this.action;
this.toolbarAction.disabled = this.disabled;
+ this.toolbarAction.isSeparator = this.isSeparator;
this.toolbarAction.disableOnRows = this.disableOnRows;
this.grid.context.toolbarActions.push(this.toolbarAction);
}
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
new file mode 100644
index 0000000000..cdb6dc4fec
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.html
@@ -0,0 +1,15 @@
+<button class="dropdown-item scrollable-menu"
+ [disabled]="shouldDisable(action)"
+ (click)="performAction(action)"
+ *ngFor="let action of gridContext.toolbarActions">
+ <ng-container *ngIf="action.isGroup">
+ <span class="font-weight-bold font-italic">{{action.label}}</span>
+ </ng-container>
+ <ng-container *ngIf="action.isSeparator">
+ <div class="dropdown-divider"></div>
+ </ng-container>
+ <ng-container *ngIf="!action.isGroup && !action.isSeparator">
+ <!-- grouped entries are left paddded for group indentation -->
+ <span [ngClass]="{'ml-2': action.group}">{{action.label}}</span>
+ </ng-container>
+</button>
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.ts
new file mode 100644
index 0000000000..2d8cffd151
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-actions-menu.component.ts
@@ -0,0 +1,31 @@
+import {Component, Input, OnInit, Host} from '@angular/core';
+import {GridToolbarAction, GridContext} from '@eg/share/grid/grid';
+
+/** Models a list of toolbar action menu entries */
+
+@Component({
+ selector: 'eg-grid-toolbar-actions-menu',
+ templateUrl: 'grid-toolbar-actions-menu.component.html'
+})
+
+export class GridToolbarActionsMenuComponent {
+
+ @Input() gridContext: GridContext;
+
+ performAction(action: GridToolbarAction) {
+ if (action.isGroup || action.isSeparator) {
+ return; // These don't perform actions
+ }
+ const rows = this.gridContext.getSelectedRows();
+ action.onClick.emit(rows);
+ if (action.action) { action.action(rows); }
+ }
+
+ shouldDisable(action: GridToolbarAction): boolean {
+ if (action.disableOnRows) {
+ return action.disableOnRows(this.gridContext.getSelectedRows());
+ }
+ return false;
+ }
+}
+
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 036597db97..6be92080a3 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
@@ -38,21 +38,9 @@
<span title="Actions For Selected Rows" i18n-title
class="material-icons mat-icon-in-button">playlist_add_check</span>
</button>
- <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
- <button class="dropdown-item" (click)="performAction(action)"
- *ngFor="let action of gridContext.toolbarActions"
- [disabled]="shouldDisableAction(action)">
- <ng-container *ngIf="action.isGroup">
- <span class="ml-2 font-weight-bold font-italic">{{action.label}}</span>
- </ng-container>
- <ng-container *ngIf="action.separator">
- <div class="dropdown-divider"></div>
- </ng-container>
- <ng-container
- *ngIf="!action.group && !action.isGroup && !action.separator">
- <span class="ml-2">{{action.label}}</span>
- </ng-container>
- </button>
+ <div class="dropdown-menu" ngbDropdownMenu>
+ <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
+ </eg-grid-toolbar-actions-menu>
</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 a05aaa5ea2..308fdd012a 100644
--- 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
@@ -77,28 +77,12 @@ export class GridToolbarComponent implements OnInit {
);
}
- performAction(action: GridToolbarAction) {
- if (action.isGroup || action.separator) {
- return; // These don't perform actions
- }
- const rows = this.gridContext.getSelectedRows();
- action.onClick.emit(rows);
- if (action.action) { action.action(rows); }
- }
-
performButtonAction(button: GridToolbarButton) {
const rows = this.gridContext.getSelectedRows();
button.onClick.emit();
if (button.action) { button.action(); }
}
- shouldDisableAction(action: GridToolbarAction) {
- if (action.disableOnRows) {
- return action.disableOnRows(this.gridContext.getSelectedRows());
- }
- return false;
- }
-
printHtml() {
this.gridPrinter.printGrid();
}
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 0773a7e56f..454dcfb0ed 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
@@ -9,6 +9,7 @@ import {GridToolbarComponent} from './grid-toolbar.component';
import {GridToolbarButtonComponent} from './grid-toolbar-button.component';
import {GridToolbarCheckboxComponent} from './grid-toolbar-checkbox.component';
import {GridToolbarActionComponent} from './grid-toolbar-action.component';
+import {GridToolbarActionsMenuComponent} from './grid-toolbar-actions-menu.component';
import {GridColumnConfigComponent} from './grid-column-config.component';
import {GridColumnWidthComponent} from './grid-column-width.component';
import {GridPrintComponent} from './grid-print.component';
@@ -26,6 +27,7 @@ import {GridPrintComponent} from './grid-print.component';
GridToolbarButtonComponent,
GridToolbarCheckboxComponent,
GridToolbarActionComponent,
+ GridToolbarActionsMenuComponent,
GridColumnConfigComponent,
GridColumnWidthComponent,
GridPrintComponent
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 cfed24e7a0..ae681694d8 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -770,6 +770,7 @@ export class GridContext {
}
this.rowSelector.select(index);
+ this.lastSelectedIndex = index;
return true;
}
@@ -1035,7 +1036,7 @@ export class GridToolbarAction {
group: string;
disabled: boolean;
isGroup: boolean; // used for group placeholder entries
- separator: boolean;
+ isSeparator: boolean;
disableOnRows: (rows: any[]) => boolean;
}
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index 7406c1f29c..720fa0f307 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -155,6 +155,11 @@
<eg-grid-toolbar-action label="Action that needs a single row" i18n-label
[action]="complimentEvergreen" [disableOnRows]="notOneSelectedRow">
</eg-grid-toolbar-action>
+ <eg-grid-toolbar-action [isSeparator]="true">
+ </eg-grid-toolbar-action>
+ <eg-grid-toolbar-action label="Another Action" i18n-label
+ (actionClick)="complimentEvergreen2($event)">
+ </eg-grid-toolbar-action>
<eg-grid-column name="test" [cellTemplate]="cellTmpl"
[cellContext]="btGridTestContext" [sortable]="false">
</eg-grid-column>
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 4dd88921a0..6d4e2eaafc 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -152,6 +152,11 @@ export class SandboxComponent implements OnInit {
this.sbChannel.postMessage({msg : $event.target.value});
}
+ // Example of click handler for row action
+ complimentEvergreen2(rows: IdlObject[]) {
+ alert('I know, right?');
+ }
+
openEditor() {
this.fmRecordEditor.open({size: 'lg'}).then(
ok => { console.debug(ok); },
--
2.11.0