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

1 files changed, 41 insertions, 9 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>