From 4ff1a67aad865ce004a0d406851d0bd4fb7e8246 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Fri, 27 Apr 2018 11:26:48 -0400
Subject: [PATCH] LP#1626157 material table PoC

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 Open-ILS/src/eg2/src/app/app.module.ts             |  2 +
 .../src/app/staff/sandbox/sandbox.component.css    | 33 +++++++++
 .../src/app/staff/sandbox/sandbox.component.html   | 79 +++++++++++++++++++++
 .../eg2/src/app/staff/sandbox/sandbox.component.ts | 81 ++++++++++++++++++++--
 .../eg2/src/app/staff/sandbox/sandbox.module.ts    | 11 ++-
 Open-ILS/src/eg2/src/app/staff/staff.component.ts  |  2 -
 Open-ILS/src/eg2/src/styles.css                    |  3 +-
 7 files changed, 202 insertions(+), 9 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.css

diff --git a/Open-ILS/src/eg2/src/app/app.module.ts b/Open-ILS/src/eg2/src/app/app.module.ts
index 8998b01d73..4b6a82dcdb 100644
--- a/Open-ILS/src/eg2/src/app/app.module.ts
+++ b/Open-ILS/src/eg2/src/app/app.module.ts
@@ -4,6 +4,7 @@
  * that end up here accidentally.
  */
 import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgModule} from '@angular/core';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; // ng-bootstrap
 import {CookieModule} from 'ngx-cookie'; // import CookieMonster
@@ -23,6 +24,7 @@ import {WelcomeComponent} from './welcome.component';
     EgCommonModule.forRoot(),
     EgBaseRoutingModule,
     BrowserModule,
+    BrowserAnimationsModule,
     NgbModule.forRoot(),
     CookieModule.forRoot()
   ],
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.css b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.css
new file mode 100644
index 0000000000..1154419aaa
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.css
@@ -0,0 +1,33 @@
+
+.mat-column-select {
+  overflow: initial;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.example-header {
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.mat-column-stuff {
+    flex: 3;
+    background-color: #f0a0c0;
+}
+
+.grid-row-selected {
+    background-color: #a0c0f0;
+}
+
+.grid-paginator {
+    
+}
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..21fbcd06da 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
@@ -58,4 +58,83 @@
     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
 </div>
 
+<br/>
+<hr>
+<br/>
+
+
+<div class="row">
+  <div class="col-lg-4">
+    <input class="form-control" 
+      (keyup)="applyFilter($event.target.value)" placeholder="Filter"/>
+  </div>
+</div>
+
+  <div class="row float-right">
+    <button mat-button [matMenuTriggerFor]="menu">
+      Actions
+      <span class="material-icons">arrow_drop_down</span>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item>Action 1</button>
+      <button mat-menu-item>Action 2</button>
+    </mat-menu>
+    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+    <button mat-button [matMenuTriggerFor]="menu2">
+      <span class="material-icons">arrow_drop_down</span>
+    </button>
+    <mat-menu #menu2="matMenu">
+      <button mat-menu-item>Configure Columns...</button>
+    </mat-menu>
+
+  </div>
+  <div style="clear:both"></div>
+
+  <mat-table [dataSource]="dataSource" matSort>
+  
+    <ng-container matColumnDef="select">
+      <mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="$event ? masterToggle() : null"
+                      [checked]="selection.hasValue() && isAllSelected()"
+                      [indeterminate]="selection.hasValue() && !isAllSelected()">
+        </mat-checkbox>
+      </mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <mat-checkbox (click)="$event.stopPropagation()"
+                      (change)="$event ? selection.toggle(row) : null"
+                      [checked]="selection.isSelected(row)">
+        </mat-checkbox>
+      </mat-cell>
+    </ng-container>
+  
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row 
+        (click)="logClick(row)"
+        *matRowDef="let row; columns: displayedColumns;"
+        [ngClass]="{'grid-row-selected': rowIsSelected(row)}">
+    </mat-row>
+
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="state">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> State </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.state}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="stuff">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Stuff </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.stuff}} </mat-cell>
+    </ng-container>
+
+    <ng-container *ngFor="let col of dynamicColumns()" matColumnDef="{{col.field}}">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>{{col.label}}</mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{col.cell(row)}} </mat-cell>
+    </ng-container>
+
+
+  </mat-table>
+
 
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..1e40cba149 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,9 +3,32 @@ 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 {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {SelectionModel} from '@angular/cdk/collections';
+
+const USERS = [
+    {id: 1, name: 'jane',  state: 'az', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 2, name: 'jim',   state: 'ga', stuff: 'asffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 3, name: 'barry', state: 'nc', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 4, name: 'larry', state: 'sc', stuff: 'sdfsadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 5, name: 'garry', state: 'al', stuff: 'asdadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 6, name: 'garry', state: 'nj', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 7, name: 'garry', state: 'ny', stuff: 'asdasffsadf asdlfkaj sdflajs'},
+    {id: 8, name: 'garry', state: 'wy', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 9, name: 'garry', state: 'wa', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 10,name: 'garry', state: 'or', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+    {id: 11,name: 'garry', state: 'ca', stuff: 'asfssdfsadfsadfasffsadf asdlfkaj sdflajs'}
+];
+
+interface UserData {
+    name: string,
+    state: string,
+    id: number
+}
 
 @Component({
-  templateUrl: 'sandbox.component.html'
+  templateUrl: 'sandbox.component.html',
+  styleUrls: ['sandbox.component.css']
 })
 export class EgSandboxComponent implements OnInit {
 
@@ -14,6 +37,11 @@ export class EgSandboxComponent implements OnInit {
 
     //@ViewChild('helloStr') private helloStr: EgStringComponent;
 
+    displayedColumns = ['select', 'id', 'name', 'state', 'stuff'];
+    dataSource: MatTableDataSource<UserData>;
+    selection: SelectionModel<UserData>;
+    @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
 
     testStr: string;
     @Input() set testString(str: string) {
@@ -25,10 +53,53 @@ export class EgSandboxComponent implements OnInit {
     constructor(
         private strings: EgStringService,
         private toast: EgToastService
-    ) {}
+    ) {
+        this.dataSource = new MatTableDataSource(USERS);
+        this.selection = new SelectionModel<UserData>(true, []);
+    }
+
+    ngOnInit() { }
+
+    ngAfterViewInit() {
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+    }
+
+    dynamicColumns(): any {
+        return [
+          { field: 'id', 
+            label: 'ID',
+            cell : (row) => `${row.id}` // stringify
+        }]
+        // append to displayColumns at initial column generation time.
+    }
 
-    ngOnInit() {
-        
+    /** Whether the number of selected elements matches the total number of rows. */
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+
+    logClick(row) {
+        console.log('clicked on row ' + row.name);
+    }
+    rowIsSelected(row): boolean { // grid row
+        return this.selection.selected &&
+            this.selection.selected.filter(r => r.id == row.id).length > 0;
+    }
+
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+	masterToggle() {
+		this.isAllSelected() ?
+			this.selection.clear() :
+			this.dataSource.data.forEach(row => this.selection.select(row));
+	}
+
+    applyFilter(filterValue: string) {
+        filterValue = filterValue.trim(); // Remove whitespace
+        filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+        this.dataSource.filter = filterValue;
     }
 
     showProgress() {
@@ -56,5 +127,7 @@ export class EgSandboxComponent implements OnInit {
                 .then(txt => this.toast.success(txt));
         }, 4000);
     }
+
 }
 
+
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..41d87ecbb3 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,6 +3,8 @@ 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 {MatTableModule, MatPaginatorModule, MatSortModule, MatCheckboxModule, 
+    MatMenuModule, MatButtonModule, MatButtonToggleModule} from '@angular/material';
 
 @NgModule({
   declarations: [
@@ -11,7 +13,14 @@ import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component';
   ],
   imports: [
     EgStaffCommonModule,
-    EgSandboxRoutingModule
+    EgSandboxRoutingModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatCheckboxModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatButtonToggleModule
   ],
   providers: [
   ]
diff --git a/Open-ILS/src/eg2/src/app/staff/staff.component.ts b/Open-ILS/src/eg2/src/app/staff/staff.component.ts
index c8daf732b7..cb0a8061e8 100644
--- a/Open-ILS/src/eg2/src/app/staff/staff.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/staff.component.ts
@@ -62,8 +62,6 @@ export class EgStaffComponent implements OnInit {
         this.route.data.subscribe((data: {staffResolver : any}) => {
             // Data fetched via EgStaffResolver is available here.
         });
-
-
     }
 
     /**
diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 9db4fe8d72..e9bb2ca2c8 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -1,8 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
-/** material design experiments
+/** material design experiments */
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
-*/
 
 
 /** BS default fonts are huge */
-- 
2.11.0