Added searching and filtering.

Filter by role is still waiting for implementation

17th Website/src/views/users.vue

@@ -12,14 +12,14 @@ export default {
             search: '',
 
             unitFilters: [
-                { id: 1, name: 'All Groups', disabled: false },
+                { id: 1, name: 'All Groups', filter: 'none', disabled: false },
-                { id: 2, name: 'Alpha', disabled: false },
+                { id: 2, name: 'Alpha', filter: 'Alpha Company', disabled: false },
-                { id: 3, name: 'Echo', disabled: false },
+                { id: 3, name: 'Echo', filter: 'Echo Company', disabled: false },
-                { id: 4, name: 'HHC', disabled: false },
+                { id: 4, name: 'HHC', filter: 'HHC', disabled: false },
-                { id: 5, name: 'Recruit', disabled: false },
+                { id: 5, name: 'Recruit', filter: 'Recruit', disabled: false },
             ],
 
-            unitFilter: { id: 1, name: 'All Groups', disabled: false },
+            unitFilter: { id: 1, name: 'All Groups', filter: 'none', disabled: false },
 
             roleFilters: [
                 { id: 1, name: 'All Roles', disabled: false },
@@ -40,6 +40,21 @@ export default {
             this.search = ''
             this.unitFilter = this.unitFilters[0];
             this.roleFilter = this.roleFilters[0];
+        },
+        filterByName(item) {
+            if (this.search != '')
+                return item.member_name.toLowerCase().includes(this.search.toLowerCase());
+            else
+                return true;
+        },
+        filterByUnit(item) {
+            if (this.unitFilter.filter != 'none')
+                return item.status == this.unitFilter.filter;
+            else
+                return true;
+        },
+        filterByRole(item) {    //THIS IS NOT IMPLEMENTED YET
+            return true;
         }
     },
     components: {
@@ -50,7 +65,15 @@ export default {
         Icon,
     },
     mounted() {
-        QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { console.log(value); this.items = value})
+        QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { this.items = value }) //console.log(value); for debug reasons
+    },
+    computed: {
+        filteredTable() {
+            var newTable = this.items;
+            newTable = newTable.filter(this.filterByUnit);
+            newTable = newTable.filter(this.filterByName);
+            return newTable;
+        }
     }
 }
 
@@ -62,7 +85,7 @@ export default {
 
         <h1>Members</h1>
         <div id="searchRow">
-            <input type="text" v-model="search" placeholder="Search..." />
+            <input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')" />
             <div id="dropdownWrapper">
 
                 <Listbox v-model="unitFilter" class="w-32 mx-2">
@@ -130,7 +153,7 @@ export default {
             </tr>
         </thead>
         <tbody id="tableBody">
-            <tr v-for="(item, index) in items">
+            <tr v-for="(item, index) in filteredTable">
                 <td>{{ item.member_name }}</td>
                 <td>{{ item.status }}</td>
                 <td>{{ item.rank }}</td>