From: Bill Erickson <berickxx@gmail.com>
Date: Sun, 29 Apr 2018 00:57:14 +0000 (-0400)
Subject: LP#1626157 grid experiment
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=536761b24e06b0523f8d4b4767fc97e064f6232e;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
new file mode 100644
index 0000000000..139597f9cb
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -0,0 +1,2 @@
+
+
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
new file mode 100644
index 0000000000..4c451199df
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
@@ -0,0 +1,18 @@
+import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
+import {EgGridColumn} from './grid-column';
+import {EgGridDataSource} from './grid-data-source';
+
+@Component({
+  selector: 'eg-grid-body',
+  templateUrl: 'grid-body.component.html'
+})
+
+export class EgGridBodyComponent implements OnInit {
+
+    @Input() dataSource: EgGridDataSource;
+    @Input() columns: EgGridColumn[];
+
+    ngOnInit() {
+    }
+}
+
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
new file mode 100644
index 0000000000..b895b3e972
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
@@ -0,0 +1,38 @@
+import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
+import {EgGridComponent} from './grid.component';
+import {EgGridColumn} from './grid-column';
+
+@Component({
+  selector: 'eg-grid-column',
+  template: '<ng-template></ng-template>'
+})
+
+export class EgGridColumnComponent implements OnInit {
+
+    // Note most input fields should match class fields for EgGridColumn
+    @Input() name: string;
+    @Input() path: string;
+    @Input() label: string;
+    @Input() flex: number = 1;
+    @Input() visible: boolean = false;
+    @Input() cellTemplate: TemplateRef<any>;
+    @Input() grid: EgGridComponent;
+
+    ngOnInit() {
+
+        if (!this.grid) {
+            console.warn('EgGridColumnComponent needs a [grid]');
+            return;
+        }
+
+        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.cellTemplate = this.cellTemplate;
+        this.grid.columns.push(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
new file mode 100644
index 0000000000..07dcac9912
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column.ts
@@ -0,0 +1,24 @@
+import {TemplateRef} from '@angular/core';
+
+export class EgGridColumn {
+    name: string;
+    path: string;
+    label: string;
+    flex: number = 1;
+    visible: boolean = false;
+    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')
+            return row[this.name]()+'';
+
+        return row[this.name]+'';
+    }
+
+}
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
new file mode 100644
index 0000000000..8ef090f1d8
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts
@@ -0,0 +1,11 @@
+
+
+export class EgGridDataSource {
+    data: any[] = []; 
+
+    // Do we know how many items we have in total?
+    indeterminate: boolean
+
+}
+
+
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
new file mode 100644
index 0000000000..07e0e1e3a0
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
@@ -0,0 +1,5 @@
+
+<div class="eg-grid-row eg-grid-header-row">
+    <div *ngFor="let col of columns">{{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
new file mode 100644
index 0000000000..75bf2fc619
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
@@ -0,0 +1,18 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {EgGridColumn} from './grid-column';
+
+@Component({
+  selector: 'eg-grid-header',
+  templateUrl: './grid-header.component.html'
+})
+
+export class EgGridHeaderComponent implements OnInit {
+
+    @Input() columns: EgGridColumn[];
+
+    constructor() {}
+
+    ngOnInit() {
+    }
+}
+
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
new file mode 100644
index 0000000000..6ad85ebf14
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -0,0 +1,15 @@
+
+.eg-grid-row {
+    display: flex;
+}
+
+.eg-grid-header-row {
+}
+
+.eg-grid-header-cell {
+    font-weight: bold;
+}
+
+.eg-grid-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
new file mode 100644
index 0000000000..b22a064130
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
@@ -0,0 +1,11 @@
+
+<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>
+  -->
+</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
new file mode 100644
index 0000000000..80f88330db
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
@@ -0,0 +1,24 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {EgGridDataSource} from './grid-data-source';
+import {EgGridColumn} from './grid-column';
+
+@Component({
+  selector: 'eg-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.css']
+})
+
+export class EgGridComponent implements OnInit {
+
+    @Input() dataSource: EgGridDataSource;
+    columns: EgGridColumn[];
+    
+    constructor() {
+        this.columns = [];
+    }
+
+    ngOnInit() {
+    }
+
+}
+
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
new file mode 100644
index 0000000000..0d3e31c2a5
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {EgGridComponent} from './grid.component';
+import {EgGridColumnComponent} from './grid-column.component';
+import {EgGridHeaderComponent} from './grid-header.component';
+import {EgGridBodyComponent} from './grid-body.component';
+
+@NgModule({
+    declarations: [
+        // public + internal components
+        EgGridComponent,
+        EgGridColumnComponent,
+        EgGridHeaderComponent,
+        EgGridBodyComponent
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        // public components
+        EgGridComponent,
+        EgGridColumnComponent,
+    ],
+    providers: [
+    ]
+})
+
+export class EgGridModule {
+
+}
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 e8f2626ef7..900201ebad 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
@@ -59,3 +59,8 @@
 </div>
 
 
+<!-- grid stuff -->
+
+<eg-grid #testGrid [dataSource]="gridDataSource"></eg-grid>
+<eg-grid-column [grid]="testGrid" name="name" label="Name" i18n-label></eg-grid-column>
+
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 90ebe15254..8a719f9847 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
@@ -3,6 +3,7 @@ import {EgProgressDialogComponent} from '@eg/share/dialog/progress.component';
 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';
 
 @Component({
   templateUrl: 'sandbox.component.html'
@@ -14,6 +15,8 @@ export class EgSandboxComponent implements OnInit {
 
     //@ViewChild('helloStr') private helloStr: EgStringComponent;
 
+    gridDataSource: EgGridDataSource = new EgGridDataSource();
+
 
     testStr: string;
     @Input() set testString(str: string) {
@@ -28,7 +31,12 @@ export class EgSandboxComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        
+
+        this.gridDataSource.data = [
+            {name: 'Jane'},
+            {name: 'Al'},
+            {name: 'The Tick'}
+        ];
     }
 
     showProgress() {
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.module.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.module.ts
index aea54bda16..6302e73996 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.module.ts
@@ -3,15 +3,17 @@ import {EgStaffCommonModule} from '@eg/staff/common.module';
 import {EgSandboxRoutingModule} from './routing.module';
 import {EgSandboxComponent} from './sandbox.component';
 import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component';
+import {EgGridModule} from '@eg/share/grid/grid.module';
 
 @NgModule({
   declarations: [
     EgSandboxComponent,
-    FmRecordEditorComponent // not globally available
+    FmRecordEditorComponent
   ],
   imports: [
     EgStaffCommonModule,
-    EgSandboxRoutingModule
+    EgSandboxRoutingModule,
+    EgGridModule
   ],
   providers: [
   ]