Clear filters

js/components/forms/members_list.js

@@ -14,39 +14,20 @@ export default {
     }
   },
 
-  mounted: function () {
-    // this.searchedList = this.members
-  },
-
   computed: {
     searchedList: function () {
       return this.members.filter(
-        member => this.status ? member.status === this.status : true
+        member => this.status ?
+          member.status === this.status | this.status === 'all'
+          : true
       ).filter(
-          member => this.role ? member.role.toLowerCase() === this.role : true
+        member => this.role ?
+          member.role.toLowerCase() === this.role | this.role === 'all'
+          : true
       ).filter(
         member => this.searchValue ? member.name.toLowerCase()
           .includes(this.searchValue.toLowerCase()) : true
       )
     }
   },
-
-  // watch: {
-  //   status: function (status) {
-  //     this.searchedList = this.searchedList.filter(
-  //       member => member.status === status
-  //     )
-  //   },
-  //   role: function (role) {
-  //     this.searchedList = this.searchedList.filter(
-  //       member => member.role.toLowerCase() === role
-  //     )
-  //   }
-  // },
-
-  methods: {
-    search: function () {
-      console.log("search")
-    },
-  },
 }

templates/workspaces/members/index.html

@@ -52,15 +52,14 @@
     <div class='usa-input search-input'>
       <label for='members-search'>Search members by name</label>
       <input v-model='searchValue' type='search' id='members-search' name='members-search' placeholder="Search by name"/>
-      <button v-if='searchValue' type="button" @click='search'>
-        <span class="hide">Search</span>
-      </button>
+      <button type="button"></button>
     </div>
 
     <div class='usa-input filter-input'>
       <label for='filter-status'>Filter members by status</label>
       <select v-model="status" id="filter-status" name="filter-status">
-        <option value="" selected>Filter by status</option>
+        <option value="" selected disabled>Filter by status</option>
+        <option value="all">View All</option>
         <option value="active">Active</option>
         <option value="pending">Pending</option>
         <option value="denied">Denied</option>
@@ -70,7 +69,8 @@
     <div class='usa-input filter-input'>
       <label for='filter-role'>Filter members by role</label>
       <select v-model="role" id="filter-role" name="filter-role">
-        <option value="" selected>Filter by role</option>
+        <option value="" selected disabled>Filter by role</option>
+        <option value="all">View All</option>
         <option value="administrator">Administrator</option>
         <option value="ccpo">CCPO</option>
         <option value="developer">Developer</option>