Open-ILS/src/eg2/src/app/share/grid/grid.ts

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