Return select multiple filters

src/store/modules/users.js

@@ -42,8 +42,8 @@ const users = {
     SET_SEARCH_QUERY: (state, query) => {
       state.searchQuery = query
     },
-    SET_USERS_FILTER: (state, filters) => {
-      state.filters = filters
+    SET_USERS_FILTER: (state, filter) => {
+      state.filters[filter] = !state.filters[filter]
     }
   },
   actions: {
@@ -72,15 +72,8 @@ const users = {
         loadUsers(commit, page, response.data)
       }
     },
-    async ToggleUsersFilter({ commit, dispatch, state }, filters) {
-      const newFilters = Object.keys(state.filters).reduce((acc, filter) => {
-        if (filters.includes(filter)) {
-          return { ...acc, [filter]: true }
-        } else {
-          return { ...acc, [filter]: false }
-        }
-      }, {})
-      commit('SET_USERS_FILTER', newFilters)
+    async ToggleUsersFilter({ commit, dispatch, state }, filter) {
+      commit('SET_USERS_FILTER', filter)
       // dispatch('SearchUsers', { query: state.searchQuery, page: 1 })
     },
     async ToggleRight({ commit, getters }, { user, right }) {

src/views/users/components/UsersFilter.vue

@@ -28,19 +28,19 @@ export default {
         label: 'By user type',
         options: [{
           label: 'Local',
-          value: 'userType/showLocalUsersOnly'
+          value: 'showLocalUsersOnly'
         }, {
           label: 'External',
-          value: 'userType/showExternalUsersOnly'
+          value: 'showExternalUsersOnly'
         }]
       }, {
         label: 'By status',
         options: [{
           label: 'Active',
-          value: 'userStatus/showActiveUsersOnly'
+          value: 'showActiveUsersOnly'
         }, {
           label: 'Deactivated',
-          value: 'userStatus/showDeactivatedUsersOnly'
+          value: 'showDeactivatedUsersOnly'
         }]
       }],
       value: []
@@ -52,18 +52,9 @@ export default {
     }
   },
   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)
+    handleFilterToggle(filters) {
+      const currentFilter = filters[filters.length - 1]
+      this.$store.dispatch('ToggleUsersFilter', currentFilter)
     }
   }
 }