Refactor filters

src/store/modules/users.js

@@ -32,14 +32,7 @@ const users = {
     currentPage: 1,
     pageSize: 50,
     actorTypeFilters: [],
-    filters: {
+    filters: [],
-      local: false,
-      external: false,
-      active: false,
-      need_approval: false,
-      deactivated: false,
-      unconfirmed: false
-    },
     passwordResetToken: {
       token: '',
       link: ''
@@ -153,14 +146,7 @@ const users = {
     },
     ClearUsersState({ commit }) {
       commit('SET_SEARCH_QUERY', '')
-      commit('SET_USERS_FILTERS',
+      commit('SET_USERS_FILTERS', [])
-        { local: false,
-          external: false,
-          active: false,
-          need_approval: false,
-          deactivated: false,
-          unconfirmed: false
-        })
     },
     async ClearFilters({ commit, dispatch, state }) {
       commit('CLEAR_USERS_FILTERS')
@@ -251,7 +237,7 @@ const users = {
     },
     async FetchUsers({ commit, dispatch, getters, state }, { page }) {
       commit('SET_LOADING', true)
-      const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
+      const filters = state.filters.join()
       const response = await fetchUsers(filters, state.actorTypeFilters, getters.authHost, getters.token, page)
       await dispatch('GetNodeInfo')
       loadUsers(commit, page, response.data)
@@ -302,7 +288,7 @@ const users = {
         commit('SET_LOADING', true)
         commit('SET_SEARCH_QUERY', query)
 
-        const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
+        const filters = state.filters.join()
         const response = await searchUsers(query, filters, state.actorTypeFilters, getters.authHost, getters.token, page)
 
         loadUsers(commit, page, response.data)
@@ -319,16 +305,7 @@ const users = {
       dispatch('SearchUsers', { query: state.searchQuery, page: 1 })
     },
     async ToggleUsersFilter({ commit, dispatch, state }, filters) {
-      const defaultFilters = {
+      commit('SET_USERS_FILTERS', filters)
-        local: false,
-        external: false,
-        active: false,
-        need_approval: false,
-        deactivated: false,
-        unconfirmed: false
-      }
-      const currentFilters = { ...defaultFilters, ...filters }
-      commit('SET_USERS_FILTERS', currentFilters)
       dispatch('SearchUsers', { query: state.searchQuery, page: 1 })
     },
     async UpdateActorType({ dispatch, getters }, { user, type, _userId, _statusId }) {

src/views/users/components/UsersFilter.vue

@@ -37,12 +37,10 @@ export default {
     }
   },
   created() {
-    const currentFilters = this.$data.value.reduce((acc, filter) => ({ ...acc, [filter]: true }), {})
+    this.$store.dispatch('ToggleUsersFilter', this.$data.value)
-    this.$store.dispatch('ToggleUsersFilter', currentFilters)
   },
   methods: {
     removeOppositeFilters() {
-      const filtersQuantity = Object.keys(this.$store.state.users.filters).length
       const currentFilters = []
       const indexOfLocal = this.$data.value.indexOf('local')
       const indexOfExternal = this.$data.value.indexOf('external')
@@ -54,10 +52,6 @@ export default {
       const indexOfService = this.$data.value.indexOf('Service')
       const indexOfApplication = this.$data.value.indexOf('Application')
 
-      if (this.$data.value.length === filtersQuantity) {
-        return []
-      }
-
       Math.max(indexOfLocal, indexOfExternal) > -1
         ? currentFilters.push(this.$data.value[Math.max(indexOfLocal, indexOfExternal)])
         : currentFilters
@@ -84,8 +78,7 @@ export default {
       const [allFilters, filters, actorTypeFilters] = this.removeOppositeFilters()
 
       this.$data.value = allFilters
-      const currentFilters = filters.reduce((acc, filter) => ({ ...acc, [filter]: true }), {})
+      this.$store.dispatch('ToggleUsersFilter', filters)
-      this.$store.dispatch('ToggleUsersFilter', currentFilters)
       this.$store.dispatch('ToggleActorTypeFilter', actorTypeFilters)
     }
   }

src/views/users/index.vue

@@ -249,6 +249,9 @@ export default {
     usersCount() {
       return this.$store.state.users.totalUsersCount
     },
+    pendingView() {
+      return this.$store.state.users.filters.includes('need_approval')
+    },
     width() {
       return this.isMobile ? 55 : false
     }