Move actions that manage users from Reports to reports module

src/store/modules/reports.js

@@ -1,4 +1,11 @@
 import { changeState, fetchReports, createNote, deleteNote } from '@/api/reports'
+import {
+  activateUsers,
+  deactivateUsers,
+  deleteUsers,
+  tagUser,
+  untagUser
+} from '@/api/users'
 
 const reports = {
   state: {
@@ -34,6 +41,34 @@ const reports = {
     }
   },
   actions: {
+    async ActivateUserFromReports({ commit, dispatch, getters, state }, { user, reportId }) {
+      try {
+        await activateUsers([user.nickname], getters.authHost, getters.token)
+      } catch (_e) {
+        return
+      } finally {
+        const updatedReports = state.fetchedReports.map(report => {
+          const updatedAccount = { ...user, deactivated: false }
+          return report.id === reportId ? { ...report, account: updatedAccount } : report
+        })
+        commit('SET_REPORTS', updatedReports)
+      }
+      dispatch('SuccessMessage')
+    },
+    async AddTagFromReports({ commit, dispatch, getters, state }, { user, tag, reportId }) {
+      try {
+        await tagUser([user.nickname], [tag], getters.authHost, getters.token)
+      } catch (_e) {
+        return
+      } finally {
+        const updatedReports = state.fetchedReports.map(report => {
+          const updatedAccount = { ...user, tags: [...user.tags, tag] }
+          return report.id === reportId ? { ...report, account: updatedAccount } : report
+        })
+        commit('SET_REPORTS', updatedReports)
+      }
+      dispatch('SuccessMessage')
+    },
     async ChangeReportState({ commit, dispatch, getters, state }, reportsData) {
       changeState(reportsData, getters.authHost, getters.token)
 
@@ -48,6 +83,34 @@ const reports = {
     ClearFetchedReports({ commit }) {
       commit('SET_REPORTS', [])
     },
+    async DeactivateUserFromReports({ commit, dispatch, getters, state }, { user, reportId }) {
+      try {
+        await deactivateUsers([user.nickname], getters.authHost, getters.token)
+      } catch (_e) {
+        return
+      } finally {
+        const updatedReports = state.fetchedReports.map(report => {
+          const updatedAccount = { ...user, deactivated: true }
+          return report.id === reportId ? { ...report, account: updatedAccount } : report
+        })
+        commit('SET_REPORTS', updatedReports)
+      }
+      dispatch('SuccessMessage')
+    },
+    async DeleteUserFromReports({ commit, dispatch, getters, state }, { user, reportId }) {
+      try {
+        await deleteUsers([user.nickname], getters.authHost, getters.token)
+      } catch (_e) {
+        return
+      } finally {
+        const updatedReports = state.fetchedReports.map(report => {
+          const updatedAccount = { ...user, deactivated: true }
+          return report.id === reportId ? { ...report, account: updatedAccount } : report
+        })
+        commit('SET_REPORTS', updatedReports)
+      }
+      dispatch('SuccessMessage')
+    },
     async FetchReports({ commit, getters, state }, page) {
       commit('SET_LOADING', true)
       const { data } = await fetchReports(state.stateFilter, page, state.pageSize, getters.authHost, getters.token)
@@ -64,6 +127,20 @@ const reports = {
       commit('SET_OPEN_REPORTS_COUNT', data.total)
       commit('SET_LOADING', false)
     },
+    async RemoveTagFromReports({ commit, dispatch, getters, state }, { user, tag, reportId }) {
+      try {
+        await untagUser([user.nickname], [tag], getters.authHost, getters.token)
+      } catch (_e) {
+        return
+      } finally {
+        const updatedReports = state.fetchedReports.map(report => {
+          const updatedAccount = { ...user, tags: user.tags.filter(userTag => userTag !== tag) }
+          return report.id === reportId ? { ...report, account: updatedAccount } : report
+        })
+        commit('SET_REPORTS', updatedReports)
+      }
+      dispatch('SuccessMessage')
+    },
     SetReportsFilter({ commit }, filter) {
       commit('SET_REPORTS_FILTER', filter)
     },

src/views/reports/components/ModerateUserDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown trigger="click">
+  <el-dropdown :hide-on-click="false" trigger="click">
     <el-button :disabled="!account.id" plain size="small" icon="el-icon-files">{{ $t('reports.moderateUser') }}
       <i class="el-icon-arrow-down el-icon--right"/>
     </el-button>
@@ -11,7 +11,7 @@
       </el-dropdown-item>
       <el-dropdown-item
         v-if="showDeactivatedButton(account.id)"
-        @click.native="handleDeletion(account.id)">
+        @click.native="handleDeletion(account)">
         {{ $t('users.deleteAccount') }}
       </el-dropdown-item>
       <el-dropdown-item
@@ -64,6 +64,10 @@ export default {
     account: {
       type: Object,
       required: true
+    },
+    reportId: {
+      type: String,
+      required: true
     }
   },
   computed: {
@@ -74,8 +78,8 @@ export default {
   methods: {
     handleDeactivation(user) {
       user.deactivated
-        ? this.$store.dispatch('ActivateUsers', { users: [user], _userId: user.id })
-        : this.$store.dispatch('DeactivateUsers', { users: [user], _userId: user.id })
+        ? this.$store.dispatch('ActivateUserFromReports', { user, reportId: this.reportId })
+        : this.$store.dispatch('DeactivateUserFromReports', { user, reportId: this.reportId })
     },
     handleDeletion(user) {
       this.$confirm(
@@ -85,7 +89,7 @@ export default {
           cancelButtonText: 'Cancel',
           type: 'warning'
         }).then(() => {
-        this.$store.dispatch('DeleteUsers', { users: [user], _userId: user.id })
+        this.$store.dispatch('DeleteUserFromReports', { user, reportId: this.reportId })
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -98,8 +102,8 @@ export default {
     },
     toggleTag(user, tag) {
       user.tags.includes(tag)
-        ? this.$store.dispatch('RemoveTag', { users: [user], tag })
-        : this.$store.dispatch('AddTag', { users: [user], tag })
+        ? this.$store.dispatch('RemoveTagFromReports', { user, tag, reportId: this.reportId })
+        : this.$store.dispatch('AddTagFromReports', { user, tag, reportId: this.reportId })
     }
   }
 }

src/views/reports/components/Report.vue

@@ -24,7 +24,7 @@
                   <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <moderate-user-dropdown v-if="propertyExists(report.account, 'nickname')" :account="report.account"/>
+              <moderate-user-dropdown v-if="propertyExists(report.account, 'nickname')" :account="report.account" :report-id="report.id" />
             </div>
           </div>
           <el-divider class="divider"/>