LP#1813788: add example of grid improvements to sandbox

This patch adds a new grid to the Angular sandbox page
that demonstrates the following features introduced
in the previous patch:

- grid filtering
- stick grid headers
- grid reloads without losing one's current paging
  location

Sponsored-by: MassLNC
Sponsored-by: Georgia Public Library Service
Sponsored-by: Indiana State Library
Sponsored-by: CW MARS
Sponsored-by: King County Library System
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

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 f6df154..92c0e84 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
@@ -182,6 +182,7 @@
   [rowFlairIsEnabled]="true"
   [rowFlairCallback]="btGridRowFlairCallback"
   [cellClassCallback]="btGridCellClassCallback"
+  [stickyHeader]="true"
   [sortable]="true">
   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
     (onClick)="complimentEvergreen($event)" [disableOnRows]="notOneSelectedRow">
@@ -201,6 +202,29 @@
 
 <br/><br/>
 
+<h4>Grid with filtering</h4>
+<eg-grid #acpGrid idlClass="acp"
+  [dataSource]="acpSource"
+  [filterable]="true"
+  [sortable]="true"
+  [showLinkSelectors]="true"
+  [stickyHeader]="true"
+  showFields="barcode,location,circ_lib,price,dummy_title,create_date"
+>
+  <eg-grid-toolbar-action label="Edit Selected" i18n-label [action]="editSelected">
+  </eg-grid-toolbar-action>
+  <eg-grid-column [sortable]="true" [filterable]="false"  path="barcode"></eg-grid-column>
+  <eg-grid-column [sortable]="true" path="circ_lib"></eg-grid-column>
+  <eg-grid-column [sortable]="true" path="price"></eg-grid-column>
+  <eg-grid-column [sortable]="true" path="dummy_title"></eg-grid-column>
+  <eg-grid-column [sortable]="true" path="create_date"></eg-grid-column>
+</eg-grid>
+
+<eg-fm-record-editor #acpEditDialog idlClass="acp" hiddenFields="call_number,creator,create_date,editor,edit_time,loan_duration,fine_level,dummy_author,dummy_isbn,ref,floating,holdable,circ_as_type,active_date,mint_condition,cost,deleted,deposit,deposit_amount,circulate,status_changed_time,copy_number">
+</eg-fm-record-editor>
+<eg-string #successString text="Updated succeeded!" i18n-text></eg-string>
+<eg-string #updatedFailedString text="Updated failed!" i18n-text></eg-string>
+
 <h4>PCRUD auto flesh and FormatService detection</h4>
 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 

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 d3410b6..0fd1664 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
@@ -13,10 +13,12 @@ import {Pager} from '@eg/share/util/pager';
 import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
 import {PrintService} from '@eg/share/print/print.service';
 import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
-import {FormatService} from '@eg/core/format.service';
 import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component';
 import {FormGroup, FormControl} from '@angular/forms';
 import {ConfirmDialogComponent} from '@eg/share/dialog/confirm.component';
+import {FormatService} from '@eg/core/format.service';
+import {StringComponent} from '@eg/share/string/string.component';
+import {GridComponent} from '@eg/share/grid/grid.component';
 
 @Component({
   templateUrl: 'sandbox.component.html'
@@ -53,6 +55,12 @@ export class SandboxComponent implements OnInit {
     cbAsyncSource: (term: string) => Observable<ComboboxEntry>;
 
     btSource: GridDataSource = new GridDataSource();
+    acpSource: GridDataSource = new GridDataSource();
+    editSelected: (rows: IdlObject[]) => void;
+    @ViewChild('acpGrid') acpGrid: GridComponent;
+    @ViewChild('acpEditDialog') editDialog: FmRecordEditorComponent;
+    @ViewChild('successString') successString: StringComponent;
+    @ViewChild('updateFailedString') updateFailedString: StringComponent;
     world = 'world'; // for local template version
     btGridTestContext: any = {hello : this.world};
 
@@ -157,6 +165,50 @@ export class SandboxComponent implements OnInit {
             }));
         };
 
+        this.acpSource.getRows = (pager: Pager, sort: any[]) => {
+            const orderBy: any = {acp: 'id'};
+            if (sort.length) {
+                orderBy.acp = sort[0].name + ' ' + sort[0].dir;
+            }
+
+            // base query to grab everything
+            const base: Object = {};
+            base[this.idl.classes['acp'].pkey] = {'!=' : null};
+            const query: any = new Array();
+            query.push(base);
+
+            // and add any filters
+            Object.keys(this.acpSource.filters).forEach(key => {
+                Object.keys(this.acpSource.filters[key]).forEach(key2 => {
+                    query.push(this.acpSource.filters[key][key2]);
+                });
+            });
+            return this.pcrud.search('acp',
+                query, {
+                flesh: 1,
+                flesh_fields: {acp: ['location']},
+                offset: pager.offset,
+                limit: pager.limit,
+                order_by: orderBy
+            });
+        };
+
+        this.editSelected = (idlThings: IdlObject[]) => {
+
+            // Edit each IDL thing one at a time
+            const editOneThing = (thing: IdlObject) => {
+                if (!thing) { return; }
+
+                this.showEditDialog(thing).then(
+                    () => editOneThing(idlThings.shift()));
+            };
+
+            editOneThing(idlThings.shift());
+        };
+        this.acpGrid.onRowActivate.subscribe(
+            (acpRec: IdlObject) => { this.showEditDialog(acpRec); }
+        );
+
         this.complimentEvergreen = (rows: IdlObject[]) => alert('Evergreen is great!');
         this.notOneSelectedRow = (rows: IdlObject[]) => (rows.length !== 1);
 
@@ -287,6 +339,23 @@ export class SandboxComponent implements OnInit {
       this.numConfirmDialog.open();
     }
 
+    showEditDialog(idlThing: IdlObject) {
+        this.editDialog.mode = 'update';
+        this.editDialog.recId = idlThing['id']();
+        return this.editDialog.open({size: 'lg'}).then(
+            ok => {
+                this.successString.current()
+                    .then(str => this.toast.success(str));
+                this.acpGrid.reloadSansPagerReset();
+            },
+            rejection => {
+                if (!rejection.dismissed) {
+                    this.updateFailedString.current()
+                        .then(str => this.toast.danger(str));
+                }
+            }
+        );
+    }
 }