From a90cdd1cace5c5937b1c5e85f1de174d4eec8954 Mon Sep 17 00:00:00 2001
From: Maxim Filippov <colixer@gmail.com>
Date: Tue, 26 Feb 2019 22:50:25 +0300
Subject: [PATCH] Toggle user activation

---
 src/api/users.js           |  9 ++++++++-
 src/store/modules/users.js | 16 ++++++++++++++--
 src/views/users/index.vue  | 22 +++++++++++++++-------
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/api/users.js b/src/api/users.js
index 167c3303..b9740cff 100644
--- a/src/api/users.js
+++ b/src/api/users.js
@@ -7,4 +7,11 @@ export async function fetchUsers() {
   })
 }
 
-export default { fetchUsers }
+export async function toggleUserActivation(nickname) {
+  return await request({
+    url: `/api/pleroma/admin/users/${nickname}/toggle_activation`,
+    method: 'patch'
+  })
+}
+
+export default { fetchUsers, toggleUserActivation }
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index e96dbe09..f77db0fa 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -1,4 +1,4 @@
-import { fetchUsers } from '@/api/users'
+import { fetchUsers, toggleUserActivation } from '@/api/users'
 
 const user = {
   state: {
@@ -7,10 +7,17 @@ const user = {
   },
   mutations: {
     SET_USERS: (state, users) => {
-      state.fetchedUsers = users
+      state.fetchedUsers = users.sort((a, b) => a.id.localeCompare(b.id))
     },
     SET_LOADING: (state, status) => {
       state.loading = status
+    },
+    SWAP_USER: (state, user) => {
+      const usersWithoutSwapped = state.fetchedUsers.filter((u) => {
+        return u.id !== user.id
+      })
+
+      state.fetchedUsers = [...usersWithoutSwapped, user].sort((a, b) => a.id.localeCompare(b.id))
     }
   },
   actions: {
@@ -19,6 +26,11 @@ const user = {
 
       commit('SET_USERS', response.data)
       commit('SET_LOADING', false)
+    },
+    async ToggleUserActivation({ commit }, nickname) {
+      const response = await toggleUserActivation(nickname)
+
+      commit('SWAP_USER', response.data)
     }
   }
 }
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 86b27a7f..69f16127 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -10,14 +10,22 @@
         label="ID"
         width="100" />
       <el-table-column
-        prop="fullname"
+        prop="nickname"
         label="Name" />
+      <el-table-column
+        label="Status">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.deactivated ? 'danger' : 'success'">
+            {{ scope.row.deactivated ? 'deactivated' : 'active' }}
+          </el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
         fixed="right"
-        label="Operations"
-        width="120">
-        <template>
-          <el-button type="text" size="small" @click="handleRevoke">Disable user</el-button>
+        label="Actions">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.deactivated" type="text" size="small" @click="handleDeactivate(scope.row)">Activate</el-button>
+          <el-button v-else type="text" size="small" @click="handleDeactivate(scope.row)">Deactivate</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -40,8 +48,8 @@ export default {
     this.$store.dispatch('FetchUsers')
   },
   methods: {
-    handleRevoke() {
-
+    handleDeactivate({ nickname }) {
+      this.$store.dispatch('ToggleUserActivation', nickname)
     }
   }
 }