Add general function to toggle filters

src/store/modules/users.js

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

src/views/users/components/UsersFilter.vue

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