From 47fc78ce792b8993b5e1a91a1a8c2af2fcba2ea5 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Sun, 13 May 2018 12:58:55 -0400 Subject: [PATCH] LP#1775466 More grid Signed-off-by: Bill Erickson --- .../app/share/grid/grid-column-config.component.ts | 7 +- .../app/share/grid/grid-column-width.component.ts | 14 +- .../src/app/share/grid/grid-column.component.ts | 8 +- .../src/eg2/src/app/share/grid/grid-data-source.ts | 83 ------ .../src/app/share/grid/grid-header.component.html | 2 +- .../src/app/share/grid/grid-header.component.ts | 52 ++-- .../share/grid/grid-toolbar-action.component.ts | 9 +- .../share/grid/grid-toolbar-button.component.ts | 9 +- .../src/app/share/grid/grid-toolbar.component.html | 36 +-- .../src/app/share/grid/grid-toolbar.component.ts | 30 +-- .../src/eg2/src/app/share/grid/grid.component.html | 27 +- .../src/eg2/src/app/share/grid/grid.component.ts | 206 +++------------ Open-ILS/src/eg2/src/app/share/grid/grid.module.ts | 2 - .../app/share/grid/{grid.service.ts => grid.ts} | 284 +++++++++++++++++++-- .../src/eg2/src/app/share/util/format.service.ts | 14 +- Open-ILS/src/eg2/src/app/share/util/pager.ts | 5 + .../admin/server/config/billing_type.component.ts | 2 +- .../admin/server/config/hard_due_date.component.ts | 2 +- Open-ILS/src/eg2/src/app/staff/resolver.service.ts | 18 +- .../eg2/src/app/staff/sandbox/sandbox.component.ts | 2 +- 20 files changed, 423 insertions(+), 389 deletions(-) delete mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts rename Open-ILS/src/eg2/src/app/share/grid/{grid.service.ts => grid.ts} (50%) diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.ts index 80795b1b06..f1ce757e11 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.ts +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.ts @@ -1,6 +1,6 @@ -import {Component, Input, ViewChild, TemplateRef} from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import {EgDialogComponent} from '@eg/share/dialog/dialog.component'; -import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service'; +import {EgGridColumnSet} from './grid'; @Component({ selector: 'eg-grid-column-config', @@ -9,9 +9,8 @@ import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service'; /** */ -export class EgGridColumnConfigComponent extends EgDialogComponent { +export class EgGridColumnConfigComponent extends EgDialogComponent implements OnInit { @Input() columnSet: EgGridColumnSet; - } 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 index e16457fcad..e09c86a109 100644 --- 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 @@ -1,7 +1,6 @@ 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'; +import {EgGridContext, EgGridColumn, EgGridColumnSet, + EgGridDataSource} from './grid'; @Component({ selector: 'eg-grid-column-width', @@ -10,16 +9,15 @@ import {EgGridComponent} from './grid.component'; export class EgGridColumnWidthComponent implements OnInit { - @Input() columnSet: EgGridColumnSet; + @Input() gridContext: EgGridContext; + columnSet: EgGridColumnSet; isVisible: boolean; - constructor( - private gridSvc: EgGridService, - @Host() private grid: EgGridComponent - ) { } + constructor() {} ngOnInit() { this.isVisible = false; + this.columnSet = this.gridContext.columnSet; } expandColumn(col: EgGridColumn) { 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 1f2b49efb3..89b0c41d76 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 @@ -1,5 +1,5 @@ import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core'; -import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service'; +import {EgGridColumn, EgGridColumnSet} from './grid'; import {EgGridComponent} from './grid.component'; @Component({ @@ -24,9 +24,7 @@ export class EgGridColumnComponent implements OnInit { @Input() cellTemplate: TemplateRef; // get a reference to our container grid. - constructor( - private gridSvc: EgGridService, - @Host() private grid: EgGridComponent) {} + constructor(@Host() private grid: EgGridComponent) {} ngOnInit() { @@ -45,7 +43,7 @@ export class EgGridColumnComponent implements OnInit { col.cellTemplate = this.cellTemplate; col.isSortable = this.sortable; col.isMultiSortable = this.multiSortable; - this.grid.columnSet.add(col); + this.grid.context.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 deleted file mode 100644 index 235548397f..0000000000 --- a/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts +++ /dev/null @@ -1,83 +0,0 @@ -import {EventEmitter} from '@angular/core'; -import {Observable} from 'rxjs/Rx'; -import {Pager} from '@eg/share/util/pager'; - -export class EgGridDataSource { - - data: any[]; - sort: any[]; - pager: Pager; - allRowsRetrieved: boolean; - getRows: (pager: Pager, sort: any[]) => Observable; - - constructor() { - this.sort = []; - this.reset(); - } - - reset() { - this.data = []; - this.allRowsRetrieved = false; - if (this.pager) this.pager.resultCount = null; - } - - setAllRetrieved() { - this.allRowsRetrieved = true; - this.pager.resultCount = this.data.length; - } - - // called from the template -- no data fetching - getPageOfRows(pager: Pager): any[] { - if (this.data) { - return this.data.slice( - pager.offset, pager.limit + pager.offset); - } - return []; - } - - // called on initial component load and user action (e.g. paging, sorting). - requestPage(pager: Pager): Promise { - - 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(); - } - - 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. - checkAllRetrieved(pager: Pager, idx: number) { - if (this.allRowsRetrieved) return; - - if (idx == 0 || idx < (pager.limit + pager.offset)) { - // last query returned nothing or less than one page. - // confirm we have all of the preceding pages. - if (!this.data.includes(undefined)) { - this.allRowsRetrieved = true; - pager.resultCount = this.data.length; - } - } - } -} - - diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html index 18623f0e51..827c98581c 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html @@ -6,7 +6,7 @@
#
-
c.isDragTarget = false); + this.gridContext.columnSet.insertBefore(this.dragColumn, col); + this.gridContext.columnSet.columns.forEach(c => c.isDragTarget = false); } sortOneColumn(col: EgGridColumn) { let dir = 'ASC'; - let sort = this.dataSource.sort; + let sort = this.gridContext.dataSource.sort; if (sort.length && sort[0].name == col.name && sort[0].dir == 'ASC') { dir = 'DESC'; } - this.dataSource.sort = [{name: col.name, dir: dir}]; - this.grid.reload(); + this.gridContext.dataSource.sort = [{name: col.name, dir: dir}]; + this.gridContext.reload(); } // Returns true if the provided column is sorting in the // specified direction. isColumnSorting(col: EgGridColumn, dir: string): boolean { - let sort = this.dataSource.sort.filter(c => c.name == col.name)[0]; + let sort = this.gridContext.dataSource.sort.filter(c => c.name == col.name)[0]; return sort && sort.dir == dir; } handleBatchSelect($event) { if ($event.target.checked) { - if (this.rowSelector.isEmpty() || !this.allRowsAreSelected()) { + if (this.gridContext.rowSelector.isEmpty() || !this.allRowsAreSelected()) { // clear selections from other pages to avoid confusion. - this.rowSelector.clear(); + this.gridContext.rowSelector.clear(); this.selectAll(); } } else { - this.rowSelector.clear(); + this.gridContext.rowSelector.clear(); } } selectAll() { - let rows = this.dataSource.getPageOfRows(this.pager); - let indexes = rows.map(r => this.grid.getRowIndex(r)); - this.rowSelector.select(indexes); + let rows = this.gridContext.dataSource.getPageOfRows(this.gridContext.pager); + let indexes = rows.map(r => this.gridContext.getRowIndex(r)); + this.gridContext.rowSelector.select(indexes); } allRowsAreSelected(): boolean { - let rows = this.dataSource.getPageOfRows(this.pager); - let indexes = rows.map(r => this.grid.getRowIndex(r)); - return this.rowSelector.contains(indexes); + let rows = this.gridContext.dataSource.getPageOfRows(this.gridContext.pager); + let indexes = rows.map(r => this.gridContext.getRowIndex(r)); + return this.gridContext.rowSelector.contains(indexes); } } 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 c73337afd6..eb8abc28a7 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 @@ -1,5 +1,5 @@ import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core'; -import {EgGridService, EgGridToolbarAction} from './grid.service'; +import {EgGridToolbarAction} from './grid'; import {EgGridComponent} from './grid.component'; @Component({ @@ -14,10 +14,7 @@ export class EgGridToolbarActionComponent implements OnInit { @Input() action: (rows: any[]) => any; // get a reference to our container grid. - constructor( - private gridSvc: EgGridService, - @Host() private grid: EgGridComponent) { - } + constructor(@Host() private grid: EgGridComponent) {} ngOnInit() { @@ -30,7 +27,7 @@ export class EgGridToolbarActionComponent implements OnInit { action.label = this.label; action.action = this.action; - this.grid.toolbarActions.push(action); + this.grid.context.toolbarActions.push(action); } } diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts index c353fc9154..1f5f9d1920 100644 --- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts @@ -1,5 +1,5 @@ import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core'; -import {EgGridService, EgGridToolbarButton} from './grid.service'; +import {EgGridToolbarButton} from './grid'; import {EgGridComponent} from './grid.component'; @Component({ @@ -14,10 +14,7 @@ export class EgGridToolbarButtonComponent implements OnInit { @Input() action: () => any; // get a reference to our container grid. - constructor( - private gridSvc: EgGridService, - @Host() private grid: EgGridComponent) { - } + constructor(@Host() private grid: EgGridComponent) {} ngOnInit() { @@ -30,7 +27,7 @@ export class EgGridToolbarButtonComponent implements OnInit { btn.label = this.label; btn.action = this.action; - this.grid.toolbarButtons.push(btn); + this.grid.context.toolbarButtons.push(btn); } } 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 316c0954ac..60499a9a5b 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,9 +1,10 @@
-
+
-
@@ -13,14 +14,14 @@
-
+ *ngFor="let action of gridContext.toolbarActions"> {{action.label}}
@@ -28,30 +29,30 @@
- - - -
- +