From 6c88462a2f525bf3148c1f5b8a144687d6abe84a Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Thu, 10 May 2018 18:20:17 -0400 Subject: [PATCH] LP#1775466 Grid selection; width configs Signed-off-by: Bill Erickson --- .../share/grid/grid-column-width.component.html | 20 +++ .../app/share/grid/grid-column-width.component.ts | 34 ++++++ .../src/app/share/grid/grid-column.component.ts | 7 +- .../src/eg2/src/app/share/grid/grid-data-source.ts | 38 ++++-- .../share/grid/grid-toolbar-action.component.ts | 36 ++++++ .../src/app/share/grid/grid-toolbar.component.html | 18 ++- .../src/app/share/grid/grid-toolbar.component.ts | 16 ++- .../src/eg2/src/app/share/grid/grid.component.css | 6 + .../src/eg2/src/app/share/grid/grid.component.html | 8 +- .../src/eg2/src/app/share/grid/grid.component.ts | 136 +++++++++++++++++++-- Open-ILS/src/eg2/src/app/share/grid/grid.module.ts | 6 +- .../src/eg2/src/app/share/grid/grid.service.ts | 22 ++-- .../server/config/billing_type.component.html | 2 + .../admin/server/config/billing_type.component.ts | 6 + 14 files changed, 313 insertions(+), 42 deletions(-) create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-action.component.ts diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html new file mode 100644 index 0000000000..ca24c00afd --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html @@ -0,0 +1,20 @@ +
+
+
Expand
+
+ + call_made + +
+
+
+
Shrink
+
+ + call_received + +
+
+
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts new file mode 100644 index 0000000000..e16457fcad --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts @@ -0,0 +1,34 @@ +import {Component, Input, OnInit, Host} from '@angular/core'; +import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service'; +import {EgGridDataSource} from './grid-data-source'; +import {EgGridComponent} from './grid.component'; + +@Component({ + selector: 'eg-grid-column-width', + templateUrl: './grid-column-width.component.html' +}) + +export class EgGridColumnWidthComponent implements OnInit { + + @Input() columnSet: EgGridColumnSet; + isVisible: boolean; + + constructor( + private gridSvc: EgGridService, + @Host() private grid: EgGridComponent + ) { } + + ngOnInit() { + this.isVisible = false; + } + + expandColumn(col: EgGridColumn) { + col.flex++; + } + + shrinkColumn(col: EgGridColumn) { + if (col.flex > 1) col.flex--; + } + +} + diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts index 913c6def2a..a89c46ef93 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts @@ -14,9 +14,10 @@ export class EgGridColumnComponent implements OnInit { @Input() path: string; @Input() label: string; @Input() flex: number; + // is this the index field? + @Input() index: boolean; @Input() visible: boolean; @Input() hidden: boolean; - @Input() pkey: boolean; @Input() sortable: boolean; @Input() multiSortable: boolean; @Input() cellTemplate: TemplateRef; @@ -38,9 +39,9 @@ export class EgGridColumnComponent implements OnInit { col.path = this.path; col.label = this.label; col.flex = this.flex; - col.hidden = this.hidden; + col.hidden = this.hidden === true; + col.isIndex = this.index === true; col.cellTemplate = this.cellTemplate; - col.isPkey = this.pkey; col.isSortable = this.sortable; col.isMultiSortable = this.multiSortable; this.grid.columnSet.add(col); diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts index f75a5f2c96..235548397f 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts @@ -36,21 +36,33 @@ export class EgGridDataSource { } // called on initial component load and user action (e.g. paging, sorting). - requestPage(pager: Pager) { + requestPage(pager: Pager): Promise { - // see if the page of data is already present in the data - if (this.getPageOfRows(pager).length > 0) return; - - if (this.allRowsRetrieved) return; - - if (!this.getRows) return; + if ( + // already have the current page + this.getPageOfRows(pager).length > 0 + // already have all data + || this.allRowsRetrieved + // have no way to get more data. + || !this.getRows + ) { + return Promise.resolve(); + } - let idx = pager.offset; - this.getRows(pager, this.sort).subscribe( - row => this.data[idx++] = row, - err => console.error(`grid getRows() error ${err}`), - () => this.checkAllRetrieved(pager, idx) - ); + return new Promise((resolve, reject) => { + let idx = pager.offset; + return this.getRows(pager, this.sort).subscribe( + row => this.data[idx++] = row, + err => { + console.error(`grid getRows() error ${err}`); + reject(err); + }, + () => { + this.checkAllRetrieved(pager, idx); + resolve(); + } + ); + }); } // See if the last getRows() call resulted in the final set of data. 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 new file mode 100644 index 0000000000..c73337afd6 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-action.component.ts @@ -0,0 +1,36 @@ +import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core'; +import {EgGridService, EgGridToolbarAction} from './grid.service'; +import {EgGridComponent} from './grid.component'; + +@Component({ + selector: 'eg-grid-toolbar-action', + template: '' +}) + +export class EgGridToolbarActionComponent implements OnInit { + + // Note most input fields should match class fields for EgGridColumn + @Input() label: string; + @Input() action: (rows: any[]) => any; + + // get a reference to our container grid. + constructor( + private gridSvc: EgGridService, + @Host() private grid: EgGridComponent) { + } + + ngOnInit() { + + if (!this.grid) { + console.warn('EgGridToolbarActionComponent needs a [grid]'); + return; + } + + let action = new EgGridToolbarAction(); + action.label = this.label; + action.action = this.action; + + this.grid.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 e8aba76c60..e950e253bf 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 @@ -12,7 +12,21 @@
-
+
+ +
+ + {{action.label}} + +
+
+ +
console.error(`Error saving columns: ${err}`) ); } + + performAction(action: EgGridToolbarAction) { + action.action(this.grid.getSelectedRows()); + } } diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css index 144a3faf39..fa12b5080c 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css +++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css @@ -17,6 +17,12 @@ .eg-grid-body-row { } +.eg-grid-body-row.selected { + color: #000; + background-color: rgb(201, 221, 225); + border-bottom: 1px solid #888; +} + .eg-grid-header-cell { font-weight: bold; } diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html index ca94f76eec..8d5e85366e 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html +++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html @@ -2,24 +2,26 @@
- +
{{pager.rowNumber(idx)}}
{{getDisplayValue(row, col)}}
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts index 3a60a54606..ec38ecff7e 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts +++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts @@ -1,10 +1,11 @@ -import {Component, Input, OnInit, EventEmitter, ViewEncapsulation} from '@angular/core'; +import {Component, Input, OnInit, AfterViewInit, EventEmitter, + HostListener, ViewEncapsulation} from '@angular/core'; import {EgGridDataSource} from './grid-data-source'; import {EgIdlService} from '@eg/core/idl.service'; import {EgOrgService} from '@eg/core/org.service'; import {Pager} from '@eg/share/util/pager'; -import {EgGridService, EgGridColumn, EgGridColumnSet, EgGridToolbarButton} - from '@eg/share/grid/grid.service'; +import {EgGridService, EgGridColumn, EgGridColumnSet, EgGridToolbarButton, + EgGridToolbarAction} from '@eg/share/grid/grid.service'; @Component({ selector: 'eg-grid', @@ -14,41 +15,60 @@ import {EgGridService, EgGridColumn, EgGridColumnSet, EgGridToolbarButton} encapsulation: ViewEncapsulation.None }) -export class EgGridComponent implements OnInit { +export class EgGridComponent implements OnInit, AfterViewInit { @Input() dataSource: EgGridDataSource; @Input() idlClass: string; @Input() isSortable: boolean; @Input() isMultiSortable: boolean; @Input() persistKey: string; + @Input() disableMultiSelect: boolean; pager: Pager; columnSet: EgGridColumnSet; selector: {[idx:number] : boolean}; onRowDblClick$: EventEmitter; + onRowClick$: EventEmitter; toolbarButtons: EgGridToolbarButton[]; + toolbarActions: EgGridToolbarAction[]; + lastSelectedIndex: any; constructor(private gridSvc: EgGridService) { this.pager = new Pager(); this.selector = {}; this.pager.limit = 10; // TODO config this.onRowDblClick$ = new EventEmitter(); + this.onRowClick$ = new EventEmitter(); this.toolbarButtons = []; + this.toolbarActions = []; } ngOnInit() { this.columnSet = new EgGridColumnSet(this.idlClass); - this.columnSet.isSortable = this.isSortable; - this.columnSet.isMultiSortable = this.isMultiSortable; + this.columnSet.isSortable = this.isSortable === true; + this.columnSet.isMultiSortable = this.isMultiSortable === true; this.gridSvc.generateColumns(this.columnSet); + } + + // Apply column configuation and fetch data after our child + // components have told us what columns we have available. + ngAfterViewInit() { this.gridSvc.getColumnsConfig(this.persistKey) .then(conf => this.columnSet.applyColumnSettings(conf)) .then(ok => this.dataSource.requestPage(this.pager)) } + @HostListener('window:keydown', ['$event']) onKeyDown(evt: KeyboardEvent) { + if (evt.key == 'ArrowUp') { + this.selectPreviousRow(); + } else if (evt.key == 'ArrowDown') { + this.selectNextRow(); + } + } + reload() { this.pager.offset = 0; - this.dataSource.data = []; + this.dataSource.reset(); this.dataSource.requestPage(this.pager); } @@ -56,10 +76,112 @@ export class EgGridComponent implements OnInit { return this.gridSvc.getRowColumnValue(row, col); } + // Returns the index (AKA pkey) value for the row + getRowIndex(row: any): any { + return this.gridSvc.getRowIndex(row, this.columnSet); + } + + // Returns the array position of the row-by-index in the + // dataSource array. + getRowPosition(index: any): number { + // for-loop for early exit + for (let idx = 0; idx < this.dataSource.data.length; idx++) { + if (index == this.getRowIndex(this.dataSource.data[idx])) + return idx; + } + } + + // Returns all selected rows, regardless of whether they are + // currently visible in the grid display. + getSelectedRows(): any[] { + let selected = []; + Object.keys(this.selector).forEach(index => { + let row = this.dataSource.data.filter( + r => this.getRowIndex(r) == index)[0]; + if (row) selected.push(row); + }); + return selected; + } + onRowDblClick(row: any) { this.onRowDblClick$.emit(row); } + onRowClick($event: any, row: any, idx: number) { + let index = this.getRowIndex(row); + + if (this.disableMultiSelect) { + this.selectOneRow(index); + } else if ($event.ctrlKey || $event.metaKey /* mac command */) { + if (this.toggleSelectOneRow(index)) + this.lastSelectedIndex = index; + + } else if ($event.shiftKey) { + // TODO shift range click + + } else { + this.selectOneRow(index); + } + + this.onRowClick$.emit(row); + } + + selectOneRow(index: any) { + this.selector = {}; + this.selector[index] = true; + this.lastSelectedIndex = index; + } + + // selects or deselects an item, without affecting the others. + // returns true if the item is selected; false if de-selected. + toggleSelectOneRow(index: any) { + if (this.selector[index]) { + delete this.selector[index]; + return false; + } + + this.selector[index] = true; + return true; + } + + + + selectPreviousRow() { + if (!this.lastSelectedIndex) return; + let pos = this.getRowPosition(this.lastSelectedIndex); + if (pos == 0) return; + if (pos == this.pager.offset) { + // Request the previous page of data + this.pager.decrement(); + this.dataSource.requestPage(this.pager) + .then(ok => { + let row = this.dataSource.data[pos - 1]; + if (row) this.selectOneRow(this.getRowIndex(row)); + }); + } else { + let row = this.dataSource.data[pos - 1]; + this.selectOneRow(this.getRowIndex(row)); + } + } + + selectNextRow() { + if (!this.lastSelectedIndex) return; + let pos = this.getRowPosition(this.lastSelectedIndex); + + if (pos == (this.pager.offset + this.pager.limit - 1)) { + // Request the next page of data + this.pager.increment(); + this.dataSource.requestPage(this.pager) + .then(ok => { + let row = this.dataSource.data[pos + 1]; + if (row) this.selectOneRow(this.getRowIndex(row)); + }); + } else { + let row = this.dataSource.data[pos + 1]; + if (row) this.selectOneRow(this.getRowIndex(row)); + } + } + } 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 62981aef4b..6d36c24dcc 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 @@ -1,12 +1,12 @@ import {NgModule} from '@angular/core'; import {EgCommonModule} from '@eg/common.module'; -//import {EgDialogComponent} from '@eg/share/dialog/dialog.component'; import {EgGridComponent} from './grid.component'; import {EgGridColumnComponent} from './grid-column.component'; import {EgGridHeaderComponent} from './grid-header.component'; import {EgGridToolbarComponent} from './grid-toolbar.component'; import {EgGridService} from './grid.service'; import {EgGridToolbarButtonComponent} from './grid-toolbar-button.component'; +import {EgGridToolbarActionComponent} from './grid-toolbar-action.component'; import {EgGridColumnConfigComponent} from './grid-column-config.component'; import {EgGridColumnWidthComponent} from './grid-column-width.component'; @@ -19,6 +19,7 @@ import {EgGridColumnWidthComponent} from './grid-column-width.component'; EgGridHeaderComponent, EgGridToolbarComponent, EgGridToolbarButtonComponent, + EgGridToolbarActionComponent, EgGridColumnConfigComponent, EgGridColumnWidthComponent ], @@ -29,7 +30,8 @@ import {EgGridColumnWidthComponent} from './grid-column-width.component'; // public components EgGridComponent, EgGridColumnComponent, - EgGridToolbarButtonComponent + EgGridToolbarButtonComponent, + EgGridToolbarActionComponent ], providers: [ EgGridService diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts index 97ec42604e..14914545cf 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts +++ b/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts @@ -16,9 +16,9 @@ export class EgGridService { ) { } - getRowPkey(row: any, columnSet: EgGridColumnSet): any { - let col = columnSet.pkeyColumn; - if (!col) throw new Error('grid pkey column required'); + getRowIndex(row: any, columnSet: EgGridColumnSet): any { + let col = columnSet.indexColumn; + if (!col) throw new Error('grid index column required'); return this.getRowColumnValue(row, col); } @@ -61,7 +61,7 @@ export class EgGridService { col.label = field.label || field.name; col.idlFieldDef = field; if (field.name == this.idl.classes[columnSet.idlClass].pkey) - col.isPkey = true; + col.isIndex = true; columnSet.add(col); }); } @@ -100,7 +100,7 @@ export class EgGridColumn { idlClass: string; idlFieldDef: any; cellTemplate: TemplateRef; - isPkey: boolean; + isIndex: boolean; isDragTarget: boolean; isSortable: boolean; isMultiSortable: boolean; @@ -116,7 +116,7 @@ export class EgGridColumnPersistConf { export class EgGridColumnSet { columns: EgGridColumn[]; idlClass: string; - pkeyColumn: EgGridColumn; + indexColumn: EgGridColumn; isSortable: boolean; isMultiSortable: boolean; stockVisible: string[]; @@ -131,7 +131,7 @@ export class EgGridColumnSet { // avoid dupes if (this.getColByName(col.name)) return; - if (col.isPkey) this.pkeyColumn = col; + if (col.isIndex) this.indexColumn = col; if (!col.flex) col.flex = 2; if (!col.label) col.label = col.name; if (!col.align) col.align = 'left'; @@ -273,9 +273,15 @@ export class EgGridColumnSet { } } +// Actions apply to specific rows +export class EgGridToolbarAction { + label: string; + action: (rows: any[]) => any; +} + +// Buttons are global actions export class EgGridToolbarButton { label: string; action: () => any; } - diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html b/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html index af6bdb15fa..2a50066757 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html @@ -5,6 +5,8 @@ [isSortable]="true" persistKey="admin.server.config.billing_type"> + + diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.ts index dc28098dac..6f61aff9d4 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.ts @@ -19,6 +19,7 @@ export class BillingTypeComponent implements OnInit { @ViewChild('successString') successString: EgStringComponent; @ViewChild('createString') createString: EgStringComponent; createBillingType: () => any; + //deleteSelectedBillingTypes: (bts: any[]) => any; constructor( private pcrud: EgPcrudService, @@ -39,6 +40,11 @@ export class BillingTypeComponent implements OnInit { } } + deleteSelected(billingTypes) { + console.log('deleting...'); + console.log(billingTypes); + } + ngOnInit() { this.dataSource.getRows = (pager: Pager, sort: any[]) => { -- 2.11.0