From 1d1b5495311f1009f1853c253a5adb546be6117a Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Thu, 25 Oct 2018 14:46:24 -0400
Subject: [PATCH] Basic status and role filtering, not reactive

---
 js/components/forms/members_list.js     | 14 ++++++++++++++
 templates/workspaces/members/index.html | 16 ++++++++--------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/js/components/forms/members_list.js b/js/components/forms/members_list.js
index f4be92d8..3c35730a 100644
--- a/js/components/forms/members_list.js
+++ b/js/components/forms/members_list.js
@@ -9,6 +9,8 @@ export default {
   data: function () {
     return {
       searchValue: '',
+      status: '',
+      role: '',
       searchedList: [],
     }
   },
@@ -23,6 +25,18 @@ export default {
         member => member.name.toLowerCase()
         .includes(this.searchValue.toLowerCase())
       )
+
+      if (this.status) {
+        this.searchedList = this.searchedList.filter(
+          member => member.status === this.status
+        )
+      }
+
+      if (this.role) {
+        this.searchedList = this.searchedList.filter(
+            member => member.role.toLowerCase() === this.role
+        )
+      }
     },
   },
 }
diff --git a/templates/workspaces/members/index.html b/templates/workspaces/members/index.html
index 21220cde..1e34f0a5 100644
--- a/templates/workspaces/members/index.html
+++ b/templates/workspaces/members/index.html
@@ -59,21 +59,21 @@
 
     <div class='usa-input filter-input'>
       <label for='filter-status'>Filter members by status</label>
-      <select id="filter-status" name="filter-status">
+      <select v-model="status" id="filter-status" name="filter-status">
         <option value="" selected disabled>Filter by status</option>
-        <option value="">Active</option>
-        <option value="">Pending</option>
-        <option value="">Denied</option>
+        <option value="active">Active</option>
+        <option value="pending">Pending</option>
+        <option value="denied">Denied</option>
       </select>
     </div>
 
     <div class='usa-input filter-input'>
       <label for='filter-role'>Filter members by role</label>
-      <select id="filter-role" name="filter-role">
+      <select v-model="role" id="filter-role" name="filter-role">
         <option value="" selected disabled>Filter by role</option>
-        <option value="">Admin</option>
-        <option value="">CCPO</option>
-        <option value="">Developer</option>
+        <option value="administrator">Administrator</option>
+        <option value="ccpo">CCPO</option>
+        <option value="developer">Developer</option>
       </select>
     </div>
   </form>