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

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