commit b1f64248b47e6a26ae38f36ebcf67f5955e9e92c
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Wed Sep 04 11:40:51 2019 -0700
committer Gunnar Mills <gmills@us.ibm.com> Fri Sep 20 16:38:28 2019 +0000
tree 1e74bc8df23056b8c3d98327ababb22f21915b7e
parent 1a2bd74d8fa38f0848eca12759e03d162c09d236

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

app/common/components/table/table.html

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>