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';
11 * Main grid entry point.
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
24 export class GridComponent implements OnInit, AfterViewInit, OnDestroy {
26 // Source of row data.
27 @Input() dataSource: GridDataSource;
29 // IDL class for auto-generation of columns
30 @Input() idlClass: string;
32 // True if any columns are sortable
33 @Input() sortable: boolean;
35 // True if the grid supports sorting of multiple columns at once
36 @Input() multiSortable: boolean;
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;
43 // Storage persist key / per-grid-type unique identifier
44 // The value is prefixed with 'eg.grid.'
45 @Input() persistKey: string;
47 @Input() disableSelect: boolean;
49 // Prevent selection of multiple rows
50 @Input() disableMultiSelect: boolean;
52 // Show an extra column in the grid where the caller can apply
53 // row-specific flair (material icons).
54 @Input() rowFlairIsEnabled: boolean;
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;
60 // Returns a space-separated list of CSS class names to apply to
62 @Input() rowClassCallback: (row: any) => string;
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;
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
72 @Input() showFields: string;
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;
79 // Allow the caller to jump directly to a specific page of
81 @Input() pageOffset: number;
85 // These events are emitted from our grid-body component.
86 // They are defined here for ease of access to the caller.
87 @Output() onRowActivate: EventEmitter<any>;
88 @Output() onRowClick: EventEmitter<any>;
91 private idl: IdlService,
92 private org: OrgService,
93 private store: ServerStoreService,
94 private format: FormatService
97 new GridContext(this.idl, this.org, this.store, this.format);
98 this.onRowActivate = new EventEmitter<any>();
99 this.onRowClick = new EventEmitter<any>();
104 if (!this.dataSource) {
105 throw new Error('<eg-grid/> requires a [dataSource]');
108 this.context.idlClass = this.idlClass;
109 this.context.dataSource = this.dataSource;
110 this.context.persistKey = this.persistKey;
111 this.context.isSortable = this.sortable === true;
112 this.context.isMultiSortable = this.multiSortable === true;
113 this.context.useLocalSort = this.useLocalSort === true;
114 this.context.disableSelect = this.disableSelect === true;
115 this.context.disableMultiSelect = this.disableMultiSelect === true;
116 this.context.rowFlairIsEnabled = this.rowFlairIsEnabled === true;
117 this.context.rowFlairCallback = this.rowFlairCallback;
118 if (this.showFields) {
119 this.context.defaultVisibleFields = this.showFields.split(',');
121 if (this.hideFields) {
122 this.context.defaultHiddenFields = this.hideFields.split(',');
125 if (this.pageOffset) {
126 this.context.pager.offset = this.pageOffset;
129 // TS doesn't seem to like: let foo = bar || () => '';
130 this.context.rowClassCallback =
131 this.rowClassCallback || function () { return ''; };
132 this.context.cellClassCallback =
133 this.cellClassCallback || function() { return ''; };
139 this.context.initData();
143 this.context.destroy();
147 this.context.reload();