blob: 09a6d6d87a7267530578f14c7c02ba6d57c862cf [file] [log] [blame]
Yoshie Muranakafa562732019-07-17 11:23:15 -05001window.angular && (function(angular) {
2 'use strict';
3
4 /**
5 *
Yoshie Muranakabb688792019-08-12 09:31:52 -05006 * bmcTable Component
Yoshie Muranakafa562732019-07-17 11:23:15 -05007 *
8 * To use:
9 * The <bmc-table> component expects a 'model' attribute
10 * that will contain all the data needed to render the table.
11 *
Yoshie Muranakabb688792019-08-12 09:31:52 -050012 * The component also accepts a 'row-actions-enabled' attribute,
13 * to optionally render table row actions. Defaults to false.
14 * Pass true to render actions. Row actions are defined in
15 * model.data.actions.
16 *
17 *
18 * The model object should contain 'header', and 'data'
Yoshie Muranakafa562732019-07-17 11:23:15 -050019 * properties.
20 *
21 * model: {
Yoshie Muranakabb688792019-08-12 09:31:52 -050022 * header: <string>[], // Array of header labels
23 * data: <any>[], // Array of each row object
Yoshie Muranakafa562732019-07-17 11:23:15 -050024 * }
25 *
26 * The header property will render each label as a <th> in the table.
27 *
28 * The data property will render each item as a <tr> in the table.
29 * Each row object in the model.data array should also have a 'uiData'
30 * property that should be an array of the properties that will render
31 * as each table cell <td>.
Yoshie Muranakabb688792019-08-12 09:31:52 -050032 * Each row object in the model.data array can optionally have an
33 * 'actions' property that should be an array of actions to provide the
34 * <bmc-table-actions> component.
Yoshie Muranakafa562732019-07-17 11:23:15 -050035 *
Yoshie Muranakabb688792019-08-12 09:31:52 -050036 * The 'rowActionsEnabled' property will render <bmc-table-actions> if set
37 * to true.
Yoshie Muranakafa562732019-07-17 11:23:15 -050038 *
39 */
Yoshie Muranakabb688792019-08-12 09:31:52 -050040
Yoshie Muranakafa562732019-07-17 11:23:15 -050041 const TableController = function() {
42 /**
43 * Init model data
44 * @param {any} model : table model object
45 * @returns : table model object with defaults
46 */
47 const setModel = (model) => {
48 model.header = model.header === undefined ? [] : model.header;
49 model.data = model.data === undefined ? [] : model.data;
50 model.data = model.data.map((row) => {
51 if (row.uiData === undefined) {
52 row.uiData = [];
53 }
54 return row;
55 })
Yoshie Muranakafa562732019-07-17 11:23:15 -050056 return model;
57 };
58
59 /**
60 * Callback when table row action clicked
61 * Emits user desired action and associated row data to
62 * parent controller
63 * @param {string} action : action type
64 * @param {any} row : user object
65 */
Yoshie Muranakabb688792019-08-12 09:31:52 -050066 this.onEmitTableAction = (action, row) => {
Yoshie Muranakafa562732019-07-17 11:23:15 -050067 if (action !== undefined && row !== undefined) {
68 const value = {action, row};
69 this.emitAction({value});
70 }
71 };
72
73 /**
74 * onInit Component lifecycle hooked
75 */
76 this.$onInit = () => {
Yoshie Muranakabb688792019-08-12 09:31:52 -050077 if (this.model === undefined) {
78 console.log('<bmc-table> Component is missing "model" attribute.');
79 return;
80 }
Yoshie Muranakafa562732019-07-17 11:23:15 -050081 this.model = setModel(this.model);
Yoshie Muranakabb688792019-08-12 09:31:52 -050082 this.rowActionsEnabled =
83 this.rowActionsEnabled === undefined ? false : true;
84 if (this.rowActionsEnabled) {
85 // If table actions are enabled push an empty
86 // string to the header array to account for additional
87 // table actions cell
88 this.model.header.push('');
89 }
Yoshie Muranakafa562732019-07-17 11:23:15 -050090 };
91 };
92
93 /**
94 * Register bmcTable component
95 */
96 angular.module('app.common.components').component('bmcTable', {
97 template: require('./table.html'),
98 controller: TableController,
Yoshie Muranakabb688792019-08-12 09:31:52 -050099 bindings: {model: '<', rowActionsEnabled: '<', emitAction: '&'}
Yoshie Muranakafa562732019-07-17 11:23:15 -0500100 })
101})(window.angular);