From: Bill Erickson <berickxx@gmail.com>
Date: Tue, 1 May 2018 23:52:19 +0000 (-0400)
Subject: LP#1626157 grid experiment
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=refs%2Fheads%2Fuser%2Fberick%2Flp1626157-ang2-grid;p=working%2FEvergreen.git

LP#1626157 grid experiment

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

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 97008bff1e..7a86798668 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
@@ -11,7 +11,7 @@
   </div>
   <div class="eg-grid-cell eg-grid-body-cell" [ngStyle]="{flex:col.flex}"
     *ngFor="let col of columnSet.displayColumns()">
-    {{col.displayValue(row)}}
+    {{getDisplayValue(row, col)}}
   </div>
 
 <div>
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 82031aa752..364e21ec28 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
@@ -1,5 +1,5 @@
 import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
-import {EgGridColumn, EgGridColumnSet} from './grid-column';
+import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service';
 import {EgGridDataSource} from './grid-data-source';
 import {Pager} from '@eg/share/util/pager';
 
@@ -15,10 +15,17 @@ export class EgGridBodyComponent implements OnInit {
     @Input() columnSet: EgGridColumnSet;
     @Input() selector: {[idx:number] : boolean};
 
+    constructor(private gridSvc: EgGridService) { }
+
     ngOnInit() {
 
         // fetch the first page of data
         this.dataSource.requestPage(this.pager);
     }
+
+    getDisplayValue(row: any, col: EgGridColumn): string {
+        return this.gridSvc.getRowColumnValue(row, col);
+    }
+
 }
 
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 c1e1f93251..41d8d04f19 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,6 +1,6 @@
 import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
+import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service';
 import {EgGridComponent} from './grid.component';
-import {EgGridColumn} from './grid-column';
 
 @Component({
   selector: 'eg-grid-column',
@@ -18,7 +18,9 @@ export class EgGridColumnComponent implements OnInit {
     @Input() cellTemplate: TemplateRef<any>;
 
     // get a reference to our container grid.
-    constructor(@Host() private grid: EgGridComponent) {}
+    constructor(
+        private gridSvc: EgGridService,
+        @Host() private grid: EgGridComponent) {}
 
     ngOnInit() {
 
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column.ts
deleted file mode 100644
index fc2256b6b6..0000000000
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import {TemplateRef} from '@angular/core';
-import {EgIdlService} from '@eg/core/idl.service';
-
-export class EgGridColumn {
-    name: string;
-    path: string;
-    label: string;
-    flex: number;
-    hidden: boolean;
-    cellTemplate: TemplateRef<any>;
-
-    displayValue(row: any): string {
-        // filters
-        // cell templates, etc.
-
-        if (row[this.name] === undefined || row[this.name] === null) 
-            return '';
-
-        if (typeof row[this.name] == 'function') {
-            let val = row[this.name]();
-            if (val === undefined || val === null) return '';
-            return val+'';
-        }
-
-        return row[this.name]+'';
-    }
-}
-
-export class EgGridColumnSet {
-  
-    columns: EgGridColumn[];
-
-    constructor() {
-        this.columns = [];
-    }
-
-    add(col: EgGridColumn) {
-        this.columns.push(col);
-    }
-
-    displayColumns(): EgGridColumn[] {
-        return this.columns.filter(c => !c.hidden);
-    }
-}
-
-export class EgGridIdlColumnSet extends EgGridColumnSet {
-    idl: EgIdlService;
-    idlClass: string;
-
-    constructor(idl: EgIdlService, idlClass: string) { 
-        super();
-        this.idl = idl;
-        this.idlClass = idlClass;
-        this.generateColumns();
-    }
-
-    generateColumns() {
-        this.idl.classes[this.idlClass].fields.forEach(field => {
-            if (field.virtual) return;
-            let col = new EgGridColumn();
-            col.name = field.name;
-            col.label = field.label || field.name;
-            this.add(col);
-        });
-    }
-}
-
-
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 b1003d402d..2b8e4a8466 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
@@ -7,7 +7,6 @@
     #
   </div>
 
-
     <div *ngFor="let col of columnSet.displayColumns()" 
       class="eg-grid-cell eg-grid-header-cell" [ngStyle]="{flex:col.flex}">
       {{col.label}}
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
index 1a19e8e63e..254c53851d 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {EgGridColumn, EgGridColumnSet} from './grid-column';
+import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service';
 
 @Component({
   selector: 'eg-grid-header',
@@ -11,7 +11,7 @@ export class EgGridHeaderComponent implements OnInit {
     @Input() columnSet: EgGridColumnSet;
     @Input() selected: {[idx:number] : boolean};
 
-    constructor() {}
+    constructor(private gridSvc: EgGridService) { }
 
     ngOnInit() {
     }
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
new file mode 100644
index 0000000000..4604fd89dd
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
@@ -0,0 +1,25 @@
+
+<div class="eg-grid-toolbar">
+
+  <!-- push everything else to the right -->
+  <div class="flex-1"></div>
+
+  <div class="btn-toolbar">
+    <div class="btn-grp">
+      <button [disabled]="pager.isFirstPage()" type="button" class="btn btn-light" (click)="pager.toFirst()">
+        <span title="First Page" i18n-title class="material-icons">first_page</span>
+      </button>
+      <button [disabled]="pager.isFirstPage()" type="button" class="btn btn-light" (click)="pager.decrement()">
+        <span title="Previous Page" i18n-title class="material-icons">keyboard_arrow_left</span>
+      </button>
+      <button [disabled]="pager.isLastPage()" type="button" class="btn btn-light" (click)="pager.increment()">
+        <span title="Next Page" i18n-title class="material-icons">keyboard_arrow_right</span>
+      </button>
+      <button [disabled]="pager.isLastPage()" type="button" class="btn btn-light" (click)="pager.toLast()">
+        <span title="First Page" i18n-title class="material-icons">last_page</span>
+      </button>
+    </div>
+  </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
new file mode 100644
index 0000000000..01b5880695
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts
@@ -0,0 +1,23 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {EgGridDataSource} from './grid-data-source';
+import {Pager} from '@eg/share/util/pager';
+
+@Component({
+  selector: 'eg-grid-toolbar',
+  templateUrl: 'grid-toolbar.component.html'
+})
+
+export class EgGridToolbarComponent implements OnInit {
+
+    @Input() dataSource: EgGridDataSource;
+    @Input() pager: Pager;
+
+    ngOnInit() {
+
+        // listen for pagination changes
+        this.pager.onChange$.subscribe(
+            val => this.dataSource.requestPage(this.pager));
+    }
+}
+
+
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 af94b402a9..ff8dd86700 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,8 +1,9 @@
 import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 import {EgGridDataSource} from './grid-data-source';
-import {EgGridColumn, EgGridColumnSet, EgGridIdlColumnSet} from './grid-column';
 import {EgIdlService} from '@eg/core/idl.service';
+import {EgOrgService} from '@eg/core/org.service';
 import {Pager} from '@eg/share/util/pager';
+import {EgGridService, EgGridColumnSet} from '@eg/share/grid/grid.service';
 
 @Component({
   selector: 'eg-grid',
@@ -21,19 +22,15 @@ export class EgGridComponent implements OnInit {
     columnSet: EgGridColumnSet;
     selector: {[idx:number] : boolean};
     
-    constructor(private idl: EgIdlService) {
+    constructor(private gridSvc: EgGridService) {
         this.pager = new Pager();
         this.pager.limit = 10; // TODO
         this.selector = {};
     }
 
     ngOnInit() {
-        if (this.idlClass) {
-            this.columnSet = new EgGridIdlColumnSet(this.idl, this.idlClass);
-        } else {
-            this.columnSet = new EgGridColumnSet();
-        }
+        this.columnSet = this.gridSvc.initializeColumnSet(this.idlClass);
     }
-
 }
 
+
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 99518f4bd4..a664b43e95 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
@@ -6,6 +6,7 @@ import {EgGridColumnComponent} from './grid-column.component';
 import {EgGridHeaderComponent} from './grid-header.component';
 import {EgGridBodyComponent} from './grid-body.component';
 import {EgGridToolbarComponent} from './grid-toolbar.component';
+import {EgGridService} from './grid.service';
 
 @NgModule({
     declarations: [
@@ -26,6 +27,7 @@ import {EgGridToolbarComponent} from './grid-toolbar.component';
         EgGridColumnComponent,
     ],
     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
new file mode 100644
index 0000000000..ead30fabeb
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts
@@ -0,0 +1,91 @@
+import {Injectable, TemplateRef} from '@angular/core';
+import {EgIdlService, EgIdlObject} from '@eg/core/idl.service';
+import {EgOrgService} from '@eg/core/org.service';
+import {EgPcrudService} from '@eg/core/pcrud.service';
+
+
+@Injectable()
+export class EgGridService {
+
+    constructor(
+        private idl: EgIdlService,
+        private org: EgOrgService,
+        private pcrud: EgPcrudService
+    ) {
+    }
+
+    getRowColumnValue(row: any, col: EgGridColumn): string {
+        if (row[col.name] === undefined || row[col.name] === null) 
+            return '';
+
+        if (col.idlFieldDef) 
+            return this.getRowColumnIdlValue(row, col);
+
+        if (typeof row[col.name] == 'function') {
+            let val = row[col.name]();
+            if (val === undefined || val === null) return '';
+            return val+'';
+        }
+
+        return row[col.name]+'';
+    }
+
+    getRowColumnIdlValue(row: any, col: EgGridColumn): string {
+        let val = row[col.name]();
+        if (val === undefined || val === null) return '';
+        return val+'';
+    }
+
+    initializeColumnSet(idlClass?: string): EgGridColumnSet {
+        let columnSet = new EgGridColumnSet();
+
+        // generate columns for all non-virtual fields on the IDL class
+        if (idlClass) {
+            this.idl.classes[idlClass].fields.forEach(field => {
+                if (field.virtual) return;
+                let col = new EgGridColumn();
+                col.name = field.name;
+                col.label = field.label || field.name;
+                col.idlFieldDef = field;
+                columnSet.add(col);
+            });
+        }
+
+        return columnSet;
+    }
+}
+
+
+export class EgGridColumn {
+    name: string;
+    path: string;
+    label: string;
+    flex: number;
+    hidden: boolean;
+    idlClass: string;
+    idlFieldDef: any;
+    cellTemplate: TemplateRef<any>;
+}
+
+
+export class EgGridColumnSet {
+    columns: EgGridColumn[];
+
+    constructor() {
+        this.columns = [];
+    }
+
+    add(col: EgGridColumn) {
+        // avoid dupes
+        if (this.columns.filter(c => c.name == col.name).length) return;
+
+        this.columns.push(col);
+    }
+
+    displayColumns(): EgGridColumn[] {
+        return this.columns.filter(c => !c.hidden);
+    }
+}
+
+
+