From 6575afc1a02ec8a03bf44d415fe5ede1c1209d10 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Thu, 1 Nov 2018 13:49:35 -0400
Subject: [PATCH 1/3] Refactor search and filter

---
 js/components/forms/members_list.js | 58 ++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/js/components/forms/members_list.js b/js/components/forms/members_list.js
index a092ab28..6d8dac00 100644
--- a/js/components/forms/members_list.js
+++ b/js/components/forms/members_list.js
@@ -1,3 +1,37 @@
+import { compose, filter, equals, indexBy, partial, prop, pipe } from 'ramda'
+
+const search = (query, members) => {
+  if (query === '' || query === 'all') {
+    return members
+  } else {
+    const normalizedQuery = query.toLowerCase()
+    return members.filter(
+      (member) => member.name.toLowerCase().includes(normalizedQuery)
+    )
+  }
+}
+
+const filterByStatus = (status, members) => {
+  if (status === '' || status === 'all') {
+    return members
+  } else {
+    return members.filter(
+      (member) => member.status === status
+    )
+  }
+}
+
+const filterByRole = (role, rolesByDisplayname, members) => {
+  const getRoleNameFromDisplayName = (_role) => rolesByDisplayname[_role].name
+
+  if (role === '' || role === 'all') {
+    return members
+  } else {
+    return members.filter(
+      (member) => getRoleNameFromDisplayName(member.role) === role
+    )
+  }
+}
 
 export default {
   name: 'members-list',
@@ -12,29 +46,17 @@ export default {
       searchValue: '',
       status: '',
       role: '',
+      rolesByDisplayName: indexBy(prop('display_name'), this.choices),
     }
   },
 
   computed: {
     searchedList: function () {
-      return this.members.filter(
-        member => this.status ?
-          member.status === this.status | this.status === 'all'
-          : true
-      ).filter(
-        member => this.role ? (
-          this.getRoleFromDisplayName(member.role) === this.role | this.role === 'all')
-          : true
-      ).filter(
-        member => this.searchValue ? member.name.toLowerCase()
-          .includes(this.searchValue.toLowerCase()) : true
-      )
+      return pipe(
+        partial(search, [this.searchValue]),
+        partial(filterByStatus, [this.status]),
+        partial(filterByRole, [this.role, this.rolesByDisplayName]),
+      )(this.members)
     }
   },
-
-  methods: {
-    getRoleFromDisplayName: function (role) {
-      return this.choices.find(choice => choice.display_name === role).name
-    },
-  },
 }

From bfc6766caaa1bd0b762e0b78db0db1b31e267b5c Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Thu, 1 Nov 2018 14:21:21 -0400
Subject: [PATCH 2/3] Sort workspace members list

---
 js/components/forms/members_list.js     | 62 ++++++++++++++++++++++++-
 templates/workspaces/members/index.html |  8 ++--
 2 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/js/components/forms/members_list.js b/js/components/forms/members_list.js
index 6d8dac00..75eea181 100644
--- a/js/components/forms/members_list.js
+++ b/js/components/forms/members_list.js
@@ -1,4 +1,4 @@
-import { compose, filter, equals, indexBy, partial, prop, pipe } from 'ramda'
+import { compose, sortBy, reverse, indexBy, partial, prop, pipe, toLower } from 'ramda'
 
 const search = (query, members) => {
   if (query === '' || query === 'all') {
@@ -33,6 +33,19 @@ const filterByRole = (role, rolesByDisplayname, members) => {
   }
 }
 
+const sort = (sortInfo, members) => {
+  if (sortInfo.columnName === '') {
+    return members
+  } else {
+    const sortColumn = sortInfo.columns[sortInfo.columnName]
+    const sortedMembers = sortColumn.sortFunc(sortColumn.attr, members)
+
+    return sortInfo.isAscending ?
+      sortedMembers :
+      reverse(sortedMembers)
+    }
+}
+
 export default {
   name: 'members-list',
 
@@ -42,11 +55,46 @@ export default {
   },
 
   data: function () {
+    const alphabeticalSort = (attr, members) => {
+      const lowercaseProp = compose(toLower, prop(attr))
+      return sortBy(lowercaseProp, members)
+    }
+
+    const numericSort = (attr, members) => sortBy(prop(attr), members)
+
+    const columns = [
+      {
+        displayName: 'Name',
+        attr: 'name',
+        sortFunc: alphabeticalSort
+      },
+      {
+        displayName: 'Environments',
+        attr: 'num_env',
+        sortFunc: numericSort
+      },
+      {
+        displayName: 'Status',
+        attr: 'status',
+        sortFunc: alphabeticalSort
+      },
+      {
+        displayName: 'Workspace Role',
+        attr: 'role',
+        sortFunc: alphabeticalSort
+      },
+    ]
+
     return {
       searchValue: '',
       status: '',
       role: '',
       rolesByDisplayName: indexBy(prop('display_name'), this.choices),
+      sortInfo: {
+        columnName: '',
+        isAscending: true,
+        columns: indexBy(prop('displayName'), columns)
+      },
     }
   },
 
@@ -56,7 +104,19 @@ export default {
         partial(search, [this.searchValue]),
         partial(filterByStatus, [this.status]),
         partial(filterByRole, [this.role, this.rolesByDisplayName]),
+        partial(sort, [this.sortInfo])
       )(this.members)
     }
   },
+
+  methods: {
+    updateSort: function(columnName) {
+      // clicking a column twice toggles ascending / descending
+      if (columnName === this.sortInfo.columnName) {
+        this.sortInfo.isAscending = !this.sortInfo.isAscending
+      }
+
+      this.sortInfo.columnName = columnName
+    },
+  }
 }
diff --git a/templates/workspaces/members/index.html b/templates/workspaces/members/index.html
index 82086696..26d6e083 100644
--- a/templates/workspaces/members/index.html
+++ b/templates/workspaces/members/index.html
@@ -82,10 +82,10 @@
     <table v-if='searchedList && searchedList.length'>
       <thead>
         <tr>
-          <th scope="col" width="50%">Name</th>
-          <th scope="col" class="table-cell--align-right">Environments</th>
-          <th scope="col">Status</th>
-          <th scope="col">Workspace Role</th>
+          <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>
         </tr>
       </thead>
 

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 3/3] 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>