From 1b9f209f2c2cd63a33a5b16bbc95710f75297d63 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 5 May 2019 02:30:11 +0300
Subject: [PATCH] Add and remove tags for multiple users

---
 src/views/users/components/DropdownMenu.vue | 99 ++++++++++++++++-----
 1 file changed, 78 insertions(+), 21 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 2e87f31d..6dfcdff5 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -29,30 +29,59 @@
       @click.native="deleteMultipleUsers">
       {{ $t('users.deleteAccount') }}
     </el-dropdown-item>
-    <el-dropdown-item
-      divided
-      @click.native="toggleTagForMultipleUsers('force_nsfw')">
-      {{ $t('users.forceNsfw') }}
+    <el-dropdown-item divided class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.forceNsfw') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('strip_media')">
-      {{ $t('users.stripMedia') }}
+    <el-dropdown-item class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.stripMedia') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('force_unlisted')">
-      {{ $t('users.forceUnlisted') }}
+    <el-dropdown-item 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('force_unlisted')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('sandbox')">
-      {{ $t('users.sandbox') }}
+    <el-dropdown-item 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('sandbox')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('disable_remote_subscription')">
-      {{ $t('users.disableRemoteSubscription') }}
+    <el-dropdown-item class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('disable_any_subscription')">
-      {{ $t('users.disableAnySubscription') }}
+    <el-dropdown-item class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.disableAnySubscription') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
   </el-dropdown-menu>
 </template>
@@ -113,16 +142,28 @@ export default {
         mapSelectedUsers
       )
     },
-    toggleTagForMultipleUsers(tag) {
+    addTagForMultipleUsers(tag) {
       const mapSelectedUsers = () => this.selectedUsers
         .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-          ? user.local : user
+          ? user.local && !user.tags.includes(tag)
+          : !user.tags.includes(tag)
         ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
       this.confirmMessage(
         'Are you sure you want to apply tag to all selected users?',
         mapSelectedUsers
       )
     },
+    removeTagFromMultipleUsers(tag) {
+      const mapSelectedUsers = () => this.selectedUsers
+        .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+          ? user.local && user.tags.includes(tag)
+          : user.tags.includes(tag)
+        ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
+      this.confirmMessage(
+        'Are you sure you want to remove tag from all selected users?',
+        mapSelectedUsers
+      )
+    },
     confirmMessage(message, mapSelectedUsers) {
       this.$confirm(message, {
         confirmButtonText: 'OK',
@@ -144,3 +185,19 @@ export default {
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+  .tag-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .tag-text {
+    padding-right: 20px;
+  }
+  .no-hover:hover {
+    color: #606266;
+    background-color: white;
+    cursor: auto;
+  }
+</style>