Toggle user activation

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 }

src/store/modules/users.js

-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)
     }
   }
 }

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)
     }
   }
 }