forked from AkkomaGang/admin-fe
Add general function to toggle filters
This commit is contained in:
parent
ab12129b8a
commit
8d08d302ce
2 changed files with 23 additions and 29 deletions
|
@ -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 }) {
|
||||||
|
|
|
@ -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')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue