Move all parts of dropdown component to seperate file

src/views/users/components/DropdownMenu.vue

@@ -1,5 +1,7 @@
 <template>
-  <el-dropdown-menu slot="dropdown">
+  <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') }}
@@ -84,6 +86,12 @@
         </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;

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>
     <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;
   }