use compute over tracking state

src/components/settings_modal/admin_tabs/users_tab.js

@@ -15,28 +15,37 @@ const UsersTab = {
   },
   data() {
     return {
-      init: false, /* avoid fetching before our filters got initialized */
+      init: false,
-      /* adjust filters_... options here, mounted() will adjust the other flags accordingly */
       filters_origin: 'local',
       filters_activity: 'all',
       filters_permission: 'all',
       filters_query: '',
       filters_name: '',
       filters_email: '',
-      filters: {
-        local: false,
-        external: false,
-        active: false,
-        need_approval: false,
-        unconfirmed: false,
-        deactivated: false,
-        is_admin: false,
-        is_moderator: false
-      },
       expandedUser: null,
       loading: false
     }
   },
+  computed: {
+    filters_is_admin () {
+      return this.filters_permission === 'admin' || this.filters_permission === 'modsnadmins'
+    },
+    filters_is_moderator () {
+      return this.filters_permission === 'moderator' || this.filters_permission === 'modsnadmins'
+    },
+    filters_active () {
+      return this.filters_activity === 'active'
+    },
+    filters_deactivated () {
+      return this.filters_activity === 'deactivated'
+    },
+    filters_local () {
+      return this.filters_origin === 'local'
+    },
+    filters_external () {
+      return this.filters_origin === 'external'
+    }
+  },
   components: {
     Checkbox,
     Select,
@@ -47,66 +56,19 @@ const UsersTab = {
     TabSwitcher,
   },
   methods: {
-    update_origin (v) {
-      switch (v) {
-        case 'local':
-          this.filters.local = true
-          this.filters.external = false
-          break;
-        case 'external':
-          this.filters.local = false
-          this.filters.external = true
-          break;
-        default: // 'all'
-          this.filters.local = false
-          this.filters.external = false
-          break;
-      }
-      this.reset()
-    },
-    update_activity (v) {
-      switch (v) {
-        case 'active':
-          this.filters.active = true
-          this.filters.deactivated = false
-          break;
-        case 'deactivated':
-          this.filters.active = false
-          this.filters.deactivated = true
-          break;
-        default: // 'all'
-          this.filters.active = false
-          this.filters.deactivated = false
-          break;
-      }
-      this.reset()
-    },
-    update_permission (v) {
-      switch (v) {
-        case 'admin':
-          this.filters.is_admin = true
-          this.filters.is_moderator = false
-          break;
-        case 'moderator':
-          this.filters.is_admin = false
-          this.filters.is_moderator = true
-          break;
-        case 'modsnadmins':
-          this.filters.is_admin = true
-          this.filters.is_moderator = true
-          break;
-        default: // 'all'
-          this.filters.is_admin = false
-          this.filters.is_moderator = false
-          break;
-      }
-      this.reset()
-    },
     fetch_page (store, opts) {
       if(!this.init) return new Promise(() => [])
+      const filters = {
+        is_admin: this.filters_is_admin,
+        is_moderator: this.filters_is_moderator,
+        active: this.filters_active,
+        deactivated: this.filters_deactivated,
+        local: this.filters_local,
+        external: this.filters_external
+      }
       const users = store.dispatch('fetchAdminUsers', { ...opts, ...{
         query: this.filters_query,
-        filters: this.filters,
+        filters,
         name: this.filters_name,
         email: this.filters_email
       }})
@@ -130,10 +92,6 @@ const UsersTab = {
     }
   },
   mounted () {
-    /* make sure init state is correct */
-    this.update_origin(this.filters_origin)
-    this.update_activity(this.filters_activity)
-    this.update_permission(this.filters_permission)
     this.init = true
     this.reset()
   }

src/components/settings_modal/admin_tabs/users_tab.vue

@@ -31,8 +31,8 @@
         </li>
         <li>
           <Select
-            :model-value="filters_origin"
+            v-model="filters_origin"
-            @update:model-value="v => update_origin(v)"
+            @update:model-value="reset"
           >
             <option
               value="all"
@@ -53,8 +53,8 @@
         </li>
         <li>
           <Select
-            :model-value="filters_activity"
+            v-model="filters_activity"
-            @update:model-value="v => update_activity(v)"
+            @update:model-value="reset"
           >
             <option
               value="all"
@@ -75,8 +75,8 @@
         </li>
         <li>
           <Select
-            :model-value="filters_permission"
+            v-model="filters_permission"
-            @update:model-value="v => update_permission(v)"
+            @update:model-value="reset"
           >
             <option
               value="all"