Iterate over list of tags to render tags moderation in Multiple Users menu

src/views/users/components/MultipleUsersMenu.vue

@@ -61,83 +61,27 @@
         @click.native="requirePasswordReset">
         {{ $t('users.requirePasswordReset') }}
       </el-dropdown-item>
-      <el-dropdown-item v-if="tagPolicyEnabled" divided class="no-hover">
+      <el-dropdown-item v-if="tagPolicyEnabled" divided>
-        <div class="tag-container">
+        <el-dropdown class="multiple-tags-moderation">
-          <span class="tag-text">{{ $t('users.forceNsfw') }}</span>
+          <div>
-          <el-button-group class="tag-button-group">
+            {{ $t('users.tags') }}<i class="el-icon-arrow-down el-icon--right" />
-            <el-button size="mini" @click.native="addTagForMultipleUsers('mrf_tag:media-force-nsfw')">
+          </div>
-              {{ $t('users.apply') }}
+          <el-dropdown-menu slot="dropdown">
-            </el-button>
+            <el-dropdown-item v-for="option in tags" :key="option.tag" class="no-hover">
-            <el-button size="mini" @click.native="removeTagFromMultipleUsers('mrf_tag:media-force-nsfw')">
+              <div class="tag-container">
-              {{ $t('users.remove') }}
+                <span class="tag-text">{{ option.label }}</span>
-            </el-button>
+                <el-button-group class="tag-button-group">
-          </el-button-group>
+                  <el-button size="mini" @click.native="addTagForMultipleUsers(option.tag)">
-        </div>
+                    {{ $t('users.apply') }}
-      </el-dropdown-item>
+                  </el-button>
-      <el-dropdown-item v-if="tagPolicyEnabled" class="no-hover">
+                  <el-button size="mini" @click.native="removeTagFromMultipleUsers(option.tag)">
-        <div class="tag-container">
+                    {{ $t('users.remove') }}
-          <span class="tag-text">{{ $t('users.stripMedia') }}</span>
+                  </el-button>
-          <el-button-group class="tag-button-group">
+                </el-button-group>
-            <el-button size="mini" @click.native="addTagForMultipleUsers('mrf_tag:media-strip')">
+              </div>
-              {{ $t('users.apply') }}
+            </el-dropdown-item>
-            </el-button>
+          </el-dropdown-menu>
-            <el-button size="mini" @click.native="removeTagFromMultipleUsers('mrf_tag:media-strip')">
+        </el-dropdown>
-              {{ $t('users.remove') }}
-            </el-button>
-          </el-button-group>
-        </div>
-      </el-dropdown-item>
-      <el-dropdown-item v-if="tagPolicyEnabled" class="no-hover">
-        <div class="tag-container">
-          <span class="tag-text">{{ $t('users.forceUnlisted') }}</span>
-          <el-button-group class="tag-button-group">
-            <el-button size="mini" @click.native="addTagForMultipleUsers('mrf_tag:force-unlisted')">
-              {{ $t('users.apply') }}
-            </el-button>
-            <el-button size="mini" @click.native="removeTagFromMultipleUsers('mrf_tag:force-unlisted')">
-              {{ $t('users.remove') }}
-            </el-button>
-          </el-button-group>
-        </div>
-      </el-dropdown-item>
-      <el-dropdown-item v-if="tagPolicyEnabled" class="no-hover">
-        <div class="tag-container">
-          <span class="tag-text">{{ $t('users.sandbox') }}</span>
-          <el-button-group class="tag-button-group">
-            <el-button size="mini" @click.native="addTagForMultipleUsers('mrf_tag:sandbox')">
-              {{ $t('users.apply') }}
-            </el-button>
-            <el-button size="mini" @click.native="removeTagFromMultipleUsers('mrf_tag:sandbox')">
-              {{ $t('users.remove') }}
-            </el-button>
-          </el-button-group>
-        </div>
-      </el-dropdown-item>
-      <el-dropdown-item v-if="tagPolicyEnabled" class="no-hover">
-        <div class="tag-container">
-          <span class="tag-text">{{ $t('users.disableRemoteSubscriptionForMultiple') }}</span>
-          <el-button-group class="tag-button-group">
-            <el-button size="mini" @click.native="addTagForMultipleUsers('mrf_tag:disable-remote-subscription')">
-              {{ $t('users.apply') }}
-            </el-button>
-            <el-button size="mini" @click.native="removeTagFromMultipleUsers('mrf_tag:disable-remote-subscription')">
-              {{ $t('users.remove') }}
-            </el-button>
-          </el-button-group>
-        </div>
-      </el-dropdown-item>
-      <el-dropdown-item v-if="tagPolicyEnabled" class="no-hover">
-        <div class="tag-container">
-          <span class="tag-text">{{ $t('users.disableAnySubscriptionForMultiple') }}</span>
-          <el-button-group class="tag-button-group">
-            <el-button size="mini" @click.native="addTagForMultipleUsers('mrf_tag:disable-any-subscription')">
-              {{ $t('users.apply') }}
-            </el-button>
-            <el-button size="mini" @click.native="removeTagFromMultipleUsers('mrf_tag:disable-any-subscription')">
-              {{ $t('users.remove') }}
-            </el-button>
-          </el-button-group>
-        </div>
       </el-dropdown-item>
       <el-dropdown-item
         v-if="!tagPolicyEnabled"
@@ -168,11 +112,31 @@ export default {
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
+    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'
+      }
+    },
     showDropdownForMultipleUsers() {
       return this.$props.selectedUsers.length > 0
     },
     tagPolicyEnabled() {
       return this.$store.state.users.mrfPolicies.includes('Pleroma.Web.ActivityPub.MRF.TagPolicy')
+    },
+    tags() {
+      return this.$store.state.users.tags.map(tag => {
+        if (this.mapTags[tag]) {
+          return { tag, label: this.mapTags[tag] }
+        } else {
+          return { tag, label: tag.charAt(0).toUpperCase() + tag.slice(1) }
+        }
+      }, {})
     }
   },
   methods: {
@@ -406,6 +370,14 @@ export default {
   .el-icon-edit {
     margin-right: 5px;
   }
+  .multiple-tags-moderation {
+    width: 100%;
+  }
+  .no-hover:hover {
+    color: #606266;
+    background-color: white;
+    cursor: auto;
+  }
   .tag-container {
     display: flex;
     justify-content: space-between;
@@ -414,9 +386,4 @@ export default {
   .tag-text {
     padding-right: 20px;
   }
-  .no-hover:hover {
-    color: #606266;
-    background-color: white;
-    cursor: auto;
-  }
 </style>