zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

accounts search by name works - but filters front end only

This commit is contained in:
Chad Derya 2019-09-09 12:28:51 +01:00
parent 71cfd9a108
commit f027bf260f
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/accounts/list.vue
View File

@ -2,13 +2,13 @@
<div class="app-container"> <div class="app-container">
<div class="filter-container"> <div class="filter-container">
<el-input v-model="listQuery.accountName" placeholder="Account Name or Email" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> <el-input v-model="accountName" 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"> <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
Search Search
</el-button> </el-button>
</div> </div>
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"> <el-table v-loading="listLoading" :data="filteredList" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="Name" width="200"> <el-table-column align="center" label="Name" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.name }}</span> <span>{{ scope.row.name }}</span>
@ -67,7 +67,9 @@ export default {
}, },
data() { data() {
return { return {
list: null, accountName: '',
originalList: null,
filteredList: null,
total: 0, total: 0,
listLoading: true, listLoading: true,
listQuery: { listQuery: {
@ -87,14 +89,17 @@ export default {
getList() { getList() {
this.listLoading = true this.listLoading = true
fetchAccountList(this.listQuery).then(response => { fetchAccountList(this.listQuery).then(response => {
this.list = response.data.docs this.originalList = response.data.docs
this.filteredList = this.originalList
this.total = response.data.total this.total = response.data.total
this.listLoading = false this.listLoading = false
}) })
}, },
handleFilter(query) { handleFilter() {
this.listQuery.page = 1 const searchQuery = this.accountName.toLowerCase()
this.getList() this.filteredList = this.originalList.filter(function(account) {
return account.name.toLowerCase().includes(searchQuery)
})
} }
} }
} }