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

   1 import {Component, Input, Output, OnInit, AfterViewInit, EventEmitter,
   2     OnDestroy, HostListener, ViewEncapsulation} from '@angular/core';
   3 import {Subscription} from 'rxjs';
   4 import {IdlService} from '@eg/core/idl.service';
   5 import {OrgService} from '@eg/core/org.service';
   6 import {ServerStoreService} from '@eg/core/server-store.service';
   7 import {FormatService} from '@eg/core/format.service';
   8 import {GridContext, GridColumn, GridDataSource, GridRowFlairEntry} from './grid';
   9
  10 /**
  11  * Main grid entry point.
  12  */
  13
  14 @Component({
  15   selector: 'eg-grid',
  16   templateUrl: './grid.component.html',
  17   styleUrls: ['grid.component.css'],
  18   // share grid css globally once imported so all grid component CSS
  19   // can live in grid.component.css and to avoid multiple copies of
  20   // the CSS when multiple grids are displayed.
  21   encapsulation: ViewEncapsulation.None
  22 })
  23
  24 export class GridComponent implements OnInit, AfterViewInit, OnDestroy {
  25
  26     // Source of row data.
  27     @Input() dataSource: GridDataSource;
  28
  29     // IDL class for auto-generation of columns
  30     @Input() idlClass: string;
  31
  32     // True if any columns are sortable
  33     @Input() sortable: boolean;
  34
  35     // True if the grid supports sorting of multiple columns at once
  36     @Input() multiSortable: boolean;
  37
  38     // If true, grid sort requests only operate on data that
  39     // already exists in the grid data source -- no row fetching.
  40     // The assumption is all data is already available.
  41     @Input() useLocalSort: boolean;
  42
  43     // Storage persist key / per-grid-type unique identifier
  44     // The value is prefixed with 'eg.grid.'
  45     @Input() persistKey: string;
  46
  47     @Input() disableSelect: boolean;
  48
  49     // Prevent selection of multiple rows
  50     @Input() disableMultiSelect: boolean;
  51
  52     // Show an extra column in the grid where the caller can apply
  53     // row-specific flair (material icons).
  54     @Input() rowFlairIsEnabled: boolean;
  55
  56     // Returns a material icon name to display in the flar column
  57     // (if enabled) for the given row.
  58     @Input() rowFlairCallback: (row: any) => GridRowFlairEntry;
  59
  60     // Returns a space-separated list of CSS class names to apply to
  61     // a given row
  62     @Input() rowClassCallback: (row: any) => string;
  63
  64     // Returns a space-separated list of CSS class names to apply to
  65     // a given cell or all cells in a column.
  66     @Input() cellClassCallback: (row: any, col: GridColumn) => string;
  67
  68     // comma-separated list of fields to show by default.
  69     // This field takes precedence over hideFields.
  70     // When a value is applied, any field not in this list will
  71     // be hidden.
  72     @Input() showFields: string;
  73
  74     // comma-separated list of fields to hide.
  75     // This does not imply all other fields should be visible, only that
  76     // the selected fields will be hidden.
  77     @Input() hideFields: string;
  78
  79     // Allow the caller to jump directly to a specific page of
  80     // grid data.
  81     @Input() pageOffset: number;
  82
  83     // If true and an idlClass is specificed, the grid assumes
  84     // datatype=link fields that link to classes which define a selector
  85     // are fleshed with the linked object.  And, instead of displaying
  86     // the raw field value, displays the selector value from the linked
  87     // object.  The caller is responsible for fleshing the appropriate
  88     // fields in the GridDataSource getRows handler.
  89     //
  90     // This only applies to auto-generated columns.
  91     //
  92     // For example, idlClass="aou" and field="ou_type", the display
  93     // value will be ou_type().name() since "name" is the selector
  94     // field on the "aout" class.
  95     @Input() showLinkSelectors: boolean;
  96
  97     context: GridContext;
  98
  99     // These events are emitted from our grid-body component.
 100     // They are defined here for ease of access to the caller.
 101     @Output() onRowActivate: EventEmitter<any>;
 102     @Output() onRowClick: EventEmitter<any>;
 103
 104     constructor(
 105         private idl: IdlService,
 106         private org: OrgService,
 107         private store: ServerStoreService,
 108         private format: FormatService
 109     ) {
 110         this.context =
 111             new GridContext(this.idl, this.org, this.store, this.format);
 112         this.onRowActivate = new EventEmitter<any>();
 113         this.onRowClick = new EventEmitter<any>();
 114     }
 115
 116     ngOnInit() {
 117
 118         if (!this.dataSource) {
 119             throw new Error('<eg-grid/> requires a [dataSource]');
 120         }
 121
 122         this.context.idlClass = this.idlClass;
 123         this.context.dataSource = this.dataSource;
 124         this.context.persistKey = this.persistKey;
 125         this.context.isSortable = this.sortable === true;
 126         this.context.isMultiSortable = this.multiSortable === true;
 127         this.context.useLocalSort = this.useLocalSort === true;
 128         this.context.disableSelect = this.disableSelect === true;
 129         this.context.showLinkSelectors = this.showLinkSelectors === true;
 130         this.context.disableMultiSelect = this.disableMultiSelect === true;
 131         this.context.rowFlairIsEnabled = this.rowFlairIsEnabled  === true;
 132         this.context.rowFlairCallback = this.rowFlairCallback;
 133         if (this.showFields) {
 134             this.context.defaultVisibleFields = this.showFields.split(',');
 135         }
 136         if (this.hideFields) {
 137             this.context.defaultHiddenFields = this.hideFields.split(',');
 138         }
 139
 140         if (this.pageOffset) {
 141             this.context.pager.offset = this.pageOffset;
 142         }
 143
 144         // TS doesn't seem to like: let foo = bar || () => '';
 145         this.context.rowClassCallback =
 146             this.rowClassCallback || function () { return ''; };
 147         this.context.cellClassCallback =
 148             this.cellClassCallback || function() { return ''; };
 149
 150         this.context.init();
 151     }
 152
 153     ngAfterViewInit() {
 154         this.context.initData();
 155     }
 156
 157     ngOnDestroy() {
 158         this.context.destroy();
 159     }
 160
 161     reload() {
 162         this.context.reload();
 163     }
 164 }
 165
 166
 167