Yoshie Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 1 | window.angular && (function(angular) { |
| 2 | 'use strict'; |
| 3 | |
| 4 | /** |
| 5 | * |
Yoshie Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 6 | * bmcTable Component |
Yoshie Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 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 | * |
Yoshie Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 12 | * 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 Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 19 | * properties. |
| 20 | * |
| 21 | * model: { |
Yoshie Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 22 | * header: <string>[], // Array of header labels |
| 23 | * data: <any>[], // Array of each row object |
Yoshie Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 24 | * } |
| 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 Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 32 | * 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 Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 35 | * |
Yoshie Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 36 | * The 'rowActionsEnabled' property will render <bmc-table-actions> if set |
| 37 | * to true. |
Yoshie Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 38 | * |
| 39 | */ |
Yoshie Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 40 | |
Yoshie Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 41 | 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 Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 56 | 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 Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 66 | this.onEmitTableAction = (action, row) => { |
Yoshie Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 67 | 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 Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 77 | if (this.model === undefined) { |
| 78 | console.log('<bmc-table> Component is missing "model" attribute.'); |
| 79 | return; |
| 80 | } |
Yoshie Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 81 | this.model = setModel(this.model); |
Yoshie Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 82 | 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 Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 90 | }; |
| 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 Muranaka | bb68879 | 2019-08-12 09:31:52 -0500 | [diff] [blame^] | 99 | bindings: {model: '<', rowActionsEnabled: '<', emitAction: '&'} |
Yoshie Muranaka | fa56273 | 2019-07-17 11:23:15 -0500 | [diff] [blame] | 100 | }) |
| 101 | })(window.angular); |