Add select for managing tags

src/lang/en.js

@@ -283,7 +283,8 @@ export default {
     confirmEnablingTagPolicy: 'Are you sure you want to add TagPolicy to the list of enabled MRF policies?',
     enableTagPolicySuccessMessage: 'MRF TagPolicy was enabled',
     createCustomTag: 'Create custom tag and add it to user',
-    moderateTags: 'Moderate Tags'
+    customTags: 'Custom Tags',
+    defaultTags: 'Default Tags'
   },
   statuses: {
     statuses: 'Statuses',

src/views/users/components/ModerationDropdown.vue

@@ -67,8 +67,8 @@
         @click.native="handleConfirmationResend(user)">
         {{ $t('users.resendConfirmation') }}
       </el-dropdown-item>
-      <el-collapse accordion class="moderate-tags">
+      <!-- <el-collapse accordion class="moderate-tags">
-        <el-collapse-item :title="$t('users.moderateTags')" name="open-tags">
+        <el-collapse-item name="open-tags">
           <el-dropdown-item
             v-if="tagPolicyEnabled"
             :divided="showAdminAction(user)"
@@ -112,21 +112,35 @@
             {{ $t('users.disableAnySubscription') }}
             <i v-if="user.tags.includes('mrf_tag:disable-any-subscription')" class="el-icon-check"/>
           </el-dropdown-item>
+          <el-dropdown-item divided class="custom-tags-titile">
+            {{ $t('users.customTags') }}
+          </el-dropdown-item>
           <el-dropdown-item
             v-if="user.local && tagPolicyEnabled"
             icon="el-icon-plus"
             @click.native="$emit('open-custom-tag-dialog', user)">
-            {{ $t('users.createCustomTag') }}
+            <el-popover
+              :title="`${$t('users.createCustomTag')} ${user.nickname}`"
+              placement="left"
+              width="400"
+              trigger="click">
+              <el-form :inline="true" :model="customTagForm" >
+                <el-form-item prop="name">
+                  <el-input v-model="customTagForm.name" autofocus class="custom-tag-input"/>
+                </el-form-item>
+                <el-form-item class="close-custom-tag-button">
+                  <el-button @click="closeCustomTagDialog">{{ $t('users.cancel') }}</el-button>
+                </el-form-item>
+                <el-form-item class="add-custom-tag-button">
+                  <el-button type="primary" @click="addCustomTag">{{ $t('users.create') }}</el-button>
+                </el-form-item>
+              </el-form>
+              <span slot="reference">{{ $t('users.createCustomTag') }}</span>
+              <el-button slot="reference">Hover to activate</el-button>
+            </el-popover>
           </el-dropdown-item>
         </el-collapse-item>
-      </el-collapse>
+      </el-collapse> -->
-      <el-dropdown-item
-        v-if="!tagPolicyEnabled"
-        divided
-        class="no-hover"
-        @click.native="enableTagPolicy">
-        {{ $t('users.enableTagPolicy') }}
-      </el-dropdown-item>
       <el-dropdown-item
         v-if="user.local"
         divided
@@ -143,6 +157,37 @@
         @click.native="disableMfa(user.nickname)">
         {{ $t('users.disableMfa') }}
       </el-dropdown-item>
+      <el-select
+        v-if="tagPolicyEnabled"
+        v-model="selectedTags"
+        multiple
+        filterable
+        allow-create
+        placeholder="Select Tags"
+        size="small"
+        class="select-tags">
+        <el-option-group :label="$t('users.defaultTags')">
+          <el-option
+            v-for="(value, name) in defaultTags"
+            :key="name"
+            :label="value"
+            :value="name"/>
+        </el-option-group>
+        <el-option-group :label="$t('users.customTags')">
+          <el-option
+            v-for="item in customTags"
+            :key="item"
+            :value="item"
+            class="capitalize"/>
+        </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>
@@ -168,7 +213,7 @@ export default {
   },
   data() {
     return {
-      tagsOpen: []
+      selectedTags: []
     }
   },
   computed: {
@@ -185,14 +230,48 @@ export default {
         })
       }
     },
+    customTags() {
+      return this.$store.state.users.tags.filter(tag => !Object.keys(this.mapTags).includes(tag))
+    },
+    defaultTags() {
+      return Object.keys(this.mapTags)
+        .filter(tag => this.$store.state.users.tags.includes(tag))
+        .reduce((acc, el) => {
+          acc[el] = this.mapTags[el]
+          return acc
+        }, {})
+    },
     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'
+      }
+    },
     tagPolicyEnabled() {
       return this.$store.state.users.mrfPolicies.includes('Pleroma.Web.ActivityPub.MRF.TagPolicy')
     }
   },
   methods: {
+    addCustomTag() {
+      this.$store.dispatch('AddTag', {
+        users: [this.customTagUser],
+        tag: this.customTagForm.name,
+        _userId: this.customTagUser.id,
+        _statusId: this.statusId
+      })
+      this.createCustomTagDialogOpen = false
+    },
+    closeCustomTagDialog() {
+      this.createCustomTagDialogOpen = false
+    },
     disableMfa(nickname) {
       this.$store.dispatch('DisableMfa', nickname)
     },
@@ -295,6 +374,17 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
+  .capitalize {
+    text-transform: capitalize;
+  }
+  .el-form--inline {
+    .el-form-item.add-custom-tag-button {
+      margin-right: 0;
+    }
+    .el-form-item.close-custom-tag-button {
+      margin-right: 8px;
+    }
+  }
   .el-dropdown-menu--small  .el-dropdown-menu__item.el-dropdown-menu__item--divided.actor-type-dropdown:before {
     margin: 0 0;
     height: 0;
@@ -326,8 +416,14 @@ export default {
     }
   }
   .actor-type-select .el-input.is-focus .el-input__inner {
-      border-color: transparent;
+    border-color: transparent;
-    }
+  }
+  .custom-tags-titile {
+    padding-left: 20px;
+    font-size: 12px;
+    color: #909399;
+    line-height: 30px;
+  }
   .moderate-user-button {
     text-align: left;
     width: 350px;
@@ -359,6 +455,10 @@ 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

@@ -25,8 +25,7 @@
       </el-button>
       <multiple-users-menu
         :selected-users="selectedUsers"
-        @apply-action="clearSelection"
+        @apply-action="clearSelection"/>
-        @open-custom-tag-dialog="openCustomTagDialog"/>
     </div>
     <new-account-dialog
       :dialog-form-visible="createAccountDialogOpen"
@@ -103,8 +102,7 @@
             v-if="propertyExists(scope.row, 'nickname')"
             :user="scope.row"
             :page="'users'"
-            @open-reset-token-dialog="openResetPasswordDialog"
+            @open-reset-token-dialog="openResetPasswordDialog"/>
-            @open-custom-tag-dialog="openCustomTagDialog"/>
           <el-button v-else type="text" disabled>
             {{ $t('users.moderation') }}
             <i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
@@ -115,24 +113,6 @@
     <reset-password-dialog
       :reset-password-dialog-open="resetPasswordDialogOpen"
       @close-reset-token-dialog="closeResetPasswordDialog"/>
-    <el-dialog
-      :visible.sync="createCustomTagDialogOpen"
-      :show-close="false"
-      :title="`${$t('users.createCustomTag')} ${customTagUser.nickname}`"
-      @open="resetForm">
-      <el-form ref="customTagForm" :model="customTagForm" :label-width="isDesktop ? '120px' : '85px'">
-        <el-form-item :label="$t('users.name')" prop="name">
-          <el-input v-model="customTagForm.name" name="name" autofocus/>
-        </el-form-item>
-        <el-form-item :label="$t('users.label')" prop="label">
-          <el-input v-model="customTagForm.label" name="label"/>
-        </el-form-item>
-      </el-form>
-      <span slot="footer">
-        <el-button @click="closeCustomTagDialog">{{ $t('users.cancel') }}</el-button>
-        <el-button type="primary" @click="addCustomTag">{{ $t('users.create') }}</el-button>
-      </span>
-    </el-dialog>
     <div v-if="!loading" class="pagination">
       <el-pagination
         :total="usersCount"
@@ -176,13 +156,7 @@ export default {
       search: '',
       selectedUsers: [],
       createAccountDialogOpen: false,
-      resetPasswordDialogOpen: false,
+      resetPasswordDialogOpen: false
-      createCustomTagDialogOpen: false,
-      customTagForm: {
-        name: '',
-        label: ''
-      },
-      customTagUser: {}
     }
   },
   computed: {
@@ -232,21 +206,9 @@ export default {
     this.$store.dispatch('ClearUsersState')
   },
   methods: {
-    addCustomTag() {
-      this.$store.dispatch('AddTag', {
-        users: [this.customTagUser],
-        tag: this.customTagForm.name,
-        _userId: this.customTagUser.id,
-        _statusId: this.statusId
-      })
-      this.createCustomTagDialogOpen = false
-    },
     clearSelection() {
       this.$refs.usersTable.clearSelection()
     },
-    closeCustomTagDialog() {
-      this.createCustomTagDialogOpen = false
-    },
     closeResetPasswordDialog() {
       this.resetPasswordDialogOpen = false
       this.$store.dispatch('RemovePasswordToken')
@@ -274,10 +236,6 @@ export default {
     handleSelectionChange(value) {
       this.$data.selectedUsers = value
     },
-    openCustomTagDialog(user) {
-      this.customTagUser = user
-      this.createCustomTagDialogOpen = true
-    },
     openResetPasswordDialog() {
       this.resetPasswordDialogOpen = true
     },
@@ -287,7 +245,6 @@ export default {
     regReason(reason) {
       return reason && reason.length > 0
     },
-    resetForm() {},
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
     }