From b8b7e4b02167e631c4b21d521dfc22eddea11d64 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 25 Mar 2019 01:04:37 +0300
Subject: [PATCH] Add ability to choose only one filter in group
---
src/views/users/components/UsersFilter.vue | 60 ++++++++++++++++++----
1 file changed, 50 insertions(+), 10 deletions(-)
diff --git a/src/views/users/components/UsersFilter.vue b/src/views/users/components/UsersFilter.vue
index a866584a..f4a269c5 100644
--- a/src/views/users/components/UsersFilter.vue
+++ b/src/views/users/components/UsersFilter.vue
@@ -1,5 +1,12 @@
<template>
- <el-select v-model="value" placeholder="Select filter">
+ <el-select
+ v-model="value"
+ :collapse-tags="isMobile"
+ multiple
+ placeholder="Select filter"
+ class="select-field"
+ @change="handleFilterToggle"
+ @remove-tag="handleFilterToggle">
<el-option-group
v-for="group in filters"
:key="group.label"
@@ -20,24 +27,57 @@ export default {
filters: [{
label: 'By user type',
options: [{
- label: 'Show local',
- value: 'showLocal'
+ label: 'Local',
+ value: 'userType/showLocalUsersOnly'
}, {
- label: 'Show external',
- value: 'showExternal'
+ label: 'External',
+ value: 'userType/showExternalUsersOnly'
}]
}, {
label: 'By status',
options: [{
- label: 'Show Active',
- value: 'showActive'
+ label: 'Active',
+ value: 'userStatus/showActiveUsersOnly'
}, {
- label: 'Show Deactivated',
- value: 'showDeactivated'
+ label: 'Deactivated',
+ value: 'userStatus/showDeactivatedUsersOnly'
}]
}],
- value: ''
+ value: []
+ }
+ },
+ computed: {
+ isMobile() {
+ return this.$store.state.app.device === 'mobile'
+ }
+ },
+ methods: {
+ handleFilterToggle(value) {
+ const reversed = value.reverse()
+ const userTypeFilter = reversed.find(filter => filter.includes('userType'))
+ const userStatusFilter = reversed.find(filter => filter.includes('userStatus'))
+ const filters = [userTypeFilter, userStatusFilter].filter(item => item)
+ this.$data.value = filters
+ const filtersWithoutGroupnames = filters.reduce((acc, item) => {
+ const filter = item.split('/')[1]
+ acc.push(filter)
+ return acc
+ }, [])
+ this.$store.dispatch('ToggleUsersFilter', filtersWithoutGroupnames)
}
}
}
</script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+.select-field {
+ width: 350px;
+}
+@media
+only screen and (max-width: 760px),
+(min-device-width: 768px) and (max-device-width: 1024px) {
+ .select-field {
+ width: 48%;
+ }
+}
+</style>
--
GitLab