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 e738721..670cc6b 100644 (file)
--- 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,7 +1,7 @@
 
 <div class="eg-grid-row eg-grid-body-row"
   [ngClass]="{'eg-grid-row-selected': selector[idx]}"
-  *ngFor="let row of currentPage(); let idx = index">
+  *ngFor="let row of dataSource.getPage(pager) | async; let idx = index">
 
   <div class="eg-grid-cell eg-grid-checkbox-cell">
     <input type='checkbox' [(ngModel)]="selector[idx]">

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 a85f9e0..16a8738 100644 (file)
--- 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
@@ -17,10 +17,5 @@ export class EgGridBodyComponent implements OnInit {
 
     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-data-source.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts
index 5120678..a498100 100644 (file)
--- 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,15 +1,31 @@
-//import {Observable} from 'rxjs/Rx';
+import {Observable} from 'rxjs/Rx';
+import {Pager} from '@eg/share/util/pager';
 
 export class EgGridDataSource {
-    data: any[] = []; 
 
-    sortSpec: any[] = [];
+    data: any[];
+    sortSpec: any[];
 
     // Do we know how many items we have in total?
     indeterminate: boolean
 
+    constructor() {
+        this.data = [];
+        this.sortSpec = [];
+    }
+
     applySort() {
     }
+
+    getPage(pager: Pager): Observable<Array<any>> {
+
+        if (!this.data) return Observable.from([]);
+
+        if (this.data[pager.offset] !== undefined) {
+            return Observable.of(
+                this.data.slice(pager.offset, pager.limit + pager.offset));
+        }
+    }
 }
 
 

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 0d9a331..d20ce10 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -29,4 +29,7 @@
 .eg-grid-body-cell {
 }
 
+.eg-grid-toolbar {
+  display: flex;
+}
 

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 0b4a533..813e6bc 100644 (file)
--- 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,8 +1,6 @@
 
 <div class="eg-grid">
-  <!--
-  <eg-grid-toolbar [columnSet]="columnSet"></eg-grid-toolbar>
-  -->
+  <eg-grid-toolbar [pager]="pager"></eg-grid-toolbar>
   <eg-grid-header [columnSet]="columnSet"></eg-grid-header>
   <eg-grid-body 
     [columnSet]="columnSet" 

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 455e286..99518f4 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
@@ -5,6 +5,7 @@ import {EgGridComponent} from './grid.component';
 import {EgGridColumnComponent} from './grid-column.component';
 import {EgGridHeaderComponent} from './grid-header.component';
 import {EgGridBodyComponent} from './grid-body.component';
+import {EgGridToolbarComponent} from './grid-toolbar.component';
 
 @NgModule({
     declarations: [
@@ -12,7 +13,8 @@ import {EgGridBodyComponent} from './grid-body.component';
         EgGridComponent,
         EgGridColumnComponent,
         EgGridHeaderComponent,
-        EgGridBodyComponent
+        EgGridBodyComponent,
+        EgGridToolbarComponent
     ],
     imports: [
         CommonModule,

diff --git a/Open-ILS/src/eg2/src/app/share/util/pager.ts b/Open-ILS/src/eg2/src/app/share/util/pager.ts
index 1c21a8d..e6ec135 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/util/pager.ts
+++ b/Open-ILS/src/eg2/src/app/share/util/pager.ts
@@ -1,3 +1,4 @@
+import {EventEmitter} from '@angular/core';
 
 /**
  * Utility class for manage paged information.
@@ -6,6 +7,11 @@ export class Pager {
     offset: number = 0;
     limit: number = null;
     resultCount: number;
+    onChange$: EventEmitter<number>;
+
+    constructor() {
+        this.onChange$ = new EventEmitter<number>();
+    }
 
     isFirstPage(): boolean {
         return this.offset == 0;
@@ -29,6 +35,7 @@ export class Pager {
 
     setPage(page: number): void {
         this.offset = (this.limit * (page - 1));
+        this.onChange$.emit(this.offset);
     }
 
     pageCount(): number {

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 87b075c..f2ae275 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -62,7 +62,7 @@
 <!-- grid stuff -->
 
 
-<eg-grid #cbtGrid idlClass="cbt" [dataSource]="billingTypes">
+<eg-grid #cbtGrid idlClass="cbt" [dataSource]="btSource">
 </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 965a0f6..67dbf0f 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -5,6 +5,7 @@ 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';
+import {EgPcrudService} from '@eg/core/pcrud.service';
 
 @Component({
   templateUrl: 'sandbox.component.html'
@@ -18,7 +19,7 @@ export class EgSandboxComponent implements OnInit {
 
     gridDataSource: EgGridDataSource = new EgGridDataSource();
 
-    billingTypes: EgGridDataSource = new EgGridDataSource();
+    btSource: EgGridDataSource = new EgGridDataSource();
 
 
     testStr: string;
@@ -30,6 +31,7 @@ export class EgSandboxComponent implements OnInit {
 
     constructor(
         private idl: EgIdlService,
+        private pcrud: EgPcrudService,
         private strings: EgStringService,
         private toast: EgToastService
     ) {}
@@ -42,13 +44,8 @@ export class EgSandboxComponent implements OnInit {
             {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];
+        this.pcrud.retrieveAll('cbt').subscribe(
+            bt => this.btSource.data.push(bt));
     }
 
     showProgress() {