LP#1801984 Upgrading Angular 6 to Angular 7
[Evergreen.git] / Open-ILS / src / eg2 / src / app / share / grid / grid.ts
1 /**
2  * Collection of grid related classses and interfaces.
3  */
4 import {TemplateRef} from '@angular/core';
5 import {Observable, Subscription} from 'rxjs';
6 import {IdlService, IdlObject} from '@eg/core/idl.service';
7 import {OrgService} from '@eg/core/org.service';
8 import {ServerStoreService} from '@eg/core/server-store.service';
9 import {FormatService} from '@eg/core/format.service';
10 import {Pager} from '@eg/share/util/pager';
11
12 const MAX_ALL_ROW_COUNT = 10000;
13
14 export class GridColumn {
15     name: string;
16     path: string;
17     label: string;
18     flex: number;
19     align: string;
20     hidden: boolean;
21     visible: boolean;
22     sort: number;
23     idlClass: string;
24     idlFieldDef: any;
25     datatype: string;
26     datePlusTime: boolean;
27     cellTemplate: TemplateRef<any>;
28     cellContext: any;
29     isIndex: boolean;
30     isDragTarget: boolean;
31     isSortable: boolean;
32     isMultiSortable: boolean;
33     comparator: (valueA: any, valueB: any) => number;
34
35     // True if the column was automatically generated.
36     isAuto: boolean;
37
38     flesher: (obj: any, col: GridColumn, item: any) => any;
39
40     getCellContext(row: any) {
41         return {
42           col: this,
43           row: row,
44           userContext: this.cellContext
45         };
46     }
47 }
48
49 export class GridColumnSet {
50     columns: GridColumn[];
51     idlClass: string;
52     indexColumn: GridColumn;
53     isSortable: boolean;
54     isMultiSortable: boolean;
55     stockVisible: string[];
56     idl: IdlService;
57     defaultHiddenFields: string[];
58     defaultVisibleFields: string[];
59
60     constructor(idl: IdlService, idlClass?: string) {
61         this.idl = idl;
62         this.columns = [];
63         this.stockVisible = [];
64         this.idlClass = idlClass;
65     }
66
67     add(col: GridColumn) {
68
69         this.applyColumnDefaults(col);
70
71         if (!this.insertColumn(col)) {
72             // Column was rejected as a duplicate.
73             return;
74         }
75
76         if (col.isIndex) { this.indexColumn = col; }
77
78         // track which fields are visible on page load.
79         if (col.visible) {
80             this.stockVisible.push(col.name);
81         }
82
83         this.applyColumnSortability(col);
84     }
85
86     // Returns true if the new column was inserted, false otherwise.
87     // Declared columns take precedence over auto-generated columns
88     // when collisions occur.
89     // Declared columns are inserted in front of auto columns.
90     insertColumn(col: GridColumn): boolean {
91
92         if (col.isAuto) {
93             if (this.getColByName(col.name)) {
94                 // New auto-generated column conflicts with existing
95                 // column.  Skip it.
96                 return false;
97             } else {
98                 // No collisions.  Add to the end of the list
99                 this.columns.push(col);
100                 return true;
101             }
102         }
103
104         // Adding a declared column.
105
106         // Check for dupes.
107         for (let idx = 0; idx < this.columns.length; idx++) {
108             const testCol = this.columns[idx];
109             if (testCol.name === col.name) { // match found
110                 if (testCol.isAuto) {
111                     // new column takes precedence, remove the existing column.
112                     this.columns.splice(idx, 1);
113                     break;
114                 } else {
115                     // New column does not take precedence.  Avoid
116                     // inserting it.
117                     return false;
118                 }
119             }
120         }
121
122         // Delcared columns are inserted just before the first auto-column
123         for (let idx = 0; idx < this.columns.length; idx++) {
124             const testCol = this.columns[idx];
125             if (testCol.isAuto) {
126                 if (idx === 0) {
127                     this.columns.unshift(col);
128                 } else {
129                     this.columns.splice(idx - 1, 0, col);
130                 }
131                 return true;
132             }
133         }
134
135         // No insertion point found.  Toss the new column on the end.
136         this.columns.push(col);
137         return true;
138     }
139
140     getColByName(name: string): GridColumn {
141         return this.columns.filter(c => c.name === name)[0];
142     }
143
144     idlInfoFromDotpath(dotpath: string): any {
145         if (!dotpath || !this.idlClass) { return null; }
146
147         let idlParent;
148         let idlField;
149         let idlClass = this.idl.classes[this.idlClass];
150
151         const pathParts = dotpath.split(/\./);
152
153         for (let i = 0; i < pathParts.length; i++) {
154             const part = pathParts[i];
155             idlParent = idlField;
156             idlField = idlClass.field_map[part];
157
158             if (idlField) {
159                 if (idlField['class'] && (
160                     idlField.datatype === 'link' ||
161                     idlField.datatype === 'org_unit')) {
162                     idlClass = this.idl.classes[idlField['class']];
163                 }
164             } else {
165                 return null;
166             }
167         }
168
169         return {
170             idlParent: idlParent,
171             idlField : idlField,
172             idlClass : idlClass
173         };
174     }
175
176
177     reset() {
178         this.columns.forEach(col => {
179             col.flex = 2;
180             col.sort = 0;
181             col.align = 'left';
182             col.visible = this.stockVisible.includes(col.name);
183         });
184     }
185
186     applyColumnDefaults(col: GridColumn) {
187
188         if (!col.idlFieldDef && col.path) {
189             const idlInfo = this.idlInfoFromDotpath(col.path);
190             if (idlInfo) {
191                 col.idlFieldDef = idlInfo.idlField;
192                 if (!col.label) {
193                     col.label = col.idlFieldDef.label || col.idlFieldDef.name;
194                     col.datatype = col.idlFieldDef.datatype;
195                 }
196             }
197         }
198
199         if (!col.name) { col.name = col.path; }
200         if (!col.flex) { col.flex = 2; }
201         if (!col.align) { col.align = 'left'; }
202         if (!col.label) { col.label = col.name; }
203         if (!col.datatype) { col.datatype = 'text'; }
204
205         col.visible = !col.hidden;
206     }
207
208     applyColumnSortability(col: GridColumn) {
209         // column sortability defaults to the sortability of the column set.
210         if (col.isSortable === undefined && this.isSortable) {
211             col.isSortable = true;
212         }
213
214         if (col.isMultiSortable === undefined && this.isMultiSortable) {
215             col.isMultiSortable = true;
216         }
217
218         if (col.isMultiSortable) {
219             col.isSortable = true;
220         }
221     }
222
223     displayColumns(): GridColumn[] {
224         return this.columns.filter(c => c.visible);
225     }
226
227     insertBefore(source: GridColumn, target: GridColumn) {
228         let targetIdx = -1;
229         let sourceIdx = -1;
230         this.columns.forEach((col, idx) => {
231             if (col.name === target.name) { targetIdx = idx; }});
232
233         this.columns.forEach((col, idx) => {
234             if (col.name === source.name) { sourceIdx = idx; }});
235
236         if (sourceIdx >= 0) {
237             this.columns.splice(sourceIdx, 1);
238         }
239
240         this.columns.splice(targetIdx, 0, source);
241     }
242
243     // Move visible columns to the front of the list.
244     moveVisibleToFront() {
245         const newCols = this.displayColumns();
246         this.columns.forEach(col => {
247             if (!col.visible) { newCols.push(col); }});
248         this.columns = newCols;
249     }
250
251     moveColumn(col: GridColumn, diff: number) {
252         let srcIdx, targetIdx;
253
254         this.columns.forEach((c, i) => {
255           if (c.name === col.name) { srcIdx = i; }
256         });
257
258         targetIdx = srcIdx + diff;
259         if (targetIdx < 0) {
260             targetIdx = 0;
261         } else if (targetIdx >= this.columns.length) {
262             // Target index follows the last visible column.
263             let lastVisible = 0;
264             this.columns.forEach((c, idx) => {
265                 if (c.visible) { lastVisible = idx; }
266             });
267
268             // When moving a column (down) causes one or more
269             // visible columns to shuffle forward, our column
270             // moves into the slot of the last visible column.
271             // Otherwise, put it into the slot directly following
272             // the last visible column.
273             targetIdx = srcIdx <= lastVisible ? lastVisible : lastVisible + 1;
274         }
275
276         // Splice column out of old position, insert at new position.
277         this.columns.splice(srcIdx, 1);
278         this.columns.splice(targetIdx, 0, col);
279     }
280
281     compileSaveObject(): GridColumnPersistConf[] {
282         // only store information about visible columns.
283         // scrunch the data down to just the needed info.
284         return this.displayColumns().map(col => {
285             const c: GridColumnPersistConf = {name : col.name};
286             if (col.align !== 'left') { c.align = col.align; }
287             if (col.flex !== 2) { c.flex = Number(col.flex); }
288             if (Number(col.sort)) { c.sort = Number(c.sort); }
289             return c;
290         });
291     }
292
293     applyColumnSettings(conf: GridColumnPersistConf[]) {
294
295         if (!conf || conf.length === 0) {
296             // No configuration is available, but we have a list of
297             // fields to show or hide by default
298
299             if (this.defaultVisibleFields) {
300                 this.columns.forEach(col => {
301                     if (this.defaultVisibleFields.includes(col.name)) {
302                         col.visible = true;
303                     } else {
304                         col.visible = false;
305                     }
306                 });
307
308             } else if (this.defaultHiddenFields) {
309                 this.defaultHiddenFields.forEach(name => {
310                     const col = this.getColByName(name);
311                     if (col) {
312                         col.visible = false;
313                     }
314                 });
315             }
316
317             return;
318         }
319
320         const newCols = [];
321
322         conf.forEach(colConf => {
323             const col = this.getColByName(colConf.name);
324             if (!col) { return; } // no such column in this grid.
325
326             col.visible = true;
327             if (colConf.align) { col.align = colConf.align; }
328             if (colConf.flex)  { col.flex = Number(colConf.flex); }
329             if (colConf.sort)  { col.sort = Number(colConf.sort); }
330
331             // Add to new columns array, avoid dupes.
332             if (newCols.filter(c => c.name === col.name).length === 0) {
333                 newCols.push(col);
334             }
335         });
336
337         // columns which are not expressed within the saved
338         // configuration are marked as non-visible and
339         // appended to the end of the new list of columns.
340         this.columns.forEach(c => {
341             if (conf.filter(cf => cf.name === c.name).length === 0) {
342                 c.visible = false;
343                 newCols.push(c);
344             }
345         });
346
347         this.columns = newCols;
348     }
349 }
350
351
352 export class GridRowSelector {
353     indexes: {[string: string]: boolean};
354
355     constructor() {
356         this.clear();
357     }
358
359     // Returns true if all of the requested indexes exist in the selector.
360     contains(index: string | string[]): boolean {
361         const indexes = [].concat(index);
362         for (let i = 0; i < indexes.length; i++) { // early exit
363             if (!this.indexes[indexes[i]]) {
364                 return false;
365             }
366         }
367         return true;
368     }
369
370     select(index: string | string[]) {
371         const indexes = [].concat(index);
372         indexes.forEach(i => this.indexes[i] = true);
373     }
374
375     deselect(index: string | string[]) {
376         const indexes = [].concat(index);
377         indexes.forEach(i => delete this.indexes[i]);
378     }
379
380     // Returns the list of selected index values.
381     // in some contexts (template checkboxes) the value for an index is
382     // set to false to deselect instead of having it removed (via deselect()).
383     selected() {
384         return Object.keys(this.indexes).filter(
385             ind => Boolean(this.indexes[ind]));
386     }
387
388     isEmpty(): boolean {
389         return this.selected().length === 0;
390     }
391
392     clear() {
393         this.indexes = {};
394     }
395 }
396
397 export interface GridRowFlairEntry {
398     icon: string;   // name of material icon
399     title: string;  // tooltip string
400 }
401
402 export class GridColumnPersistConf {
403     name: string;
404     flex?: number;
405     sort?: number;
406     align?: string;
407 }
408
409 export class GridPersistConf {
410     version: number;
411     limit: number;
412     columns: GridColumnPersistConf[];
413 }
414
415 export class GridContext {
416
417     pager: Pager;
418     idlClass: string;
419     isSortable: boolean;
420     isMultiSortable: boolean;
421     useLocalSort: boolean;
422     persistKey: string;
423     disableMultiSelect: boolean;
424     dataSource: GridDataSource;
425     columnSet: GridColumnSet;
426     rowSelector: GridRowSelector;
427     toolbarButtons: GridToolbarButton[];
428     toolbarCheckboxes: GridToolbarCheckbox[];
429     toolbarActions: GridToolbarAction[];
430     lastSelectedIndex: any;
431     pageChanges: Subscription;
432     rowFlairIsEnabled: boolean;
433     rowFlairCallback: (row: any) => GridRowFlairEntry;
434     rowClassCallback: (row: any) => string;
435     cellClassCallback: (row: any, col: GridColumn) => string;
436     defaultVisibleFields: string[];
437     defaultHiddenFields: string[];
438     overflowCells: boolean;
439
440     // Services injected by our grid component
441     idl: IdlService;
442     org: OrgService;
443     store: ServerStoreService;
444     format: FormatService;
445
446     constructor(
447         idl: IdlService,
448         org: OrgService,
449         store: ServerStoreService,
450         format: FormatService) {
451
452         this.idl = idl;
453         this.org = org;
454         this.store = store;
455         this.format = format;
456         this.pager = new Pager();
457         this.pager.limit = 10;
458         this.rowSelector = new GridRowSelector();
459         this.toolbarButtons = [];
460         this.toolbarCheckboxes = [];
461         this.toolbarActions = [];
462     }
463
464     init() {
465         this.columnSet = new GridColumnSet(this.idl, this.idlClass);
466         this.columnSet.isSortable = this.isSortable === true;
467         this.columnSet.isMultiSortable = this.isMultiSortable === true;
468         this.columnSet.defaultHiddenFields = this.defaultHiddenFields;
469         this.columnSet.defaultVisibleFields = this.defaultVisibleFields;
470         this.generateColumns();
471     }
472
473     // Load initial settings and data.
474     initData() {
475         this.applyGridConfig()
476         .then(ok => this.dataSource.requestPage(this.pager))
477         .then(ok => this.listenToPager());
478     }
479
480     destroy() {
481         this.ignorePager();
482     }
483
484     applyGridConfig(): Promise<void> {
485         return this.getGridConfig(this.persistKey)
486         .then(conf => {
487             let columns = [];
488             if (conf) {
489                 columns = conf.columns;
490                 if (conf.limit) {
491                     this.pager.limit = conf.limit;
492                 }
493             }
494
495             // This is called regardless of the presence of saved
496             // settings so defaults can be applied.
497             this.columnSet.applyColumnSettings(columns);
498         });
499     }
500
501     reload() {
502         // Give the UI time to settle before reloading grid data.
503         // This can help when data retrieval depends on a value
504         // getting modified by an angular digest cycle.
505         setTimeout(() => {
506             this.pager.reset();
507             this.dataSource.reset();
508             this.dataSource.requestPage(this.pager);
509         });
510     }
511
512     // Sort the existing data source instead of requesting sorted
513     // data from the client.  Reset pager to page 1.  As with reload(),
514     // give the client a chance to setting before redisplaying.
515     sortLocal() {
516         setTimeout(() => {
517             this.pager.reset();
518             this.sortLocalData();
519             this.dataSource.requestPage(this.pager);
520         });
521     }
522
523     // Subscribe or unsubscribe to page-change events from the pager.
524     listenToPager() {
525         if (this.pageChanges) { return; }
526         this.pageChanges = this.pager.onChange$.subscribe(
527             val => this.dataSource.requestPage(this.pager));
528     }
529
530     ignorePager() {
531         if (!this.pageChanges) { return; }
532         this.pageChanges.unsubscribe();
533         this.pageChanges = null;
534     }
535
536     // Sort data in the data source array
537     sortLocalData() {
538
539         const sortDefs = this.dataSource.sort.map(sort => {
540             const def = {
541                 name: sort.name,
542                 dir: sort.dir,
543                 col: this.columnSet.getColByName(sort.name)
544             };
545
546             if (!def.col.comparator) {
547                 def.col.comparator = (a, b) => {
548                     if (a < b) { return -1; }
549                     if (a > b) { return 1; }
550                     return 0;
551                 };
552             }
553
554             return def;
555         });
556
557         this.dataSource.data.sort((rowA, rowB) => {
558
559             for (let idx = 0; idx < sortDefs.length; idx++) {
560                 const sortDef = sortDefs[idx];
561
562                 const valueA = this.getRowColumnValue(rowA, sortDef.col);
563                 const valueB = this.getRowColumnValue(rowB, sortDef.col);
564
565                 if (valueA === '' && valueB === '') { continue; }
566                 if (valueA === '' && valueB !== '') { return 1; }
567                 if (valueA !== '' && valueB === '') { return -1; }
568
569                 const diff = sortDef.col.comparator(valueA, valueB);
570                 if (diff === 0) { continue; }
571
572                 console.log(valueA, valueB, diff);
573
574                 return sortDef.dir === 'DESC' ? -diff : diff;
575             }
576
577             return 0; // No differences found.
578         });
579     }
580
581     getRowIndex(row: any): any {
582         const col = this.columnSet.indexColumn;
583         if (!col) {
584             throw new Error('grid index column required');
585         }
586         return this.getRowColumnValue(row, col);
587     }
588
589     // Returns position in the data source array of the row with
590     // the provided index.
591     getRowPosition(index: any): number {
592         // for-loop for early exit
593         for (let idx = 0; idx < this.dataSource.data.length; idx++) {
594             const row = this.dataSource.data[idx];
595             if (row !== undefined && index === this.getRowIndex(row)) {
596                 return idx;
597             }
598         }
599     }
600
601     // Return the row with the provided index.
602     getRowByIndex(index: any): any {
603         for (let idx = 0; idx < this.dataSource.data.length; idx++) {
604             const row = this.dataSource.data[idx];
605             if (row !== undefined && index === this.getRowIndex(row)) {
606                 return row;
607             }
608         }
609     }
610
611     // Returns all selected rows, regardless of whether they are
612     // currently visible in the grid display.
613     getSelectedRows(): any[] {
614         const selected = [];
615         this.rowSelector.selected().forEach(index => {
616             const row = this.getRowByIndex(index);
617             if (row) {
618                 selected.push(row);
619             }
620         });
621         return selected;
622     }
623
624     getRowColumnValue(row: any, col: GridColumn): string {
625         let val;
626         if (col.name in row) {
627             val = this.getObjectFieldValue(row, col.name);
628         } else {
629             if (col.path) {
630                 val = this.nestedItemFieldValue(row, col);
631             }
632         }
633
634         return this.format.transform({
635             value: val,
636             datatype: col.datatype,
637             datePlusTime: Boolean(col.datePlusTime)
638         });
639     }
640
641     getObjectFieldValue(obj: any, name: string): any {
642         if (typeof obj[name] === 'function') {
643             return obj[name]();
644         } else {
645             return obj[name];
646         }
647     }
648
649     nestedItemFieldValue(obj: any, col: GridColumn): string {
650
651         let idlField;
652         let idlClassDef;
653         const original = obj;
654         const steps = col.path.split('.');
655
656         for (let i = 0; i < steps.length; i++) {
657             const step = steps[i];
658
659             if (typeof obj !== 'object') {
660                 // We have run out of data to step through before
661                 // reaching the end of the path.  Conclude fleshing via
662                 // callback if provided then exit.
663                 if (col.flesher && obj !== undefined) {
664                     return col.flesher(obj, col, original);
665                 }
666                 return obj;
667             }
668
669             const class_ = obj.classname;
670             if (class_ && (idlClassDef = this.idl.classes[class_])) {
671                 idlField = idlClassDef.field_map[step];
672             }
673
674             obj = this.getObjectFieldValue(obj, step);
675         }
676
677         // We found a nested IDL object which may or may not have
678         // been configured as a top-level column.  Flesh the column
679         // metadata with our newly found IDL info.
680         if (idlField) {
681             if (!col.datatype) {
682                 col.datatype = idlField.datatype;
683             }
684             if (!col.label) {
685                 col.label = idlField.label || idlField.name;
686             }
687         }
688
689         return obj;
690     }
691
692
693     getColumnTextContent(row: any, col: GridColumn): string {
694         if (col.cellTemplate) {
695             // TODO
696             // Extract the text content from the rendered template.
697         } else {
698             return this.getRowColumnValue(row, col);
699         }
700     }
701
702     selectOneRow(index: any) {
703         this.rowSelector.clear();
704         this.rowSelector.select(index);
705         this.lastSelectedIndex = index;
706     }
707
708     // selects or deselects an item, without affecting the others.
709     // returns true if the item is selected; false if de-selected.
710     toggleSelectOneRow(index: any) {
711         if (this.rowSelector.contains(index)) {
712             this.rowSelector.deselect(index);
713             return false;
714         }
715
716         this.rowSelector.select(index);
717         return true;
718     }
719
720     selectRowByPos(pos: number) {
721         const row = this.dataSource.data[pos];
722         if (row) {
723             this.selectOneRow(this.getRowIndex(row));
724         }
725     }
726
727     selectPreviousRow() {
728         if (!this.lastSelectedIndex) { return; }
729         const pos = this.getRowPosition(this.lastSelectedIndex);
730         if (pos === this.pager.offset) {
731             this.toPrevPage().then(ok => this.selectLastRow(), err => {});
732         } else {
733             this.selectRowByPos(pos - 1);
734         }
735     }
736
737     selectNextRow() {
738         if (!this.lastSelectedIndex) { return; }
739         const pos = this.getRowPosition(this.lastSelectedIndex);
740         if (pos === (this.pager.offset + this.pager.limit - 1)) {
741             this.toNextPage().then(ok => this.selectFirstRow(), err => {});
742         } else {
743             this.selectRowByPos(pos + 1);
744         }
745     }
746
747     selectFirstRow() {
748         this.selectRowByPos(this.pager.offset);
749     }
750
751     selectLastRow() {
752         this.selectRowByPos(this.pager.offset + this.pager.limit - 1);
753     }
754
755     toPrevPage(): Promise<any> {
756         if (this.pager.isFirstPage()) {
757             return Promise.reject('on first');
758         }
759         // temp ignore pager events since we're calling requestPage manually.
760         this.ignorePager();
761         this.pager.decrement();
762         this.listenToPager();
763         return this.dataSource.requestPage(this.pager);
764     }
765
766     toNextPage(): Promise<any> {
767         if (this.pager.isLastPage()) {
768             return Promise.reject('on last');
769         }
770         // temp ignore pager events since we're calling requestPage manually.
771         this.ignorePager();
772         this.pager.increment();
773         this.listenToPager();
774         return this.dataSource.requestPage(this.pager);
775     }
776
777     getAllRows(): Promise<any> {
778         const pager = new Pager();
779         pager.offset = 0;
780         pager.limit = MAX_ALL_ROW_COUNT;
781         return this.dataSource.requestPage(pager);
782     }
783
784     // Returns a key/value pair object of visible column data as text.
785     getRowAsFlatText(row: any): any {
786         const flatRow = {};
787         this.columnSet.displayColumns().forEach(col => {
788             flatRow[col.name] =
789                 this.getColumnTextContent(row, col);
790         });
791         return flatRow;
792     }
793
794     getAllRowsAsText(): Observable<any> {
795         return Observable.create(observer => {
796             this.getAllRows().then(ok => {
797                 this.dataSource.data.forEach(row => {
798                     observer.next(this.getRowAsFlatText(row));
799                 });
800                 observer.complete();
801             });
802         });
803     }
804
805     gridToCsv(): Promise<string> {
806
807         let csvStr = '';
808         const columns = this.columnSet.displayColumns();
809
810         // CSV header
811         columns.forEach(col => {
812             csvStr += this.valueToCsv(col.label),
813             csvStr += ',';
814         });
815
816         csvStr = csvStr.replace(/,$/, '\n');
817
818         return new Promise(resolve => {
819             this.getAllRowsAsText().subscribe(
820                 row => {
821                     columns.forEach(col => {
822                         csvStr += this.valueToCsv(row[col.name]);
823                         csvStr += ',';
824                     });
825                     csvStr = csvStr.replace(/,$/, '\n');
826                 },
827                 err => {},
828                 ()  => resolve(csvStr)
829             );
830         });
831     }
832
833
834     // prepares a string for inclusion within a CSV document
835     // by escaping commas and quotes and removing newlines.
836     valueToCsv(str: string): string {
837         str = '' + str;
838         if (!str) { return ''; }
839         str = str.replace(/\n/g, '');
840         if (str.match(/\,/) || str.match(/"/)) {
841             str = str.replace(/"/g, '""');
842             str = '"' + str + '"';
843         }
844         return str;
845     }
846
847     generateColumns() {
848         if (!this.columnSet.idlClass) { return; }
849
850         const pkeyField = this.idl.classes[this.columnSet.idlClass].pkey;
851
852         // generate columns for all non-virtual fields on the IDL class
853         this.idl.classes[this.columnSet.idlClass].fields
854         .filter(field => !field.virtual)
855         .forEach(field => {
856             const col = new GridColumn();
857             col.name = field.name;
858             col.label = field.label || field.name;
859             col.idlFieldDef = field;
860             col.datatype = field.datatype;
861             col.isIndex = (field.name === pkeyField);
862             col.isAuto = true;
863             this.columnSet.add(col);
864         });
865     }
866
867     saveGridConfig(): Promise<any> {
868         if (!this.persistKey) {
869             throw new Error('Grid persistKey required to save columns');
870         }
871         const conf = new GridPersistConf();
872         conf.version = 2;
873         conf.limit = this.pager.limit;
874         conf.columns = this.columnSet.compileSaveObject();
875
876         return this.store.setItem('eg.grid.' + this.persistKey, conf);
877     }
878
879     // TODO: saveGridConfigAsOrgSetting(...)
880
881     getGridConfig(persistKey: string): Promise<GridPersistConf> {
882         if (!persistKey) { return Promise.resolve(null); }
883         return this.store.getItem('eg.grid.' + persistKey);
884     }
885 }
886
887
888 // Actions apply to specific rows
889 export class GridToolbarAction {
890     label: string;
891     action: (rows: any[]) => any;
892     disableOnRows: (rows: any[]) => boolean;
893 }
894
895 // Buttons are global actions
896 export class GridToolbarButton {
897     label: string;
898     action: () => any;
899     disabled: boolean;
900 }
901
902 export class GridToolbarCheckbox {
903     label: string;
904     onChange: (checked: boolean) => void;
905 }
906
907 export class GridDataSource {
908
909     data: any[];
910     sort: any[];
911     allRowsRetrieved: boolean;
912     getRows: (pager: Pager, sort: any[]) => Observable<any>;
913
914     constructor() {
915         this.sort = [];
916         this.reset();
917     }
918
919     reset() {
920         this.data = [];
921         this.allRowsRetrieved = false;
922     }
923
924     // called from the template -- no data fetching
925     getPageOfRows(pager: Pager): any[] {
926         if (this.data) {
927             return this.data.slice(
928                 pager.offset, pager.limit + pager.offset
929             ).filter(row => row !== undefined);
930         }
931         return [];
932     }
933
934     // called on initial component load and user action (e.g. paging, sorting).
935     requestPage(pager: Pager): Promise<any> {
936
937         if (
938             this.getPageOfRows(pager).length === pager.limit
939             // already have all data
940             || this.allRowsRetrieved
941             // have no way to get more data.
942             || !this.getRows
943         ) {
944             return Promise.resolve();
945         }
946
947         return new Promise((resolve, reject) => {
948             let idx = pager.offset;
949             return this.getRows(pager, this.sort).subscribe(
950                 row => this.data[idx++] = row,
951                 err => {
952                     console.error(`grid getRows() error ${err}`);
953                     reject(err);
954                 },
955                 ()  => {
956                     this.checkAllRetrieved(pager, idx);
957                     resolve();
958                 }
959             );
960         });
961     }
962
963     // See if the last getRows() call resulted in the final set of data.
964     checkAllRetrieved(pager: Pager, idx: number) {
965         if (this.allRowsRetrieved) { return; }
966
967         if (idx === 0 || idx < (pager.limit + pager.offset)) {
968             // last query returned nothing or less than one page.
969             // confirm we have all of the preceding pages.
970             if (!this.data.includes(undefined)) {
971                 this.allRowsRetrieved = true;
972                 pager.resultCount = this.data.length;
973             }
974         }
975     }
976 }
977
978