Refactor

ui/components/App.vue

@@ -2,8 +2,12 @@
   <div>
     <div class="uk-container uk-padding">
       <h1 v-text="$gettext('Accounts')" />
-      <oc-grid v-if="selectedAccountsAmount > 0" key="selected-accounts-info" gutter="small" class="uk-flex-middle">
+      <oc-grid v-if="numberOfSelectedAccounts > 0" key="selected-accounts-info" gutter="small" class="uk-flex-middle">
         <span v-text="selectionInfoText" />
+        <span>|</span>
+        <div>
+          <oc-button v-text="$gettext('Clear selection')" variation="raw" @click="RESET_ACCOUNTS_SELECTION" />
+        </div>
         <div>
           <oc-action-drop class="accounts-actions-dropdown">
             <template v-slot:button>
@@ -36,7 +40,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions, mapState } from 'vuex'
+import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'
 import AccountsList from './accounts/AccountsList.vue'
 export default {
   name: 'App',
@@ -49,26 +53,27 @@ export default {
       return this.getAccountsSorted
     },
 
-    selectedAccountsAmount () {
+    numberOfSelectedAccounts () {
       return this.selectedAccounts.length
     },
 
     selectionInfoText () {
-      const translated = this.$ngettext('%{ amount } selected user', '%{ amount } selected users', this.selectedAccountsAmount)
+      const translated = this.$ngettext('%{ amount } selected user', '%{ amount } selected users', this.numberOfSelectedAccounts)
 
-      return this.$gettextInterpolate(translated, { amount: this.selectedAccountsAmount })
+      return this.$gettextInterpolate(translated, { amount: this.numberOfSelectedAccounts })
     },
 
     actions () {
       const actions = []
-      const isAnyAccountDisabled = this.selectedAccounts.some(account => !account.accountEnabled)
-      const isAnyAccountEnabled = this.selectedAccounts.some(account => account.accountEnabled)
+      const numberOfDisabledAccounts = this.selectedAccounts.filter(account => !account.accountEnabled).length
+      const isAnyAccountDisabled = numberOfDisabledAccounts > 0
+      const isAnyAccountEnabled = numberOfDisabledAccounts < this.numberOfSelectedAccounts
 
       if (isAnyAccountDisabled) {
         actions.push({
           id: 'accounts-actions-dropdown-action-enable',
           label: this.$gettext('Enable'),
-          handler: this.enableAccounts
+          handler: () => this.toggleAccountStatus(true)
         })
       }
 
@@ -76,7 +81,7 @@ export default {
         actions.push({
           id: 'accounts-actions-dropdown-action-disable',
           label: this.$gettext('Disable'),
-          handler: this.disableAccounts
+          handler: () => this.toggleAccountStatus(false)
         })
       }
 
@@ -84,10 +89,14 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Accounts', ['initialize', 'enableAccounts', 'disableAccounts'])
+    ...mapActions('Accounts', ['initialize', 'toggleAccountStatus']),
+    ...mapMutations('Accounts', ['RESET_ACCOUNTS_SELECTION'])
   },
   created () {
     this.initialize()
+  },
+  beforeDestroy () {
+    this.RESET_ACCOUNTS_SELECTION()
   }
 }
 </script>

ui/components/accounts/AccountsList.vue

@@ -8,7 +8,7 @@
               :value="areAllAccountsSelected"
               :label="$gettext('Select all users')"
               hide-label
-              @change="toggleAllAccountsSelection"
+              @change="toggleSelectionAll"
             />
           </oc-table-cell>
           <oc-table-cell shrink type="head" />
@@ -51,11 +51,7 @@ export default {
     ...mapGetters('Accounts', ['areAllAccountsSelected'])
   },
   methods: {
-    ...mapActions('Accounts', ['toggleSelectionAll']),
-
-    toggleAllAccountsSelection () {
-      this.toggleSelectionAll()
-    }
+    ...mapActions('Accounts', ['toggleSelectionAll'])
   }
 }
 </script>

ui/store/index.js

@@ -110,15 +110,15 @@ const actions = {
   },
 
   toggleSelectionAll ({ commit, getters, state }) {
-    getters.areAllAccountsSelected ? commit('SET_SELECTED_ACCOUNTS', []) : commit('SET_SELECTED_ACCOUNTS', [...state.accounts])
+    getters.areAllAccountsSelected ? commit('RESET_ACCOUNTS_SELECTION') : commit('SET_SELECTED_ACCOUNTS', [...state.accounts])
   },
 
-  async enableAccounts ({ commit, dispatch, state, rootGetters }) {
+  async toggleAccountStatus ({ commit, dispatch, state, rootGetters }, status) {
     const failedAccounts = []
     injectAuthToken(rootGetters.user.token)
 
     for (const account of state.selectedAccounts) {
-      if (account.accountEnabled) {
+      if (account.accountEnabled === status) {
         continue
       }
 
@@ -127,7 +127,7 @@ const actions = {
         body: {
           account: {
             id: account.id,
-            accountEnabled: true
+            accountEnabled: status
           },
           update_mask: {
             paths: ['AccountEnabled']
@@ -136,73 +136,29 @@ const actions = {
       })
 
       if (response.status === 201) {
-        console.log('Going to update')
-        commit('UPDATE_ACCOUNT', { ...account, accountEnabled: true })
+        commit('UPDATE_ACCOUNT', { ...account, accountEnabled: status })
       } else {
         failedAccounts.push({ account: account.diisplayName, statusText: response.statusText })
       }
     }
 
     if (failedAccounts.length === 1) {
+      const failedMessageTitle = status ? 'Failed to enable account.' : 'Failed to disable account.'
+
       dispatch('showMessage', {
-        title: 'Failed to enable account.',
+        title: failedMessageTitle,
         desc: failedAccounts[0].statusText,
         status: 'danger'
       }, { root: true })
     }
 
     if (failedAccounts.length > 1) {
+      const failedMessageTitle = status ? 'Failed to enable accounts.' : 'Failed to disable accounts.'
+      const failedMessageDesc = status ? 'Could not enable multiple accounts.' : 'Could not disable multiple accounts.'
+
       dispatch('showMessage', {
-        title: 'Failed to enable accounts.',
-        desc: 'Could not enable multiple accounts',
-        status: 'danger'
-      }, { root: true })
-    }
-
-    commit('RESET_ACCOUNTS_SELECTION')
-  },
-
-  async disableAccounts ({ commit, dispatch, state, rootGetters }) {
-    const failedAccounts = []
-    injectAuthToken(rootGetters.user.token)
-
-    for (const account of state.selectedAccounts) {
-      if (!account.accountEnabled) {
-        continue
-      }
-
-      const response = await AccountsService_UpdateAccount({
-        $domain: rootGetters.configuration.server,
-        body: {
-          account: {
-            id: account.id,
-            accountEnabled: false
-          },
-          update_mask: {
-            paths: ['AccountEnabled']
-          }
-        }
-      })
-
-      if (response.status === 201) {
-        commit('UPDATE_ACCOUNT', { ...account, accountEnabled: false })
-      } else {
-        failedAccounts.push({ account: account.diisplayName, statusText: response.statusText })
-      }
-    }
-
-    if (failedAccounts.length === 1) {
-      dispatch('showMessage', {
-        title: 'Failed to disable account.',
-        desc: failedAccounts[0].statusText,
-        status: 'danger'
-      }, { root: true })
-    }
-
-    if (failedAccounts.length > 1) {
-      dispatch('showMessage', {
-        title: 'Failed to disable accounts.',
-        desc: 'Could not disable multiple accounts',
+        title: failedMessageTitle,
+        desc: failedMessageDesc,
         status: 'danger'
       }, { root: true })
     }