blob: 32043a777f1b1de6caca270379db021886d70d76 [file] [log] [blame]
Matteo Scandolofb46ae62017-08-08 09:10:50 -07001
2/*
3 * Copyright 2017-present Open Networking Foundation
4
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
8
9 * http://www.apache.org/licenses/LICENSE-2.0
10
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
16 */
17
18
Matteo Scandolo9f87f302016-12-13 18:11:10 -080019// TODO fininsh to import all methods from https://github.com/opencord/ng-xos-lib/blob/master/src/ui_components/dumbComponents/table/table.component.js
20// TODO import tests
21
Matteo Scandolo035c5932016-12-14 09:55:15 -080022import './table.scss';
Matteo Scandolo9f87f302016-12-13 18:11:10 -080023import * as _ from 'lodash';
24
Matteo Scandolod58d5042016-12-16 16:59:21 -080025enum EXosTableColType {
26 'boolean',
27 'array',
28 'object',
29 'custom',
30 'date' ,
31 'icon'
32}
33
34export interface IXosTableColumn {
35 label: string;
36 prop: string;
37 type?: string; // understand why enum does not work
38 formatter?(item: any): string;
39 link?(item: any): string;
Matteo Scandolo8b2370c2017-02-02 17:19:07 -080040 hover?(item: any): string;
Matteo Scandolod58d5042016-12-16 16:59:21 -080041}
42
Matteo Scandolo9f87f302016-12-13 18:11:10 -080043interface IXosTableCgfOrder {
Matteo Scandolod62ea792016-12-22 14:02:28 -080044 reverse?: boolean;
Matteo Scandolo9f87f302016-12-13 18:11:10 -080045 field: string;
46}
47
48export interface IXosTableCfg {
49 columns: any[];
Matteo Scandolo8b2370c2017-02-02 17:19:07 -080050 pagination?: {
51 pageSize: number;
52 };
Matteo Scandolod62ea792016-12-22 14:02:28 -080053 order?: IXosTableCgfOrder;
54 filter?: string;
Matteo Scandoloc8a58c82017-08-17 17:14:38 -070055 selectedRow?: number;
56 filteredData?: any[];
Matteo Scandolod62ea792016-12-22 14:02:28 -080057 actions?: any[]; // TODO create interface
Matteo Scandolo9f87f302016-12-13 18:11:10 -080058}
59
60class TableCtrl {
Matteo Scandolo710dc152017-04-11 13:54:23 -070061 $inject = ['$onInit', '$scope'];
Matteo Scandolo9f87f302016-12-13 18:11:10 -080062
63 public columns: any[];
64 public orderBy: string;
65 public reverse: boolean;
Matteo Scandolo266907e2016-12-20 13:41:42 -080066 public classes: string;
Matteo Scandolo710dc152017-04-11 13:54:23 -070067 public data: any;
Matteo Scandolo9f87f302016-12-13 18:11:10 -080068 private config: IXosTableCfg;
Matteo Scandolo8b2370c2017-02-02 17:19:07 -080069 private currentPage: number;
Matteo Scandolo710dc152017-04-11 13:54:23 -070070 private loader: boolean = true;
Matteo Scandolo9f87f302016-12-13 18:11:10 -080071
Matteo Scandolo710dc152017-04-11 13:54:23 -070072 constructor(
73 private $scope: ng.IScope
74 ) {
75
76 }
Matteo Scandolo9f87f302016-12-13 18:11:10 -080077
78 $onInit() {
Matteo Scandolo266907e2016-12-20 13:41:42 -080079
Matteo Scandolo710dc152017-04-11 13:54:23 -070080 this.$scope.$watch(() => this.data, data => {
81 if (angular.isDefined(data)) {
82 this.loader = false;
83 }
84 });
85
Matteo Scandolo266907e2016-12-20 13:41:42 -080086 this.classes = 'table table-striped'; // table-bordered
87
Matteo Scandolo9f87f302016-12-13 18:11:10 -080088 if (!this.config) {
89 throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
90 }
91
92 if (!this.config.columns) {
93 throw new Error('[xosTable] Please provide a columns list in the configuration');
94 }
95
96 // handle default ordering
Matteo Scandolo035c5932016-12-14 09:55:15 -080097 if (this.config.order && angular.isObject(this.config.order)) {
Matteo Scandolo9f87f302016-12-13 18:11:10 -080098 this.reverse = this.config.order.reverse || false;
99 this.orderBy = this.config.order.field || 'id';
100 }
101
102 // if columns with type 'custom' are provided
Matteo Scandolo035c5932016-12-14 09:55:15 -0800103 // check that a custom formatter is provided too
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800104 let customCols = _.filter(this.config.columns, {type: 'custom'});
105 if (angular.isArray(customCols) && customCols.length > 0) {
106 _.forEach(customCols, (col) => {
107 if (!col.formatter || !angular.isFunction(col.formatter)) {
108 throw new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.');
109 }
110 });
111 }
112
113 // if columns with type 'icon' are provided
Matteo Scandolo035c5932016-12-14 09:55:15 -0800114 // check that a custom formatter is provided too
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800115 let iconCols = _.filter(this.config.columns, {type: 'icon'});
116 if (angular.isArray(iconCols) && iconCols.length > 0) {
117 _.forEach(iconCols, (col) => {
118 if (!col.formatter || !angular.isFunction(col.formatter)) {
119 throw new Error('[xosTable] You have provided an icon field type, a formatter function should provided too.');
120 }
121 });
122 }
123
124 // if a link property is passed,
125 // it should be a function
126 let linkedColumns = _.filter(this.config.columns, col => angular.isDefined(col.link));
127 if (angular.isArray(linkedColumns) && linkedColumns.length > 0) {
128 _.forEach(linkedColumns, (col) => {
129 if (!angular.isFunction(col.link)) {
130 throw new Error('[xosTable] The link property should be a function.');
131 }
132 });
133 }
134
Matteo Scandolo8b2370c2017-02-02 17:19:07 -0800135 // if an hover property is passed,
136 // it should be a function
137 let hoverColumns = _.filter(this.config.columns, col => angular.isDefined(col.hover));
138 if (angular.isArray(hoverColumns) && hoverColumns.length > 0) {
139 _.forEach(hoverColumns, (col) => {
140 if (!angular.isFunction(col.hover)) {
141 throw new Error('[xosTable] The hover property should be a function.');
142 }
143 });
144 }
145
146 if (this.config.pagination) {
147 this.currentPage = 0;
148 }
149
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800150 }
Matteo Scandolo8b2370c2017-02-02 17:19:07 -0800151
152 public goToPage = (n) => {
153 this.currentPage = n;
154 };
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800155}
156
157export const xosTable: angular.IComponentOptions = {
158 template: require('./table.html'),
159 controllerAs: 'vm',
160 controller: TableCtrl,
161 bindings: {
Matteo Scandolo04a34a12017-09-12 10:37:48 -0700162 data: '<',
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800163 config: '='
164 }
165};