From 9ebda375e60362dfc41fa4277ec2d60a31f5e396 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Thu, 10 May 2018 15:22:48 -0400 Subject: [PATCH] LP#1626157 Grid column persistence Signed-off-by: Bill Erickson --- .../src/app/share/grid/grid-toolbar.component.html | 11 +++- .../src/eg2/src/app/share/grid/grid.component.ts | 4 +- .../src/eg2/src/app/share/grid/grid.service.ts | 70 ++++++++++++++++++++-- 3 files changed, 77 insertions(+), 8 deletions(-) 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 36206d7366..e8aba76c60 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 @@ -39,17 +39,22 @@ build - Manage Columns + Manage Columns compare_arrows - Manage Column Widths + Manage Column Widths save - Save Columns + Save Columns + + + restore + Reset Columns
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 35495d277c..3a60a54606 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 @@ -41,7 +41,9 @@ export class EgGridComponent implements OnInit { this.columnSet.isSortable = this.isSortable; this.columnSet.isMultiSortable = this.isMultiSortable; this.gridSvc.generateColumns(this.columnSet); - this.dataSource.requestPage(this.pager); + this.gridSvc.getColumnsConfig(this.persistKey) + .then(conf => this.columnSet.applyColumnSettings(conf)) + .then(ok => this.dataSource.requestPage(this.pager)) } reload() { 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 2b57f67d30..97ec42604e 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 @@ -73,11 +73,18 @@ export class EgGridService { saveColumns(columnSet: EgGridColumnSet, persistKey: string): Promise { if (!persistKey) throw new Error('Grid persistKey required to save columns'); - let compiled = columnSet.compileSaveObject(); + let compiled: EgGridColumnPersistConf[] = columnSet.compileSaveObject(); return this.store.setItem('eg.grid.' + persistKey, compiled); } + // TODO: saveColumnsAsOrgSetting(...) + + getColumnsConfig(persistKey: string): Promise { + if (!persistKey) return Promise.resolve([]); + return this.store.getItem('eg.grid.' + persistKey); + } + } @@ -99,6 +106,12 @@ export class EgGridColumn { isMultiSortable: boolean; } +export class EgGridColumnPersistConf { + name: string; + flex?: number; + sort?: number; + align?: string; +} export class EgGridColumnSet { columns: EgGridColumn[]; @@ -106,15 +119,17 @@ export class EgGridColumnSet { pkeyColumn: EgGridColumn; isSortable: boolean; isMultiSortable: boolean; + stockVisible: string[]; constructor(idlClass?: string) { this.columns = []; + this.stockVisible = []; this.idlClass = idlClass; } add(col: EgGridColumn) { // avoid dupes - if (this.columns.filter(c => c.name == col.name).length) return; + if (this.getColByName(col.name)) return; if (col.isPkey) this.pkeyColumn = col; if (!col.flex) col.flex = 2; @@ -123,11 +138,27 @@ export class EgGridColumnSet { col.visible = !col.hidden; + // track which fields are visible on page load. + if (col.visible) this.stockVisible.push(col.name); + this.applyColumnSortability(col); this.columns.push(col); } + getColByName(name: string): EgGridColumn { + return this.columns.filter(c => c.name == name)[0]; + } + + reset() { + this.columns.forEach(col => { + col.flex = 2; + col.sort = 0; + col.align = 'left'; + col.visible = this.stockVisible.includes(col.name); + }); + } + applyColumnSortability(col: EgGridColumn) { // column sortability defaults to the sortability of the column set. if (col.isSortable === undefined && this.isSortable) @@ -195,13 +226,13 @@ export class EgGridColumnSet { this.columns.splice(targetIdx, 0, col); } - compileSaveObject() { + compileSaveObject(): EgGridColumnPersistConf[] { // only store information about visible columns. let conf = this.displayColumns(); // scrunch the data down to just the needed info return conf.map(col => { - let c: any = {name : col.name} + let c: EgGridColumnPersistConf = {name : col.name}; if (col.align != 'left') c.align = col.align; if (col.flex != 2) c.flex = col.flex; if (Number(col.sort)) c.sort = Number(c.sort); @@ -209,6 +240,37 @@ export class EgGridColumnSet { }); } + applyColumnSettings(conf: EgGridColumnPersistConf[]) { + if (!conf || conf.length == 0) return; + + let newCols = []; + + conf.forEach(colConf => { + let col = this.getColByName(colConf.name); + if (!col) return; // no such column in this grid. + + col.visible = true; + if (colConf.align) col.align = colConf.align; + if (colConf.flex) col.flex = colConf.flex; + if (colConf.sort) col.sort = colConf.sort; + + // Add to new columns array, avoid dupes. + if (newCols.filter(c => c.name == col.name).length == 0) + newCols.push(col); + }); + + // columns which are not expressed within the saved + // configuration are marked as non-visible and + // appended to the end of the new list of columns. + this.columns.forEach(c => { + if (conf.filter(cf => cf.name == c.name).length == 0) { + c.visible = false; + newCols.push(c); + } + }); + + this.columns = newCols; + } } export class EgGridToolbarButton { -- 2.11.0