1window.angular && (function(angular) { 2 'use strict'; 3 4 /** 5 * 6 * bmcTable Component 7 * 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 * 12 * The component 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 * The component accepts a 'size' attribute which can be 18 * set to 'small' which will render a smaller font size in the 19 * table. 20 * 21 * The model object should contain 'header' and 'data' 22 * properties. 23 * 24 * model: { 25 * header: <string>[], // Array of header labels 26 * data: <any>[], // Array of each row object 27 * } 28 * 29 * The header property will render each label as a <th> in the table. 30 * 31 * The data property will render each item as a <tr> in the table. 32 * Each row object in the model.data array should also have a 'uiData' 33 * property that should be an array of the properties that will render 34 * as each table cell <td>. 35 * Each row object in the model.data array can optionally have an 36 * 'actions' property that should be an array of actions to provide the 37 * <bmc-table-actions> component. 38 * 39 * The 'rowActionsEnabled' property will render <bmc-table-actions> if set 40 * to true. 41 * 42 */ 43 44 const TableController = function() { 45 /** 46 * Init model data 47 * @param {any} model : table model object 48 * @returns : table model object with defaults 49 */ 50 const setModel = (model) => { 51 model.header = model.header === undefined ? [] : model.header; 52 model.data = model.data === undefined ? [] : model.data; 53 model.data = model.data.map((row) => { 54 if (row.uiData === undefined) { 55 row.uiData = []; 56 } 57 return row; 58 }) 59 return model; 60 }; 61 62 /** 63 * Callback when table row action clicked 64 * Emits user desired action and associated row data to 65 * parent controller 66 * @param {string} action : action type 67 * @param {any} row : user object 68 */ 69 this.onEmitTableAction = (action, row) => { 70 if (action !== undefined && row !== undefined) { 71 const value = {action, row}; 72 this.emitAction({value}); 73 } 74 }; 75 76 /** 77 * onInit Component lifecycle hooked 78 */ 79 this.$onInit = () => { 80 if (this.model === undefined) { 81 console.log('<bmc-table> Component is missing "model" attribute.'); 82 return; 83 } 84 this.model = setModel(this.model); 85 this.rowActionsEnabled = 86 this.rowActionsEnabled === undefined ? false : true; 87 if (this.rowActionsEnabled) { 88 // If table actions are enabled push an empty 89 // string to the header array to account for additional 90 // table actions cell 91 this.model.header.push(''); 92 } 93 }; 94 }; 95 96 /** 97 * Register bmcTable component 98 */ 99 angular.module('app.common.components').component('bmcTable', { 100 template: require('./table.html'), 101 controller: TableController, 102 bindings: {model: '<', rowActionsEnabled: '<', size: '<', emitAction: '&'} 103 }) 104})(window.angular); 105