Add sort functionality to table Component

Added optional sort function to the shared table component.
Table sort is not implemented on any existing table, but will
be used in the redesigned Event Log table.

- Changed table model attribute to two separate properties
  data and header to take advantage of $onChanges lifecycle
  hook
- Update local user table and user role table to account for
  these updates

Tested on Chrome, Safari, Firefox, Edge, IE

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I4fe68e78ae9d1228d7d9350538f61076036b1089

3 files changed, 181 insertions, 54 deletions

diff --git a/app/common/components/table/table.html b/app/common/components/table/table.html
index ceedd91..6b2420d 100644
--- a/app/common/components/table/table.html
+++ b/app/common/components/table/table.html
@@ -1,17 +1,49 @@
 <table class="bmc-table {{$ctrl.size}}">
-  <thead>
-    <!-- Header row -->
-    <tr>
-      <th ng-repeat="header in $ctrl.model.header"
+  <thead class="bmc-table__head">
+    <!-- Header row (non-sortable) -->
+    <tr ng-if="!$ctrl.sortable">
+      <th ng-repeat="headerItem in $ctrl.header"
           class="bmc-table__column-header">
-        {{header}}
+        {{headerItem.label}}
+      </th>
+    </tr>
+    <!-- Header row (sortable) -->
+    <tr ng-if="$ctrl.sortable">
+      <th ng-repeat="headerItem in $ctrl.header track by $index"
+          class="bmc-table__column-header">
+        <span ng-if="!headerItem.sortable">
+          {{headerItem.label}}
+        </span>
+        <span ng-if="headerItem.sortable"
+              ng-click="$ctrl.onClickSort($index)"
+              class="bmc-table__column-header--sortable">
+          {{headerItem.label}}
+          <!-- Sort icons -->
+          <button class="sort-icon"
+                  type="button"
+                  aria-label="sort {{headerItem.label}}">
+            <icon file="icon-arrow--up.svg"
+                  ng-if="$index === $ctrl.activeSort"
+                  ng-class="{
+                    'sort-icon--descending': !$ctrl.sortAscending,
+                    'sort-icon--ascending' : $ctrl.sortAscending }"
+                  class="sort-icon--active"
+                  aria-hidden="true"></icon>
+            <span ng-if="$index !== $ctrl.activeSort"
+                  class="sort-icon--inactive"
+                  aria-hidden="true">
+                <icon file="icon-arrow--up.svg"></icon>
+                <icon file="icon-arrow--down.svg"></icon>
+            </span>
+          </button>
+        </span>
       </th>
     </tr>
   </thead>
-  <tbody>
+  <tbody class="bmc-table__body">
     <!-- Data rows -->
-    <tr ng-if="$ctrl.model.data.length > 0"
-        ng-repeat="row in $ctrl.model.data"
+    <tr ng-if="$ctrl.data.length > 0"
+        ng-repeat="row in $ctrl.data"
         class="bmc-table__row">
       <!-- Row item -->
       <td ng-repeat="item in row.uiData track by $index"
@@ -28,7 +60,7 @@
       </td>
     </tr>
     <!-- Empty table -->
-    <tr ng-if="$ctrl.model.data.length === 0">
+    <tr ng-if="$ctrl.data.length === 0">
       <td>No data</td>
     </tr>
   </tbody>
diff --git a/app/common/components/table/table.js b/app/common/components/table/table.js
index cf2b797..24aa0c9 100644
--- a/app/common/components/table/table.js
+++ b/app/common/components/table/table.js
@@ -6,57 +6,66 @@ window.angular && (function(angular) {
    * bmcTable Component
    *
    * To use:
-   * The <bmc-table> component expects a 'model' attribute
-   * that will contain all the data needed to render the table.
    *
-   * The component accepts a 'row-actions-enabled' attribute,
-   * to optionally render table row actions. Defaults to false.
-   * Pass true to render actions. Row actions are defined in
-   * model.data.actions.
+   * The 'data' attribute should be an array of all row objects in the table.
+   * It will render each item as a <tr> in the table.
+   * Each row object in the data array should also have a 'uiData'
+   * property that should be an array of the properties that will render
+   * as each table cell <td>.
+   * Each row object in the data array can optionally have an
+   * 'actions' property that should be an array of actions to provide the
+   * <bmc-table-actions> component.
    *
-   * The component accepts a 'size' attribute which can be
-   * set to 'small' which will render a smaller font size in the
-   * table.
+   * data = [
+   *  { uiData: ['root', 'Admin', 'enabled' ] },
+   *  { uiData: ['user1', 'User', 'disabled' ] }
+   * ]
    *
-   * The model object should contain 'header' and 'data'
-   * properties.
+   * The 'header' attribute should be an array of all header objects in the
+   * table. Each object in the header array should have a 'label' property
+   * that will render as a <th> in the table.
+   * If the table is sortable, can optionally add 'sortable' property to header
+   * row object. If a particular column is not sortable, set to false.
    *
-   * model: {
-   *    header: <string>[],  // Array of header labels
-   *    data: <any>[],       // Array of each row object
-   * }
+   * header = [
+   *  { label: 'Username' },
+   *  { label: 'Privilege' }
+   *  { label: 'Account Status', sortable: false }
+   * ]
    *
-   * The header property will render each label as a <th> in the table.
+   * The 'sortable' attribute should be a boolean value. Defaults to false.
+   * The 'default-sort' attribute should be the index value of the header
+   * obejct that should be sorted on inital load.
    *
-   * The data property will render each item as a <tr> in the table.
-   * Each row object in the model.data array should also have a 'uiData'
-   * property that should be an array of the properties that will render
-   * as each table cell <td>.
-   * Each row object in the model.data array can optionally have an
-   * 'actions' property that should be an array of actions to provide the
-   * <bmc-table-actions> component.
+   * The 'row-actions-enabled' attribute, should be a boolean value
+   * Can be set to true to render table row actions. Defaults to false.
+   *  Row actions are defined in data.actions.
    *
-   * The 'rowActionsEnabled' property will render <bmc-table-actions> if set
-   * to true.
+   * The 'size' attribute which can be set to 'small' which will
+   * render a smaller font size in the table.
    *
    */
 
   const TableController = function() {
+    this.sortAscending = true;
+    this.activeSort;
+
     /**
-     * Init model data
-     * @param {any} model : table model object
-     * @returns : table model object with defaults
+     * Sorts table data
      */
-    const setModel = (model) => {
-      model.header = model.header === undefined ? [] : model.header;
-      model.data = model.data === undefined ? [] : model.data;
-      model.data = model.data.map((row) => {
-        if (row.uiData === undefined) {
-          row.uiData = [];
+    const sortData = () => {
+      this.data.sort((a, b) => {
+        const aProp = a.uiData[this.activeSort];
+        const bProp = b.uiData[this.activeSort];
+        if (aProp === bProp) {
+          return 0;
+        } else {
+          if (this.sortAscending) {
+            return aProp < bProp ? -1 : 1;
+          }
+          return aProp > bProp ? -1 : 1;
         }
-        return row;
       })
-      return model;
     };
 
     /**
@@ -74,23 +83,73 @@ window.angular && (function(angular) {
     };
 
     /**
-     * onInit Component lifecycle hooked
+     * Callback when sortable table header clicked
+     * @param {number} index : index of header item
      */
-    this.$onInit = () => {
-      if (this.model === undefined) {
-        console.log('<bmc-table> Component is missing "model" attribute.');
-        return;
+    this.onClickSort = (index) => {
+      if (index === this.activeSort) {
+        // If clicked header is already sorted, reverse
+        // the sort direction
+        this.sortAscending = !this.sortAscending;
+        this.data.reverse();
+      } else {
+        this.sortAscending = true;
+        this.activeSort = index;
+        sortData();
       }
-      this.model = setModel(this.model);
+    };
+
+    /**
+     * onInit Component lifecycle hook
+     * Checking for undefined values
+     */
+    this.$onInit = () => {
+      this.header = this.header === undefined ? [] : this.header;
+      this.data = this.data == undefined ? [] : this.data;
+      this.sortable = this.sortable === undefined ? false : this.sortable;
       this.rowActionsEnabled =
-          this.rowActionsEnabled === undefined ? false : true;
+          this.rowActionsEnabled === undefined ? false : this.rowActionsEnabled;
+      this.size = this.size === undefined ? '' : this.size;
+
+      // Check for undefined 'uiData' property for each item in data array
+      this.data = this.data.map((row) => {
+        if (row.uiData === undefined) {
+          row.uiData = [];
+        }
+        return row;
+      })
+      if (this.sortable) {
+        // If sort is enabled, check for undefined 'sortable'
+        // property for each item in header array
+        this.header = this.header.map((column) => {
+          column.sortable =
+              column.sortable === undefined ? true : column.sortable;
+          return column;
+        })
+      }
       if (this.rowActionsEnabled) {
         // If table actions are enabled push an empty
         // string to the header array to account for additional
         // table actions cell
-        this.model.header.push('');
+        this.header.push({label: '', sortable: false});
       }
     };
+
+    /**
+     * onChanges Component lifecycle hook
+     * Check for changes in the data array and apply
+     * default or active sort if one is defined
+     */
+    this.$onChanges = (onChangesObj) => {
+      const dataChange = onChangesObj.data;
+      if (dataChange) {
+        if (this.activeSort !== undefined || this.defaultSort !== undefined) {
+          this.activeSort = this.defaultSort !== undefined ? this.defaultSort :
+                                                             this.activeSort;
+          sortData();
+        }
+      }
+    }
   };
 
   /**
@@ -99,6 +158,14 @@ window.angular && (function(angular) {
   angular.module('app.common.components').component('bmcTable', {
     template: require('./table.html'),
     controller: TableController,
-    bindings: {model: '<', rowActionsEnabled: '<', size: '<', emitAction: '&'}
+    bindings: {
+      data: '<',               // Array
+      header: '<',             // Array
+      rowActionsEnabled: '<',  // boolean
+      size: '<',               // string
+      sortable: '<',           // boolean
+      defaultSort: '<',        // number (index of sort)
+      emitAction: '&'
+    }
   })
 })(window.angular);
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 0cdb414..613d88a 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -154,6 +154,28 @@
   }
 }
 
+.bmc-table__head {
+  .sort-icon {
+    padding: 0;
+    position: absolute;
+    .icon {
+      margin: 0;
+      & + .icon {
+        margin-left: -18px;
+      }
+      svg {
+        height: 1em;
+      }
+    }
+  }
+  .sort-icon--descending {
+    transform: rotate(180deg);
+  }
+  .sort-icon--inactive {
+    opacity: 0.5;
+  }
+}
+
 .bmc-table__row {
   border-bottom: 1px solid $border-color-01;
 }
@@ -161,6 +183,12 @@
 .bmc-table__column-header {
   padding: 10px 16px;
   background-color: $background-03;
+  position: relative;
+}
+
+.bmc-table__column-header--sortable {
+  cursor: pointer;
+  user-select: none;
 }
 
 .bmc-table__cell {