LP1858138 Sandbox example of simple grid filtering
authorBill Erickson <berickxx@gmail.com>
Thu, 2 Jan 2020 21:31:31 +0000 (16:31 -0500)
committerBill Erickson <berickxx@gmail.com>
Fri, 3 Jan 2020 19:28:24 +0000 (14:28 -0500)
Adds a trimmed down grid example demonstrating consistent filtering and
link selector display for auto and manual fields without requiring any
additional grid markup to define basic column behevior.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts

index ed1b581..26da699 100644 (file)
   </div>
 </div>
 
+<div class="mt-4 mb-4">
+  <h4>Grid Stock Selector Display and Filtering</h4>
+  <eg-grid #eventsGrid idlClass="atevdef"
+    [dataSource]="eventsDataSource"
+    showFields="name,hook,validator,reactor"
+    [sortable]="true" [filterable]="true">
+    <!-- demo how explicit fields and auto fields support link field selector
+         display and filtering consisently without additional biolerplate -->
+    <eg-grid-column name="name"></eg-grid-column>
+    <eg-grid-column name="hook"></eg-grid-column>
+  </eg-grid>
+</div>
index 0dc8ee0..b295fce 100644 (file)
@@ -63,6 +63,7 @@ export class SandboxComponent implements OnInit {
 
     btSource: GridDataSource = new GridDataSource();
     acpSource: GridDataSource = new GridDataSource();
+    eventsDataSource: GridDataSource = new GridDataSource();
     editSelected: (rows: IdlObject[]) => void;
     @ViewChild('acpGrid', { static: true }) acpGrid: GridComponent;
     @ViewChild('acpEditDialog', { static: true }) editDialog: FmRecordEditorComponent;
@@ -228,6 +229,33 @@ export class SandboxComponent implements OnInit {
             });
         };
 
+        this.eventsDataSource.getRows = (pager: Pager, sort: any[]) => {
+
+            const orderEventsBy: any = {atevdef: 'name'};
+            if (sort.length) {
+                orderEventsBy.atevdef = sort[0].name + ' ' + sort[0].dir;
+            }
+
+            const base: Object = {};
+            base[this.idl.classes['atevdef'].pkey] = {'!=' : null};
+            const query: any = new Array();
+            query.push(base);
+
+            Object.keys(this.eventsDataSource.filters).forEach(key => {
+                Object.keys(this.eventsDataSource.filters[key]).forEach(key2 => {
+                    query.push(this.eventsDataSource.filters[key][key2]);
+                });
+            });
+
+            return this.pcrud.search('atevdef', query, {
+                flesh: 1,
+                flesh_fields: {atevdef: ['hook', 'validator', 'reactor']},
+                offset: pager.offset,
+                limit: pager.limit,
+                order_by: orderEventsBy
+            });
+        };
+
         this.editSelected = (idlThings: IdlObject[]) => {
 
             // Edit each IDL thing one at a time