From 63da76b4a3cf5bb5eb919b214da99697b97828e3 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Thu, 1 Nov 2018 16:24:14 -0400
Subject: [PATCH] Show caret for sorted column

---
 js/components/forms/members_list.js     |  9 +++++++--
 templates/workspaces/members/index.html | 14 ++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/js/components/forms/members_list.js b/js/components/forms/members_list.js
index 75eea181..bc5a872f 100644
--- a/js/components/forms/members_list.js
+++ b/js/components/forms/members_list.js
@@ -66,12 +66,14 @@ export default {
       {
         displayName: 'Name',
         attr: 'name',
-        sortFunc: alphabeticalSort
+        sortFunc: alphabeticalSort,
+        width: "50%"
       },
       {
         displayName: 'Environments',
         attr: 'num_env',
-        sortFunc: numericSort
+        sortFunc: numericSort,
+        class: "table-cell--align-right"
       },
       {
         displayName: 'Status',
@@ -118,5 +120,8 @@ export default {
 
       this.sortInfo.columnName = columnName
     },
+    getColumns: function() {
+      return Object.values(this.sortInfo.columns)
+    }
   }
 }
diff --git a/templates/workspaces/members/index.html b/templates/workspaces/members/index.html
index 26d6e083..ef932607 100644
--- a/templates/workspaces/members/index.html
+++ b/templates/workspaces/members/index.html
@@ -2,6 +2,7 @@
 
 {% from "components/empty_state.html" import EmptyState %}
 {% from "components/alert.html" import Alert %}
+{% from "components/icon.html" import Icon %}
 
 {% block workspace_content %}
 
@@ -82,10 +83,15 @@
     <table v-if='searchedList && searchedList.length'>
       <thead>
         <tr>
-          <th @click="updateSort('Name')" scope="col" width="50%">Name</th>
-          <th @click="updateSort('Environments')" scope="col" class="table-cell--align-right">Environments</th>
-          <th @click="updateSort('Status')" scope="col">Status</th>
-          <th @click="updateSort('Workspace Role')" scope="col">Workspace Role</th>
+          <th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
+            !{ col.displayName }
+            <span v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
+              {{ Icon("caret_down") }}
+            </span>
+            <span v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
+              {{ Icon("caret_up") }}
+            </span>
+          </th>
         </tr>
       </thead>