Fix adding and removing tags after implementing select

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',
     customTags: 'Custom Tags',
-    defaultTags: 'Default Tags'
+    defaultTags: 'Default Tags',
+    tags: 'Tags'
   },
   statuses: {
     statuses: 'Statuses',

src/views/users/components/ModerationDropdown.vue

@@ -83,36 +83,39 @@
         @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"
-        v-model="selectedTags"
+        :value="selectedTags"
         multiple
         filterable
         allow-create
         placeholder="Select Tags"
         size="small"
-        class="select-tags">
+        class="select-tags"
+        @change="toggleTag($event, user)">
         <el-option-group :label="$t('users.defaultTags')">
           <el-option
-            v-for="(value, name) in defaultTags"
+            v-for="option in defaultTags"
-            :key="name"
+            :value="option.tag"
-            :value="name"
+            :key="option.tag"
-            :class="{ 'active-tag': user.tags.includes(name) }"
+            :label="option.label"
-            @click.native="toggleTag(user, name)">
+            :class="{ 'active-tag': user.tags.includes(option.tag) }">
-            {{ value }}
+            {{ option.label }}
-            <i v-if="user.tags.includes(name)" class="el-icon-check"/>
           </el-option>
         </el-option-group>
         <el-option-group :label="$t('users.customTags')">
           <el-option
-            v-for="item in customTags"
+            v-for="option in customTags"
-            :key="item"
+            :value="option.tag"
-            :value="item"
+            :key="option.tag"
-            :class="{ 'active-tag': user.tags.includes(item) }"
+            :label="option.label"
-            class="capitalize"
+            :class="{ 'active-tag': user.tags.includes(option.tag) }"
-            @click.native="toggleTag(user, item)">
+            class="capitalize">
-            {{ item }}
+            {{ option.label }}
-            <i v-if="user.tags.includes(item)" class="el-icon-check"/>
           </el-option>
         </el-option-group>
       </el-select>
@@ -146,11 +149,6 @@ export default {
       default: ''
     }
   },
-  data() {
-    return {
-      selectedTags: []
-    }
-  },
   computed: {
     actorType: {
       get() {
@@ -166,18 +164,21 @@ export default {
       }
     },
     customTags() {
-      return this.$store.state.users.tags.filter(tag => !Object.keys(this.mapTags).includes(tag))
+      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))
-        .reduce((acc, el) => {
+        .map(tag => {
           if (this.user.local) {
-            acc[el] = this.mapTags[el]
+            return { tag, label: this.mapTags[tag] }
           } else {
-            acc[el] = this.mapRemoteTags[el]
+            return { tag, label: this.mapRemoteTags[tag] }
           }
-          return acc
         }, {})
     },
     isDesktop() {
@@ -203,6 +204,9 @@ export default {
         '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')
     }
@@ -295,10 +299,10 @@ export default {
         ? this.$store.dispatch('ActivateUsers', { users: [user], _userId: user.id })
         : this.$store.dispatch('DeactivateUsers', { users: [user], _userId: user.id })
     },
-    toggleTag(user, tag) {
+    toggleTag(tags, user) {
-      user.tags.includes(tag)
+      tags.length > user.tags.length
-        ? this.$store.dispatch('RemoveTag', { users: [user], tag, _userId: user.id, _statusId: this.statusId })
+        ? this.$store.dispatch('AddTag', { users: [user], tag: tags.filter(tag => !user.tags.includes(tag))[0] })
-        : this.$store.dispatch('AddTag', { users: [user], tag, _userId: user.id, _statusId: this.statusId })
+        : this.$store.dispatch('RemoveTag', { users: [user], tag: user.tags.filter(tag => !tags.includes(tag))[0] })
     },
     toggleUserRight(user, right) {
       user.roles[right]