From c615252a86f0365c2d6d2f0eee291641b10cba6b Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Sun, 29 Apr 2018 17:55:35 -0400
Subject: [PATCH] LP#1626157 grid experiment

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../src/app/share/grid/grid-body.component.html    | 13 ++++++
 .../eg2/src/app/share/grid/grid-body.component.ts  | 12 ++++-
 .../src/app/share/grid/grid-column.component.ts    | 16 ++++---
 Open-ILS/src/eg2/src/app/share/grid/grid-column.ts | 52 ++++++++++++++++++++--
 .../src/eg2/src/app/share/grid/grid-data-source.ts |  6 ++-
 .../src/app/share/grid/grid-header.component.html  |  9 +++-
 .../src/app/share/grid/grid-header.component.ts    |  5 ++-
 .../src/eg2/src/app/share/grid/grid.component.css  | 17 +++++++
 .../src/eg2/src/app/share/grid/grid.component.html | 13 +++---
 .../src/eg2/src/app/share/grid/grid.component.ts   | 27 ++++++++---
 Open-ILS/src/eg2/src/app/share/grid/grid.module.ts |  4 +-
 .../src/app/staff/sandbox/sandbox.component.html   | 17 ++++++-
 .../eg2/src/app/staff/sandbox/sandbox.component.ts | 18 ++++++--
 Open-ILS/src/eg2/src/index.html                    |  5 +++
 14 files changed, 180 insertions(+), 34 deletions(-)

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 139597f9cb..e7387216fb 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
@@ -1,2 +1,15 @@
 
+<div class="eg-grid-row eg-grid-body-row"
+  [ngClass]="{'eg-grid-row-selected': selector[idx]}"
+  *ngFor="let row of currentPage(); let idx = index">
+
+  <div class="eg-grid-cell eg-grid-checkbox-cell">
+    <input type='checkbox' [(ngModel)]="selector[idx]">
+  </div>
+  <div class="eg-grid-cell eg-grid-body-cell" [ngStyle]="{flex:col.flex}"
+    *ngFor="let col of columnSet.displayColumns()">
+    {{col.displayValue(row)}}
+  </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 4c451199df..a85f9e0425 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,6 +1,7 @@
 import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
-import {EgGridColumn} from './grid-column';
+import {EgGridColumn, EgGridColumnSet} from './grid-column';
 import {EgGridDataSource} from './grid-data-source';
+import {Pager} from '@eg/share/util/pager';
 
 @Component({
   selector: 'eg-grid-body',
@@ -10,9 +11,16 @@ import {EgGridDataSource} from './grid-data-source';
 export class EgGridBodyComponent implements OnInit {
 
     @Input() dataSource: EgGridDataSource;
-    @Input() columns: EgGridColumn[];
+    @Input() columnSet: EgGridColumnSet;
+    @Input() pager: Pager;
+    @Input() selector: {[idx:number] : boolean};
 
     ngOnInit() {
     }
+
+    currentPage(): any[] {
+        if (!this.dataSource.data) return [];
+        return this.dataSource.data.slice(this.pager.offset, this.pager.limit);
+    }
 }
 
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 b895b3e972..c1e1f93251 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
@@ -13,10 +13,12 @@ export class EgGridColumnComponent implements OnInit {
     @Input() name: string;
     @Input() path: string;
     @Input() label: string;
-    @Input() flex: number = 1;
-    @Input() visible: boolean = false;
+    @Input() flex: number;
+    @Input() hidden: boolean = false;
     @Input() cellTemplate: TemplateRef<any>;
-    @Input() grid: EgGridComponent;
+
+    // get a reference to our container grid.
+    constructor(@Host() private grid: EgGridComponent) {}
 
     ngOnInit() {
 
@@ -28,11 +30,11 @@ export class EgGridColumnComponent implements OnInit {
         let col = new EgGridColumn();
         col.name = this.name;
         col.path = this.path;
-        col.label = this.label;
-        col.flex = this.flex;
-        col.visible = this.visible;
+        col.label = this.label || this.name;
+        col.flex = this.flex || 2;
+        col.hidden = this.hidden;
         col.cellTemplate = this.cellTemplate;
-        this.grid.columns.push(col);
+        this.grid.columnSet.add(col);
     }
 }
 
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
index 07dcac9912..fc2256b6b6 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column.ts
@@ -1,11 +1,12 @@
 import {TemplateRef} from '@angular/core';
+import {EgIdlService} from '@eg/core/idl.service';
 
 export class EgGridColumn {
     name: string;
     path: string;
     label: string;
-    flex: number = 1;
-    visible: boolean = false;
+    flex: number;
+    hidden: boolean;
     cellTemplate: TemplateRef<any>;
 
     displayValue(row: any): string {
@@ -15,10 +16,53 @@ export class EgGridColumn {
         if (row[this.name] === undefined || row[this.name] === null) 
             return '';
 
-        if (typeof row[this.name] == 'function')
-            return row[this.name]()+'';
+        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-data-source.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts
index 8ef090f1d8..5120678a89 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
@@ -1,11 +1,15 @@
-
+//import {Observable} from 'rxjs/Rx';
 
 export class EgGridDataSource {
     data: any[] = []; 
 
+    sortSpec: any[] = [];
+
     // Do we know how many items we have in total?
     indeterminate: boolean
 
+    applySort() {
+    }
 }
 
 
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 07e0e1e3a0..1a03da822e 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
@@ -1,5 +1,12 @@
 
 <div class="eg-grid-row eg-grid-header-row">
-    <div *ngFor="let col of columns">{{col.label}}</div>
+  <div class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell">
+    <input type='checkbox'> <!-- add click handlers ; shared selector mod -->
+  </div>
+
+    <div *ngFor="let col of columnSet.displayColumns()" 
+      class="eg-grid-cell eg-grid-header-cell" [ngStyle]="{flex:col.flex}">
+      {{col.label}}
+    </div>
 </div>
 
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 75bf2fc619..1a19e8e63e 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} from './grid-column';
+import {EgGridColumn, EgGridColumnSet} from './grid-column';
 
 @Component({
   selector: 'eg-grid-header',
@@ -8,7 +8,8 @@ import {EgGridColumn} from './grid-column';
 
 export class EgGridHeaderComponent implements OnInit {
 
-    @Input() columns: EgGridColumn[];
+    @Input() columnSet: EgGridColumnSet;
+    @Input() selected: {[idx:number] : boolean};
 
     constructor() {}
 
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 6ad85ebf14..0d9a331886 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
@@ -1,15 +1,32 @@
 
+.eg-grid {
+    width: 100%;
+    color: rgba(0,0,0,.87); 
+}
+    
 .eg-grid-row {
     display: flex;
+    border-bottom: 1px solid rgba(0,0,0,.12);
+    padding-left: 10px;
+    padding-right: 10px;
 }
 
 .eg-grid-header-row {
 }
 
+.eg-grid-body-row {
+}
+
 .eg-grid-header-cell {
     font-weight: bold;
 }
 
 .eg-grid-cell {
+    flex: 1; /* applied per column */
+    padding: 6px;
 }
 
+.eg-grid-body-cell {
+}
+
+
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 b22a064130..0b4a533776 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
@@ -1,11 +1,14 @@
 
 <div class="eg-grid">
   <!--
-  <eg-grid-toolbar [columns]="columns"></eg-grid-toolbar>
-  -->
-  <eg-grid-header [columns]="columns"></eg-grid-header>
-  <!--
-  <eg-grid-body [columns]="columns" [dataSource]="dataSource"></eg-grid-body>
+  <eg-grid-toolbar [columnSet]="columnSet"></eg-grid-toolbar>
   -->
+  <eg-grid-header [columnSet]="columnSet"></eg-grid-header>
+  <eg-grid-body 
+    [columnSet]="columnSet" 
+    [dataSource]="dataSource"
+    [pager]="pager"
+    [selector]="selector">
+  </eg-grid-body>
 </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 80f88330db..af94b402a9 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,23 +1,38 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 import {EgGridDataSource} from './grid-data-source';
-import {EgGridColumn} from './grid-column';
+import {EgGridColumn, EgGridColumnSet, EgGridIdlColumnSet} from './grid-column';
+import {EgIdlService} from '@eg/core/idl.service';
+import {Pager} from '@eg/share/util/pager';
 
 @Component({
   selector: 'eg-grid',
   templateUrl: './grid.component.html',
-  styleUrls: ['./grid.component.css']
+  styleUrls: ['grid.component.css'],
+  // share grid css globally once imported.
+  encapsulation: ViewEncapsulation.None
 })
 
 export class EgGridComponent implements OnInit {
 
     @Input() dataSource: EgGridDataSource;
-    columns: EgGridColumn[];
+    @Input() idlClass: string;
+
+    pager: Pager;
+    columnSet: EgGridColumnSet;
+    selector: {[idx:number] : boolean};
     
-    constructor() {
-        this.columns = [];
+    constructor(private idl: EgIdlService) {
+        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();
+        }
     }
 
 }
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 0d3e31c2a5..455e286635 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,5 +1,6 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 import {EgGridComponent} from './grid.component';
 import {EgGridColumnComponent} from './grid-column.component';
 import {EgGridHeaderComponent} from './grid-header.component';
@@ -14,7 +15,8 @@ import {EgGridBodyComponent} from './grid-body.component';
         EgGridBodyComponent
     ],
     imports: [
-        CommonModule
+        CommonModule,
+        FormsModule
     ],
     exports: [
         // public components
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index 900201ebad..87b075c266 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -61,6 +61,19 @@
 
 <!-- grid stuff -->
 
-<eg-grid #testGrid [dataSource]="gridDataSource"></eg-grid>
-<eg-grid-column [grid]="testGrid" name="name" label="Name" i18n-label></eg-grid-column>
+
+<eg-grid #cbtGrid idlClass="cbt" [dataSource]="billingTypes">
+</eg-grid>
+
+<!--
+<eg-grid #testGrid [dataSource]="gridDataSource">
+  <eg-grid-column  name="name" label="Name" i18n-label></eg-grid-column>
+  <eg-grid-column  name="state" label="State" i18n-label></eg-grid-column>
+</eg-grid>
+-->
+
+
+
+
+
 
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 8a719f9847..965a0f6cb9 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -4,6 +4,7 @@ import {EgToastService} from '@eg/share/toast/toast.service';
 import {EgStringService} from '@eg/share/string/string.service';
 import {Observable} from 'rxjs/Rx';
 import {EgGridDataSource} from '@eg/share/grid/grid-data-source';
+import {EgIdlService, EgIdlObject} from '@eg/core/idl.service';
 
 @Component({
   templateUrl: 'sandbox.component.html'
@@ -17,6 +18,8 @@ export class EgSandboxComponent implements OnInit {
 
     gridDataSource: EgGridDataSource = new EgGridDataSource();
 
+    billingTypes: EgGridDataSource = new EgGridDataSource();
+
 
     testStr: string;
     @Input() set testString(str: string) {
@@ -26,6 +29,7 @@ export class EgSandboxComponent implements OnInit {
     name: string = 'Jane';
 
     constructor(
+        private idl: EgIdlService,
         private strings: EgStringService,
         private toast: EgToastService
     ) {}
@@ -33,10 +37,18 @@ export class EgSandboxComponent implements OnInit {
     ngOnInit() {
 
         this.gridDataSource.data = [
-            {name: 'Jane'},
-            {name: 'Al'},
-            {name: 'The Tick'}
+            {name: 'Jane', state: 'AZ'},
+            {name: 'Al', state: 'CA'},
+            {name: 'The Tick', state: 'TX'}
         ];
+
+        let bt1 = this.idl.create('cbt');
+        let bt2 = this.idl.create('cbt');
+        bt1.id = 12;
+        bt1.name = 'BT1';
+        bt2.id = 47;
+        bt1.name = 'BT2';
+        this.billingTypes.data = [bt1, bt2];
     }
 
     showProgress() {
diff --git a/Open-ILS/src/eg2/src/index.html b/Open-ILS/src/eg2/src/index.html
index b169c213ca..d84bab7758 100644
--- a/Open-ILS/src/eg2/src/index.html
+++ b/Open-ILS/src/eg2/src/index.html
@@ -12,9 +12,14 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!-- link to bootstrap manually for the time being.  With 
         ng-bootstrap, we only need the CSS, not the JS -->
+  <!--
   <link rel="stylesheet" crossorigin="anonymous"
     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
     integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm">
+    -->
+  <!-- lnk to local copy for dev on the go -->
+  <link rel="stylesheet" crossorigin="anonymous"
+    href="/css/bootstrap.min.css" 
 </head>
 <body>
   <eg-root></eg-root>
-- 
2.11.0