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 { |
Matteo Scandolo | d62ea79 | 2016-12-22 14:02:28 -0800 | [diff] [blame] | 25 | reverse?: boolean; |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 26 | field: string; |
| 27 | } |
| 28 | |
| 29 | export interface IXosTableCfg { |
| 30 | columns: any[]; |
Matteo Scandolo | d62ea79 | 2016-12-22 14:02:28 -0800 | [diff] [blame] | 31 | order?: IXosTableCgfOrder; |
| 32 | filter?: string; |
| 33 | actions?: any[]; // TODO create interface |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 34 | } |
| 35 | |
| 36 | class TableCtrl { |
| 37 | $inject = ['$onInit']; |
| 38 | |
| 39 | public columns: any[]; |
| 40 | public orderBy: string; |
| 41 | public reverse: boolean; |
Matteo Scandolo | 266907e | 2016-12-20 13:41:42 -0800 | [diff] [blame] | 42 | public classes: string; |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 43 | private config: IXosTableCfg; |
| 44 | |
| 45 | |
| 46 | $onInit() { |
Matteo Scandolo | 266907e | 2016-12-20 13:41:42 -0800 | [diff] [blame] | 47 | |
| 48 | this.classes = 'table table-striped'; // table-bordered |
| 49 | |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 50 | if (!this.config) { |
| 51 | throw new Error('[xosTable] Please provide a configuration via the "config" attribute'); |
| 52 | } |
| 53 | |
| 54 | if (!this.config.columns) { |
| 55 | throw new Error('[xosTable] Please provide a columns list in the configuration'); |
| 56 | } |
| 57 | |
| 58 | // handle default ordering |
Matteo Scandolo | 035c593 | 2016-12-14 09:55:15 -0800 | [diff] [blame] | 59 | if (this.config.order && angular.isObject(this.config.order)) { |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 60 | this.reverse = this.config.order.reverse || false; |
| 61 | this.orderBy = this.config.order.field || 'id'; |
| 62 | } |
| 63 | |
| 64 | // if columns with type 'custom' are provided |
Matteo Scandolo | 035c593 | 2016-12-14 09:55:15 -0800 | [diff] [blame] | 65 | // check that a custom formatter is provided too |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 66 | let customCols = _.filter(this.config.columns, {type: 'custom'}); |
| 67 | if (angular.isArray(customCols) && customCols.length > 0) { |
| 68 | _.forEach(customCols, (col) => { |
| 69 | if (!col.formatter || !angular.isFunction(col.formatter)) { |
| 70 | throw new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.'); |
| 71 | } |
| 72 | }); |
| 73 | } |
| 74 | |
| 75 | // if columns with type 'icon' are provided |
Matteo Scandolo | 035c593 | 2016-12-14 09:55:15 -0800 | [diff] [blame] | 76 | // check that a custom formatter is provided too |
Matteo Scandolo | 9f87f30 | 2016-12-13 18:11:10 -0800 | [diff] [blame] | 77 | let iconCols = _.filter(this.config.columns, {type: 'icon'}); |
| 78 | if (angular.isArray(iconCols) && iconCols.length > 0) { |
| 79 | _.forEach(iconCols, (col) => { |
| 80 | if (!col.formatter || !angular.isFunction(col.formatter)) { |
| 81 | throw new Error('[xosTable] You have provided an icon field type, a formatter function should provided too.'); |
| 82 | } |
| 83 | }); |
| 84 | } |
| 85 | |
| 86 | // if a link property is passed, |
| 87 | // it should be a function |
| 88 | let linkedColumns = _.filter(this.config.columns, col => angular.isDefined(col.link)); |
| 89 | if (angular.isArray(linkedColumns) && linkedColumns.length > 0) { |
| 90 | _.forEach(linkedColumns, (col) => { |
| 91 | if (!angular.isFunction(col.link)) { |
| 92 | throw new Error('[xosTable] The link property should be a function.'); |
| 93 | } |
| 94 | }); |
| 95 | } |
| 96 | |
| 97 | this.columns = this.config.columns; |
| 98 | |
| 99 | } |
| 100 | } |
| 101 | |
| 102 | export const xosTable: angular.IComponentOptions = { |
| 103 | template: require('./table.html'), |
| 104 | controllerAs: 'vm', |
| 105 | controller: TableCtrl, |
| 106 | bindings: { |
| 107 | data: '=', |
| 108 | config: '=' |
| 109 | } |
| 110 | }; |