Add general function to toggle filters

This commit is contained in:
Angelina Filippova 2019-03-25 16:25:29 +03:00
parent ab12129b8a
commit 8d08d302ce
2 changed files with 23 additions and 29 deletions

View file

@ -8,10 +8,10 @@ const users = {
totalUsersCount: 0, totalUsersCount: 0,
currentPage: 1, currentPage: 1,
filters: { filters: {
showLocalUsersOnly: false, localUsersOnly: false,
showExternalUsersOnly: false, externalUsersOnly: false,
showActiveUsersOnly: false, activeUsersOnly: false,
showDeactivatedUsersOnly: false deactivatedUsersOnly: false
} }
}, },
mutations: { mutations: {
@ -42,16 +42,8 @@ const users = {
SET_SEARCH_QUERY: (state, query) => { SET_SEARCH_QUERY: (state, query) => {
state.searchQuery = query state.searchQuery = query
}, },
SET_USERS_FILTER: (state, filter) => { SET_USERS_FILTERS: (state, filters) => {
state.filters[filter] = !state.filters[filter] state.filters = filters
},
CLEAR_USERS_FILTERS: (state) => {
state.filters = {
showLocalUsersOnly: false,
showExternalUsersOnly: false,
showActiveUsersOnly: false,
showDeactivatedUsersOnly: false
}
} }
}, },
actions: { actions: {
@ -80,8 +72,15 @@ const users = {
loadUsers(commit, page, response.data) loadUsers(commit, page, response.data)
} }
}, },
async ToggleUsersFilter({ commit, dispatch, state }, filter) { async ToggleUsersFilter({ commit, dispatch, state }, filters) {
commit('SET_USERS_FILTER', filter) const defaultFilters = {
localUsersOnly: false,
externalUsersOnly: false,
activeUsersOnly: false,
deactivatedUsersOnly: false
}
const currentFilters = { ...defaultFilters, ...filters }
commit('SET_USERS_FILTERS', currentFilters)
dispatch('SearchUsers', { query: state.searchQuery, page: 1 }) dispatch('SearchUsers', { query: state.searchQuery, page: 1 })
}, },
async ClearFilters({ commit, dispatch, state }) { async ClearFilters({ commit, dispatch, state }) {

View file

@ -6,9 +6,7 @@
clearable clearable
placeholder="Select filter" placeholder="Select filter"
class="select-field" class="select-field"
@change="handleFilterToggle" @change="toggleFilters">
@clear="clearFilters"
@remove-tag="handleFilterToggle">
<el-option-group <el-option-group
v-for="group in filters" v-for="group in filters"
:key="group.label" :key="group.label"
@ -30,19 +28,19 @@ export default {
label: 'By user type', label: 'By user type',
options: [{ options: [{
label: 'Local', label: 'Local',
value: 'showLocalUsersOnly' value: 'localUsersOnly'
}, { }, {
label: 'External', label: 'External',
value: 'showExternalUsersOnly' value: 'externalUsersOnly'
}] }]
}, { }, {
label: 'By status', label: 'By status',
options: [{ options: [{
label: 'Active', label: 'Active',
value: 'showActiveUsersOnly' value: 'activeUsersOnly'
}, { }, {
label: 'Deactivated', label: 'Deactivated',
value: 'showDeactivatedUsersOnly' value: 'deactivatedUsersOnly'
}] }]
}], }],
value: [] value: []
@ -54,12 +52,9 @@ export default {
} }
}, },
methods: { methods: {
handleFilterToggle(filters) { toggleFilters() {
const currentFilter = filters[filters.length - 1] const currentFilters = this.$data.value.reduce((acc, filter) => ({ ...acc, [filter]: true }), {})
this.$store.dispatch('ToggleUsersFilter', currentFilter) this.$store.dispatch('ToggleUsersFilter', currentFilters)
},
clearFilters() {
this.$store.dispatch('ClearFilters')
} }
} }
} }