Ability to moderate users on the statuses page

CHANGELOG.md

@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Ability to fetch all statuses from a given instance
 - Grouped reports: now you can view reports, which are grouped by status (pagination is not implemented yet, though)
 - Ability to confirm users' emails and resend confirmation emails
+- Ability to moderate users on the statuses page
 
 ### Fixed
 

src/components/Status/index.vue

@@ -5,8 +5,10 @@
         <div class="status-header">
           <div class="status-account-container">
             <div class="status-account">
+              <el-checkbox @change="handleStatusSelection(status.account)">
                 <img :src="status.account.avatar" class="status-avatar-img">
                 <h3 class="status-account-name">{{ status.account.display_name }}</h3>
+              </el-checkbox>
             </div>
             <a :href="status.account.url" target="_blank" class="account">
               @{{ status.account.acct }}
@@ -179,6 +181,9 @@ export default {
     },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('YYYY-MM-DD HH:mm')
+    },
+    handleStatusSelection(account) {
+      this.$emit('status-selection', account)
     }
   }
 }
@@ -205,11 +210,13 @@ export default {
     align-items: center;
   }
   .status-avatar-img {
+    display: inline-block;
     width: 15px;
     height: 15px;
     margin-right: 5px;
   }
   .status-account-name {
+    display: inline-block;
     margin: 0;
     height: 22px;
   }

src/store/modules/users.js

@@ -47,6 +47,10 @@ const users = {
         return acc.filter(u => u.id !== user.id)
       }, state.fetchedUsers)
 
+      if (state.fetchedUsers.length === 0) {
+        return
+      }
+
       state.fetchedUsers = [...usersWithoutSwapped, ...users].sort((a, b) =>
         a.nickname.localeCompare(b.nickname)
       )

src/views/statuses/index.vue

@@ -11,8 +11,13 @@
           :label="instance"
           :value="instance"/>
       </el-select>
+      <multiple-users-menu
+        :selected-users="selectedUsers"
+        @apply-action="clearSelection"/>
+    </div>
+    <div v-for="status in statuses" :key="status.id" class="status-container">
+      <status :status="status" @status-selection="handleStatusSelection" />
     </div>
-    <status v-for="status in statuses" :key="status.id" :status="status" />
     <div v-if="statuses.length > 0" class="statuses-pagination">
       <el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
     </div>
@@ -21,16 +26,19 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import MultipleUsersMenu from '@/views/users/components/MultipleUsersMenu'
 import Status from '@/components/Status'
 
 export default {
   name: 'Statuses',
   components: {
+    MultipleUsersMenu,
     Status
   },
   data() {
     return {
       selectedInstance: '',
+      selectedUsers: [],
       page: 1,
       pageSize: 30
     }
@@ -63,6 +71,16 @@ export default {
         page: this.page,
         pageSize: this.pageSize
       })
+    },
+    clearSelection() {
+      // TODO
+    },
+    handleStatusSelection(user) {
+      if (this.selectedUsers.find(selectedUser => user.id === selectedUser.id) !== undefined) {
+        return
+      }
+
+      this.selectedUsers = [...this.selectedUsers, user]
     }
   }
 }
@@ -71,6 +89,9 @@ export default {
 <style rel='stylesheet/scss' lang='scss'>
 .statuses-container {
   padding: 0 15px;
+  .status-container {
+    margin: 0 0 10px;
+  }
 }
 .filter-container {
   margin: 22px 15px 15px 0;