LP#1626157 Grid column persistence

Signed-off-by: Bill Erickson <berickxx@gmail.com>

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 36206d7..e8aba76 100644 (file)
--- 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 @@
       <a class="dropdown-item label-with-material-icon" 
         (click)="columnConfDialog.open({size:'lg'})">
         <span class="material-icons">build</span>
-        <span  class="ml-2" i18n>Manage Columns</span>
+        <span class="ml-2" i18n>Manage Columns</span>
       </a>
       <a class="dropdown-item label-with-material-icon" 
         (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
         <span class="material-icons">compare_arrows</span>
-        <span  class="ml-2" i18n>Manage Column Widths</span>
+        <span class="ml-2" i18n>Manage Column Widths</span>
       </a>
       <a class="dropdown-item label-with-material-icon" 
         (click)="saveColumns()">
         <span class="material-icons">save</span>
-        <span  class="ml-2" i18n>Save Columns</span>
+        <span class="ml-2" i18n>Save Columns</span>
+      </a>
+      <a class="dropdown-item label-with-material-icon" 
+        (click)="columnSet.reset()">
+        <span class="material-icons">restore</span>
+        <span class="ml-2" i18n>Reset Columns</span>
       </a>
 
       <div class="dropdown-divider"></div>

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 35495d2..3a60a54 100644 (file)
--- 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 2b57f67..97ec426 100644 (file)
--- 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<any> {
         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<EgGridColumnPersistConf[]> {
+        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 {