Apply group filtering on client side to save an api call

This commit is contained in:
Bubka 2020-11-23 12:58:44 +01:00
parent 13dc8b75e5
commit c895e95b87
2 changed files with 19 additions and 13 deletions

View File

@ -18,7 +18,7 @@ class TwoFAccountController extends Controller
*/ */
public function index() public function index()
{ {
return response()->json(TwoFAccount::ofGroup(Options::get('activeGroup'))->ordered()->get()->toArray()); return response()->json(TwoFAccount::ordered()->get()->toArray());
} }

View File

@ -157,7 +157,7 @@
<div class="is-clickable has-text-centered" v-if="!editMode"> <div class="is-clickable has-text-centered" v-if="!editMode">
<div class="columns" @click="toggleGroupSwitch"> <div class="columns" @click="toggleGroupSwitch">
<div class="column" v-if="!showGroupSwitch"> <div class="column" v-if="!showGroupSwitch">
{{ this.activeGroupName }} ({{ this.accounts.length }}) {{ activeGroupName }} ({{ filteredAccounts.length }})
<font-awesome-icon :icon="['fas', 'caret-down']" /> <font-awesome-icon :icon="['fas', 'caret-down']" />
</div> </div>
<div class="column" v-else> <div class="column" v-else>
@ -237,9 +237,18 @@
computed: { computed: {
filteredAccounts: { filteredAccounts: {
get: function() { get: function() {
return this.accounts.filter( return this.accounts.filter(
item => { item => {
return item.service.toLowerCase().includes(this.search.toLowerCase()) || item.account.toLowerCase().includes(this.search.toLowerCase()); if( parseInt(this.$root.appSettings.activeGroup) > 0 ) {
return (item.service.toLowerCase().includes(this.search.toLowerCase()) ||
item.account.toLowerCase().includes(this.search.toLowerCase())) &&
(item.group_id == parseInt(this.$root.appSettings.activeGroup))
}
else {
return (item.service.toLowerCase().includes(this.search.toLowerCase()) ||
item.account.toLowerCase().includes(this.search.toLowerCase()))
}
} }
); );
}, },
@ -314,7 +323,8 @@
service : data.service, service : data.service,
account : data.account ? data.account : '-', account : data.account ? data.account : '-',
icon : data.icon, icon : data.icon,
isConsistent : data.isConsistent isConsistent : data.isConsistent,
group_id : data.group_id,
}) })
}) })
@ -424,24 +434,20 @@
/** /**
* Set the provided group as the active group * Set the provided group as the active group
*/ */
async setActiveGroup(id) { setActiveGroup(id) {
this.form.activeGroup = id this.form.activeGroup = this.$root.appSettings.activeGroup = id
await this.form.post('/api/settings/options', {returnError: true}) this.form.post('/api/settings/options', {returnError: true})
.then(response => { .then(response => {
// everything's fine
this.$root.appSettings.activeGroup = response.data.settings.activeGroup
this.closeGroupSwitch()
}) })
.catch(error => { .catch(error => {
this.$router.push({ name: 'genericError', params: { err: error.response } }) this.$router.push({ name: 'genericError', params: { err: error.response } })
}); });
this.fetchAccounts() this.closeGroupSwitch()
}, },
/** /**