Account and user search now working, same as before will be a bit buggy if you want to navigate through paginate tabs with an unfiltered list with text in the input field, if that's a big problem we can rethink it :)

src/api/account.js

@@ -7,6 +7,10 @@ export function fetchList(query) {
   return axios.get(`${apiUrl}/account/search`, { params: query })
 }
 
+export function fetchSubstringList(substring, query) { // This query expects that you have setthe platform in the calling class
+  return axios.get(`${apiUrl}/account/search/${substring}/`, { params: query })
+}
+
 export function fetchRelationships(query) {
   return axios.get(`${apiUrl}/account/relationship`, { params: query })
 }

src/views/accounts/list.vue

@@ -2,13 +2,13 @@
   <div class="app-container">
 
     <div class="filter-container">
-      <el-input v-model="accountName" placeholder="Account Name" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="substring" placeholder="Account Name" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
         Search
       </el-button>
     </div>
 
-    <el-table v-loading="listLoading" :data="filteredList" border fit highlight-current-row style="width: 100%">
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
       <el-table-column align="center" label="Name" width="200">
         <template slot-scope="scope">
           <span>{{ scope.row.name }}</span>
@@ -50,6 +50,7 @@
 
 <script>
 const fetchAccountList = require('@/api/account').fetchList
+const fetchSubstringList = require('@/api/account').fetchSubstringList
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 export default {
@@ -68,14 +69,14 @@ export default {
   data() {
     return {
       accountName: '',
-      originalList: null,
+      list: null,
-      filteredList: null,
       total: 0,
       listLoading: true,
       listQuery: {
         page: 1,
         limit: 20
-      }
+      },
+      substring: ''
     }
   },
   created() {
@@ -87,19 +88,30 @@ export default {
   },
   methods: {
     getList() {
+      if (this.substring === '') {
+        this.getFullList()
+      } else {
+        this.getSubstring()
+      }
+    },
+    getFullList() {
       this.listLoading = true
       fetchAccountList(this.listQuery).then(response => {
-        this.originalList = response.data.docs
+        this.list = response.data.docs
-        this.filteredList = this.originalList
         this.total = response.data.total
         this.listLoading = false
       })
     },
-    handleFilter() {
+    getSubstring() {
-      const searchQuery = this.accountName.toLowerCase()
+      fetchSubstringList(this.substring, this.listQuery).then(response => {
-      this.filteredList = this.originalList.filter(function(account) {
+        console.log(response)
-        return account.name.toLowerCase().includes(searchQuery)
+        this.list = response.data.docs
+        this.total = response.data.total
       })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
     }
   }
 }

src/views/users/list.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
 
     <div class="filter-container">
-      <input v-model="substring" placeholder="Search Accounts" class="filter-item">
+      <el-input v-model="substring" placeholder="Search Users" class="filter-item" style="width: 200px;" @keyup.enter.native="handleFilter" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
         Search
       </el-button>
@@ -112,6 +112,13 @@ export default {
     this.getFullList()
   },
   methods: {
+    getList() {
+      if (this.substring === '') {
+        this.getFullList()
+      } else {
+        this.getSubstring()
+      }
+    },
     getFullList() {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {
@@ -128,14 +135,6 @@ export default {
         this.total = response.data.total
       })
     },
-    getList() {
-      console.log(this.listQuery)
-      if (this.substring === '') {
-        this.getFullList()
-      } else {
-        this.getSubstring()
-      }
-    },
     handleFilter() {
       this.listQuery.page = 1
       this.getList()