From bddfe8c97d459f9a017fcd448ecb64678bb93553 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 12 May 2019 23:45:27 +0300
Subject: [PATCH] Move all parts of dropdown component to seperate file

---
 src/views/users/components/DropdownMenu.vue | 189 +++++++++++---------
 src/views/users/index.vue                   |  21 +--
 2 files changed, 107 insertions(+), 103 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 546ece3f..5a87847d 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -1,89 +1,97 @@
 <template>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item
-      @click.native="grantRightToMultipleUsers('admin')">
-      {{ $t('users.grantAdmin') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="revokeRightToMultipleUsers('admin')">
-      {{ $t('users.revokeAdmin') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="grantRightToMultipleUsers('moderator')">
-      {{ $t('users.grantModerator') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="revokeRightToMultipleUsers('moderator')">
-      {{ $t('users.revokeModerator') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      divided
-      @click.native="activateMultipleUsers">
-      {{ $t('users.activateAccount') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="deactivateMultipleUsers">
-      {{ $t('users.deactivateAccount') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="deleteMultipleUsers">
-      {{ $t('users.deleteAccount') }}
-    </el-dropdown-item>
-    <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 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 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 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 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 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>
+  <el-dropdown size="small" trigger="click">
+    <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
+    <el-dropdown-menu v-if="showDropdownForMultipleUsers" slot="dropdown">
+      <el-dropdown-item
+        @click.native="grantRightToMultipleUsers('admin')">
+        {{ $t('users.grantAdmin') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="revokeRightToMultipleUsers('admin')">
+        {{ $t('users.revokeAdmin') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="grantRightToMultipleUsers('moderator')">
+        {{ $t('users.grantModerator') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="revokeRightToMultipleUsers('moderator')">
+        {{ $t('users.revokeModerator') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        divided
+        @click.native="activateMultipleUsers">
+        {{ $t('users.activateAccount') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="deactivateMultipleUsers">
+        {{ $t('users.deactivateAccount') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="deleteMultipleUsers">
+        {{ $t('users.deleteAccount') }}
+      </el-dropdown-item>
+      <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 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 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 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 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 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>
+    <el-dropdown-menu v-else slot="dropdown">
+      <el-dropdown-item>
+        {{ $t('users.selectUsers') }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
 </template>
 
 <script>
@@ -96,6 +104,14 @@ export default {
       }
     }
   },
+  computed: {
+    showDropdownForMultipleUsers() {
+      return this.$props.selectedUsers.length > 0
+    },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    }
+  },
   methods: {
     grantRightToMultipleUsers(right) {
       const mapSelectedUsers = () => this.selectedUsers
@@ -188,6 +204,9 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss' scoped>
+  .actions-button {
+    margin-left: 15px;
+  }
   .tag-container {
     display: flex;
     justify-content: space-between;
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 72522d6f..85f87cbd 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -8,18 +8,9 @@
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
-    <el-dropdown trigger="click">
-      <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
-      <dropdown-menu
-        v-if="showDropdownForMultipleUsers"
-        :selected-users="selectedUsers"
-        @apply-action="clearSelection"/>
-      <el-dropdown-menu v-else slot="dropdown">
-        <el-dropdown-item>
-          {{ $t('users.selectUsers') }}
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
+    <dropdown-menu
+      :selected-users="selectedUsers"
+      @apply-action="clearSelection"/>
     <el-table
       v-loading="loading"
       ref="usersTable"
@@ -186,9 +177,6 @@ export default {
     },
     width() {
       return this.isMobile ? 55 : false
-    },
-    showDropdownForMultipleUsers() {
-      return this.$data.selectedUsers.length > 0
     }
   },
   created() {
@@ -257,9 +245,6 @@ export default {
       color: #409EFF;
     }
 .users-container {
-  .actions-button {
-    margin-left: 15px;
-  }
   h1 {
     margin: 22px 0 0 15px;
   }