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