Add checkboxes to select users and a list of actions

src/lang/en.js

@@ -188,7 +188,8 @@ export default {
     forceUnlisted: 'Force posts to be unlisted',
     sandbox: 'Force posts to be followers-only',
     disableRemoteSubscription: 'Disallow following user from remote instances',
-    disableAnySubscription: 'Disallow following user at all'
+    disableAnySubscription: 'Disallow following user at all',
+    selectUsers: 'Select users to apply actions to multiple users'
   },
   usersFilter: {
     inputPlaceholder: 'Select filter',

src/views/users/components/DropdownMenu.vue

+<template>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item
+      @click.native="grantRightToMultipleUsers('admin')">
+      {{ $t('users.grantAdmin') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="revokeRightToMultipleUsers('admin')">
+      {{ $t('users.revokeAdmin') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="grantRightToMultipleUsers('moderator')">
+      {{ $t('users.grantModerator') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="revokeRightToMultipleUsers('moderator')">
+      {{ $t('users.revokeModerator') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      divided
+      @click.native="activateMultipleUsers">
+      {{ $t('users.activateAccount') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="deactivateMultipleUsers">
+      {{ $t('users.deactivateAccount') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="deleteMultipleUsers">
+      {{ $t('users.deleteAccount') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      divided
+      @click.native="toggleTagForMultipleUsers('force_nsfw')">
+      {{ $t('users.forceNsfw') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('strip_media')">
+      {{ $t('users.stripMedia') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('force_unlisted')">
+      {{ $t('users.forceUnlisted') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('sandbox')">
+      {{ $t('users.sandbox') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('disable_remote_subscription')">
+      {{ $t('users.disableRemoteSubscription') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('disable_any_subscription')">
+      {{ $t('users.disableAnySubscription') }}
+    </el-dropdown-item>
+  </el-dropdown-menu>
+</template>
+
+<script>
+export default {
+  methods: {
+    toggleTagForMultipleUsers(tag) {
+      if (tag === 'disable_remote_subscription' || tag === 'disable_any_subscription') {
+        // filter users, because these actions can be applied only to local users
+      }
+    }
+  }
+}
+</script>

src/views/users/index.vue

@@ -5,7 +5,17 @@
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
-    <el-table v-loading="loading" :data="users" style="width: 100%">
+    <el-dropdown>
+      <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
+      <dropdown-menu v-if="showDropdownForMultipleUsers"/>
+      <el-dropdown-menu v-else>
+        <el-dropdown-item>
+          {{ $t('users.selectUsers') }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-table v-loading="loading" :data="users" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table-column v-if="isDesktop" type="selection" width="44" align="center"/>
       <el-table-column :min-width="width" :label="$t('users.id')" prop="id" />
       <el-table-column :label="$t('users.name')" prop="nickname">
         <template slot-scope="scope">
@@ -118,11 +128,18 @@
 <script>
 import debounce from 'lodash.debounce'
 import UsersFilter from './components/UsersFilter'
+import DropdownMenu from './components/DropdownMenu'
 
 export default {
   name: 'Users',
   components: {
-    UsersFilter
+    UsersFilter,
+    DropdownMenu
+  },
+  data: function() {
+    return {
+      selectedUsers: []
+    }
   },
   computed: {
     loading() {
@@ -148,6 +165,9 @@ export default {
     },
     width() {
       return this.isMobile ? 55 : false
+    },
+    showDropdownForMultipleUsers() {
+      return this.$data.selectedUsers.length > 0
     }
   },
   created() {
@@ -170,6 +190,9 @@ export default {
         this.$store.dispatch('SearchUsers', { query: searchQuery, page })
       }
     },
+    handleSelectionChange(value) {
+      this.$data.selectedUsers = value
+    },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
     },
@@ -206,6 +229,9 @@ export default {
   }
 }
 .users-container {
+  .actions-button {
+    margin-left: 15px;
+  }
   h1 {
     margin: 22px 0 0 15px;
   }