Move tag moderation to a separate column in users table

src/views/users/components/ModerationDropdown.vue

@@ -83,49 +83,6 @@
         @click.native="disableMfa(user.nickname)">
         {{ $t('users.disableMfa') }}
       </el-dropdown-item>
-      <el-dropdown-item
-        v-if="tagPolicyEnabled">
-        {{ $t('users.tags') }}:
-      </el-dropdown-item>
-      <el-select
-        v-if="tagPolicyEnabled"
-        :value="selectedTags"
-        multiple
-        filterable
-        allow-create
-        placeholder="Select Tags"
-        size="small"
-        class="select-tags"
-        @change="toggleTag($event, user)">
-        <el-option-group :label="$t('users.defaultTags')">
-          <el-option
-            v-for="option in defaultTags"
-            :value="option.tag"
-            :key="option.tag"
-            :label="option.label"
-            :class="{ 'active-tag': user.tags.includes(option.tag) }">
-            {{ option.label }}
-          </el-option>
-        </el-option-group>
-        <el-option-group :label="$t('users.customTags')">
-          <el-option
-            v-for="option in customTags"
-            :value="option.tag"
-            :key="option.tag"
-            :label="option.label"
-            :class="{ 'active-tag': user.tags.includes(option.tag) }"
-            class="capitalize">
-            {{ option.label }}
-          </el-option>
-        </el-option-group>
-      </el-select>
-      <el-dropdown-item
-        v-if="!tagPolicyEnabled"
-        divided
-        class="no-hover"
-        @click.native="enableTagPolicy">
-        {{ $t('users.enableTagPolicy') }}
-      </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
@@ -163,78 +120,14 @@ export default {
         })
       }
     },
-    customTags() {
-      return this.$store.state.users.tags
-        .filter(tag => !Object.keys(this.mapTags).includes(tag))
-        .map(tag => {
-          return { tag, label: tag.charAt(0).toUpperCase() + tag.slice(1) }
-        })
-    },
-    defaultTags() {
-      const tagsByType = this.user.local ? Object.keys(this.mapTags) : Object.keys(this.mapRemoteTags)
-      return tagsByType.filter(tag => this.$store.state.users.tags.includes(tag))
-        .map(tag => {
-          if (this.user.local) {
-            return { tag, label: this.mapTags[tag] }
-          } else {
-            return { tag, label: this.mapRemoteTags[tag] }
-          }
-        }, {})
-    },
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
-    },
-    mapRemoteTags() {
-      return {
-        'mrf_tag:media-force-nsfw': 'NSFW',
-        'mrf_tag:media-strip': 'Strip Media',
-        'mrf_tag:force-unlisted': 'Unlisted',
-        'mrf_tag:sandbox': 'Sandbox',
-        'mrf_tag:verified': 'Verified'
-      }
-    },
-    mapTags() {
-      return {
-        'mrf_tag:media-force-nsfw': 'NSFW',
-        'mrf_tag:media-strip': 'Strip Media',
-        'mrf_tag:force-unlisted': 'Unlisted',
-        'mrf_tag:sandbox': 'Sandbox',
-        'mrf_tag:verified': 'Verified',
-        'mrf_tag:disable-remote-subscription': 'Disable remote subscription',
-        'mrf_tag:disable-any-subscription': 'Disable any subscription'
-      }
-    },
-    selectedTags() {
-      return this.user.tags
-    },
-    tagPolicyEnabled() {
-      return this.$store.state.users.mrfPolicies.includes('Pleroma.Web.ActivityPub.MRF.TagPolicy')
     }
   },
   methods: {
     disableMfa(nickname) {
       this.$store.dispatch('DisableMfa', nickname)
     },
-    enableTagPolicy() {
-      this.$confirm(
-        this.$t('users.confirmEnablingTagPolicy'),
-        {
-          confirmButtonText: 'Yes',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-        this.$message({
-          type: 'success',
-          message: this.$t('users.enableTagPolicySuccessMessage')
-        })
-        this.$store.dispatch('EnableTagPolicy')
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: 'Canceled'
-        })
-      })
-    },
     getPasswordResetToken(nickname) {
       this.$emit('open-reset-token-dialog')
       this.$store.dispatch('GetPasswordResetToken', nickname)
@@ -299,11 +192,6 @@ export default {
         ? this.$store.dispatch('ActivateUsers', { users: [user], _userId: user.id })
         : this.$store.dispatch('DeactivateUsers', { users: [user], _userId: user.id })
     },
-    toggleTag(tags, user) {
-      tags.length > user.tags.length
-        ? this.$store.dispatch('AddTag', { users: [user], tag: tags.filter(tag => !user.tags.includes(tag))[0] })
-        : this.$store.dispatch('RemoveTag', { users: [user], tag: user.tags.filter(tag => !tags.includes(tag))[0] })
-    },
     toggleUserRight(user, right) {
       user.roles[right]
         ? this.$store.dispatch('DeleteRight', { users: [user], right, _userId: user.id, _statusId: this.statusId })
@@ -314,9 +202,6 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
-  .capitalize {
-    text-transform: capitalize;
-  }
   .el-dropdown-menu--small  .el-dropdown-menu__item.el-dropdown-menu__item--divided.actor-type-dropdown:before {
     margin: 0 0;
     height: 0;
@@ -371,10 +256,6 @@ export default {
       margin-top: 0;
     }
   }
-  .select-tags {
-    padding: 2px 15px 0 15px;
-    width: 100%;
-  }
   @media only screen and (max-width:480px) {
     .moderate-user-button {
       width: 100%

src/views/users/index.vue

@@ -83,6 +83,42 @@
           </el-tooltip>
         </template>
       </el-table-column>
+      <el-table-column :min-width="width" :label="$t('users.tags')" header-align="center">
+        <template slot-scope="scope">
+          <el-select
+            v-if="tagPolicyEnabled"
+            :value="scope.row.tags"
+            multiple
+            filterable
+            allow-create
+            placeholder="Add Tags"
+            size="small"
+            class="select-tags"
+            @change="toggleTag($event, scope.row)">
+            <el-option-group :label="$t('users.defaultTags')">
+              <el-option
+                v-for="option in defaultTags(scope.row.local)"
+                :value="option.tag"
+                :key="option.tag"
+                :label="option.label"
+                :class="{ 'active-tag': scope.row.tags.includes(option.tag) }">
+                {{ option.label }}
+              </el-option>
+            </el-option-group>
+            <el-option-group :label="$t('users.customTags')">
+              <el-option
+                v-for="option in customTags()"
+                :value="option.tag"
+                :key="option.tag"
+                :label="option.label"
+                :class="{ 'active-tag': scope.row.tags.includes(option.tag) }"
+                class="capitalize">
+                {{ option.label }}
+              </el-option>
+            </el-option-group>
+          </el-select>
+        </template>
+      </el-table-column>
       <el-table-column v-if="pendingView && isDesktop" :label="$t('users.registrationReason')">
         <template slot-scope="scope">
           <el-tooltip
@@ -160,15 +196,6 @@ export default {
     }
   },
   computed: {
-    loading() {
-      return this.$store.state.users.loading
-    },
-    normalizedUsersCount() {
-      return numeral(this.$store.state.users.totalUsersCount).format('0a')
-    },
-    pageSize() {
-      return this.$store.state.users.pageSize
-    },
     currentPage() {
       return this.$store.state.users.currentPage
     },
@@ -178,15 +205,47 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    loading() {
+      return this.$store.state.users.loading
+    },
+    mapRemoteTags() {
+      return {
+        'mrf_tag:media-force-nsfw': 'NSFW',
+        'mrf_tag:media-strip': 'Strip Media',
+        'mrf_tag:force-unlisted': 'Unlisted',
+        'mrf_tag:sandbox': 'Sandbox',
+        'mrf_tag:verified': 'Verified'
+      }
+    },
+    mapTags() {
+      return {
+        'mrf_tag:media-force-nsfw': 'NSFW',
+        'mrf_tag:media-strip': 'Strip Media',
+        'mrf_tag:force-unlisted': 'Unlisted',
+        'mrf_tag:sandbox': 'Sandbox',
+        'mrf_tag:verified': 'Verified',
+        'mrf_tag:disable-remote-subscription': 'Disable remote subscription',
+        'mrf_tag:disable-any-subscription': 'Disable any subscription'
+      }
+    },
+    normalizedUsersCount() {
+      return numeral(this.$store.state.users.totalUsersCount).format('0a')
+    },
+    pageSize() {
+      return this.$store.state.users.pageSize
+    },
+    pendingView() {
+      return this.$store.state.users.filters['need_approval']
+    },
+    tagPolicyEnabled() {
+      return this.$store.state.users.mrfPolicies.includes('Pleroma.Web.ActivityPub.MRF.TagPolicy')
+    },
     users() {
       return this.$store.state.users.fetchedUsers
     },
     usersCount() {
       return this.$store.state.users.totalUsersCount
     },
-    pendingView() {
-      return this.$store.state.users.filters['need_approval']
-    },
     width() {
       return this.isMobile ? 55 : false
     }
@@ -217,6 +276,44 @@ export default {
       await this.$store.dispatch('CreateNewAccount', accountData)
       this.createAccountDialogOpen = false
     },
+    customTags() {
+      return this.$store.state.users.tags
+        .filter(tag => !Object.keys(this.mapTags).includes(tag))
+        .map(tag => {
+          return { tag, label: tag.charAt(0).toUpperCase() + tag.slice(1) }
+        })
+    },
+    defaultTags(userLocal) {
+      const tagsByType = userLocal ? Object.keys(this.mapTags) : Object.keys(this.mapRemoteTags)
+      return tagsByType.filter(tag => this.$store.state.users.tags.includes(tag))
+        .map(tag => {
+          if (userLocal) {
+            return { tag, label: this.mapTags[tag] }
+          } else {
+            return { tag, label: this.mapRemoteTags[tag] }
+          }
+        }, {})
+    },
+    enableTagPolicy() {
+      this.$confirm(
+        this.$t('users.confirmEnablingTagPolicy'),
+        {
+          confirmButtonText: 'Yes',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }).then(() => {
+        this.$message({
+          type: 'success',
+          message: this.$t('users.enableTagPolicySuccessMessage')
+        })
+        this.$store.dispatch('EnableTagPolicy')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: 'Canceled'
+        })
+      })
+    },
     getFirstLetter(str) {
       return str.charAt(0).toUpperCase()
     },
@@ -247,6 +344,11 @@ export default {
     },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
+    },
+    toggleTag(tags, user) {
+      tags.length > user.tags.length
+        ? this.$store.dispatch('AddTag', { users: [user], tag: tags.filter(tag => !user.tags.includes(tag))[0] })
+        : this.$store.dispatch('RemoveTag', { users: [user], tag: user.tags.filter(tag => !tags.includes(tag))[0] })
     }
   }
 }
@@ -282,6 +384,9 @@ export default {
     color: #bbb;
   }
 }
+.capitalize {
+  text-transform: capitalize;
+}
 .el-dropdown-link:hover {
     cursor: pointer;
     color: #409EFF;
@@ -331,6 +436,10 @@ export default {
     float: right;
     margin-left: 10px;
   }
+  .select-tags {
+    padding: 2px 15px 0 15px;
+    width: 100%;
+  }
   .filter-container {
     display: flex;
     height: 36px;