Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 1 | // TODO fininsh to import all methods from https://github.com/opencord/ng-xos-lib/blob/master/src/ui_components/dumbComponents/table/table.component.js |
| 2 | // TODO import tests |
| 3 | |
Matteo Scandolo | 035c593 | 2016-12-14 09:55:15 -0800 | [diff] [blame] | 4 | import './table.scss'; |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 5 | import * as _ from 'lodash'; |
| 6 | |
Matteo Scandolo | d58d504 | 2016-12-16 16:59:21 -0800 | [diff] [blame] | 7 | enum EXosTableColType { |
| 8 | 'boolean', |
| 9 | 'array', |
| 10 | 'object', |
| 11 | 'custom', |
| 12 | 'date' , |
| 13 | 'icon' |
| 14 | } |
| 15 | |
| 16 | export interface IXosTableColumn { |
| 17 | label: string; |
| 18 | prop: string; |
| 19 | type?: string; // understand why enum does not work |
| 20 | formatter?(item: any): string; |
| 21 | link?(item: any): string; |
| 22 | } |
| 23 | |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 24 | interface IXosTableCgfOrder { |
| 25 | reverse: boolean; |
| 26 | field: string; |
| 27 | } |
| 28 | |
| 29 | export interface IXosTableCfg { |
| 30 | columns: any[]; |
Matteo Scandolo | f2c3ed6 | 2016-12-15 14:32:50 -0800 | [diff] [blame] | 31 | order?: IXosTableCgfOrder; // | boolean; |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 32 | } |
| 33 | |
| 34 | class TableCtrl { |
| 35 | $inject = ['$onInit']; |
| 36 | |
| 37 | public columns: any[]; |
| 38 | public orderBy: string; |
| 39 | public reverse: boolean; |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 40 | private config: IXosTableCfg; |
| 41 | |
| 42 | |
| 43 | $onInit() { |
| 44 | if (!this.config) { |
| 45 | throw new Error('[xosTable] Please provide a configuration via the "config" attribute'); |
| 46 | } |
| 47 | |
| 48 | if (!this.config.columns) { |
| 49 | throw new Error('[xosTable] Please provide a columns list in the configuration'); |
| 50 | } |
| 51 | |
| 52 | // handle default ordering |
Matteo Scandolo | 035c593 | 2016-12-14 09:55:15 -0800 | [diff] [blame] | 53 | if (this.config.order && angular.isObject(this.config.order)) { |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 54 | this.reverse = this.config.order.reverse || false; |
| 55 | this.orderBy = this.config.order.field || 'id'; |
| 56 | } |
| 57 | |
| 58 | // if columns with type 'custom' are provided |
Matteo Scandolo | 035c593 | 2016-12-14 09:55:15 -0800 | [diff] [blame] | 59 | // check that a custom formatter is provided too |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 60 | let customCols = _.filter(this.config.columns, {type: 'custom'}); |
| 61 | if (angular.isArray(customCols) && customCols.length > 0) { |
| 62 | _.forEach(customCols, (col) => { |
| 63 | if (!col.formatter || !angular.isFunction(col.formatter)) { |
| 64 | throw new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.'); |
| 65 | } |
| 66 | }); |
| 67 | } |
| 68 | |
| 69 | // if columns with type 'icon' are provided |
Matteo Scandolo | 035c593 | 2016-12-14 09:55:15 -0800 | [diff] [blame] | 70 | // check that a custom formatter is provided too |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 71 | let iconCols = _.filter(this.config.columns, {type: 'icon'}); |
| 72 | if (angular.isArray(iconCols) && iconCols.length > 0) { |
| 73 | _.forEach(iconCols, (col) => { |
| 74 | if (!col.formatter || !angular.isFunction(col.formatter)) { |
| 75 | throw new Error('[xosTable] You have provided an icon field type, a formatter function should provided too.'); |
| 76 | } |
| 77 | }); |
| 78 | } |
| 79 | |
| 80 | // if a link property is passed, |
| 81 | // it should be a function |
| 82 | let linkedColumns = _.filter(this.config.columns, col => angular.isDefined(col.link)); |
| 83 | if (angular.isArray(linkedColumns) && linkedColumns.length > 0) { |
| 84 | _.forEach(linkedColumns, (col) => { |
| 85 | if (!angular.isFunction(col.link)) { |
| 86 | throw new Error('[xosTable] The link property should be a function.'); |
| 87 | } |
| 88 | }); |
| 89 | } |
| 90 | |
| 91 | this.columns = this.config.columns; |
| 92 | |
| 93 | } |
| 94 | } |
| 95 | |
| 96 | export const xosTable: angular.IComponentOptions = { |
| 97 | template: require('./table.html'), |
| 98 | controllerAs: 'vm', |
| 99 | controller: TableCtrl, |
| 100 | bindings: { |
| 101 | data: '=', |
| 102 | config: '=' |
| 103 | } |
| 104 | }; |