xref: /openbmc/phosphor-webui/app/common/components/table/table.js (revision bb688795ded24cd07c46de598170af41fb3bfd56) 
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 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'
19   * properties.
20   *
21   * model: {
22   *    header: <string>[],  // Array of header labels
23   *    data: <any>[],       // Array of each row object
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>.
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.
35   *
36   * The 'rowActionsEnabled' property will render <bmc-table-actions> if set
37   * to true.
38   *
39   */
40
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      })
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     */
66    this.onEmitTableAction = (action, row) => {
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 = () => {
77      if (this.model === undefined) {
78        console.log('<bmc-table> Component is missing "model" attribute.');
79        return;
80      }
81      this.model = setModel(this.model);
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      }
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,
99    bindings: {model: '<', rowActionsEnabled: '<', emitAction: '&'}
100  })
101})(window.angular);
102