[skip ci] refactor

app/assets/javascripts/vue_sidebar_assignees/components/collapsed/multiple_assignees.js → app/assets/javascripts/vue_sidebar_assignees/components/collapsed/assignees.js

 import CollapsedAvatar from './avatar';
 
 export default {
-  name: 'CollapsedMultipleAssignees',
+  name: 'CollapsedAssignees',
+  data() {
+    return {
+      defaultMaxCounter: 99,
+    };
+  },
   props: {
     users: { type: Array, required: true },
   },
   computed: {
     title() {
-      const maxRender = Math.min(5, this.users.length);
+      const maxRender = Math.min(this.defaultRenderCount, this.users.length);
       const renderUsers = this.users.slice(0, maxRender);
       const names = [];
 
@@ -22,26 +27,45 @@ export default {
     counter() {
       let counter = `+${this.users.length - 1}`;
 
-      if (this.users.length > 99) {
-        counter = '99+';
+      if (this.users.length > this.defaultMaxCounter) {
+        counter = `${this.defaultMaxCounter}+`;
       }
 
       return counter;
     },
+    hasNoAssignees() {
+      return this.users.length === 0;
+    },
+    hasTwoAssignees() {
+      return this.users.length === 2;
+    },
+    moreThanOneAssignees() {
+      return this.users.length > 1;
+    },
+    morethanTwoAssignees() {
+      return this.users.length > 2;
+    },
   },
   components: {
     'collapsed-avatar': CollapsedAvatar,
   },
   template: `
-    <div class="sidebar-collapsed-icon sidebar-collapsed-user multiple-users"
-        data-container="body"
-        data-placement="left"
-        data-toggle="tooltip"
-        :data-original-title="title" >
-      <collapsed-avatar :user="users[0]" />
-      <button class="btn-link" type="button">
-        <span class="avatar-counter sidebar-avatar-counter">{{counter}}</span>
-      </button>
+    <div>
+      <div v-if="hasNoAssignees" class="sidebar-collapsed-icon sidebar-collapsed-user">
+        <i aria-hidden="true" class="fa fa-user"></i>
+      </div>
+      <div v-else class="sidebar-collapsed-icon sidebar-collapsed-user"
+          :class="{'multiple-users': moreThanOneAssignees}"
+          data-container="body"
+          data-placement="left"
+          data-toggle="tooltip"
+          :data-original-title="title" >
+        <collapsed-avatar :user="users[0]" />
+        <collapsed-avatar :user="users[1]" v-if="hasTwoAssignees" />
+        <button class="btn-link" type="button" v-if="morethanTwoAssignees">
+          <span class="avatar-counter sidebar-avatar-counter">{{counter}}</span>
+        </button>
+      </div>
     </div>
   `,
 };

app/assets/javascripts/vue_sidebar_assignees/components/collapsed/no_assignee.js

-export default {
-  name: 'CollapsedNoAssignee',
-  props: {
-    users: { type: Array, required: true },
-  },
-  template: `
-    <div class="sidebar-collapsed-icon sidebar-collapsed-user">
-      <i aria-hidden="true" class="fa fa-user"></i>
-    </div>
-  `,
-};

app/assets/javascripts/vue_sidebar_assignees/components/collapsed/single_assignee.js

-import CollapsedAvatar from './avatar';
-
-export default {
-  name: 'CollapsedSingleAssignee',
-  props: {
-    users: { type: Array, required: true },
-  },
-  components: {
-    'collapsed-avatar': CollapsedAvatar,
-  },
-  template: `
-    <div class="sidebar-collapsed-icon sidebar-collapsed-user"
-        data-container="body"
-        data-placement="left"
-        data-toggle="tooltip"
-        :data-original-title="users[0].name" >
-      <collapsed-avatar :user="users[0]" />
-    </div>
-  `,
-};

app/assets/javascripts/vue_sidebar_assignees/components/collapsed/two_assignees.js

-import CollapsedAvatar from './avatar';
-
-export default {
-  name: 'CollapsedTwoAssignees',
-  props: {
-    users: { type: Array, required: true },
-  },
-  computed: {
-    title() {
-      return `${this.users[0].name}, ${this.users[1].name}`;
-    },
-  },
-  components: {
-    'collapsed-avatar': CollapsedAvatar,
-  },
-  template: `
-    <div class="sidebar-collapsed-icon sidebar-collapsed-user multiple-users"
-        data-container="body"
-        data-placement="left"
-        data-toggle="tooltip"
-        :data-original-title="title" >
-      <collapsed-avatar :user="users[0]" />
-      <collapsed-avatar :user="users[1]" />
-    </div>
-  `,
-};

app/assets/javascripts/vue_sidebar_assignees/components/expanded/multiple_assignees.js

@@ -3,7 +3,6 @@ export default {
   data() {
     return {
       showLess: true,
-      defaultRenderCount: 5,
     };
   },
   props: {
@@ -14,10 +13,10 @@ export default {
       return this.assignees.rootPath;
     },
     renderShowMoreSection() {
-      return this.assignees.users.length > this.defaultRenderCount;
+      return this.assignees.users.length > this.assignees.defaultRenderCount;
     },
     numberOfHiddenAssignees() {
-      return this.assignees.users.length - this.defaultRenderCount;
+      return this.assignees.users.length - this.assignees.defaultRenderCount;
     },
     isHiddenAssignees() {
       return this.numberOfHiddenAssignees > 0;
@@ -28,7 +27,7 @@ export default {
       this.showLess = !this.showLess;
     },
     renderAssignee(index) {
-      return !this.showLess || (index < this.defaultRenderCount && this.showLess);
+      return !this.showLess || (index < this.assignees.defaultRenderCount && this.showLess);
     },
     assigneeUrl(username) {
       return `${this.rootPath}${username}`;

app/assets/javascripts/vue_sidebar_assignees/index.js

@@ -5,10 +5,7 @@ import NoAssignee from './components/expanded/no_assignee';
 import SingleAssignee from './components/expanded/single_assignee';
 import MultipleAssignees from './components/expanded/multiple_assignees';
 
-import CollapsedNoAssignee from './components/collapsed/no_assignee';
-import CollapsedSingleAssignee from './components/collapsed/single_assignee';
-import CollapsedTwoAssignees from './components/collapsed/two_assignees';
-import CollapsedMultipleAssignees from './components/collapsed/multiple_assignees';
+import CollapsedAssignees from './components/collapsed/assignees';
 
 import SidebarAssigneesService from './services/sidebar_assignees_service';
 import SidebarAssigneesStore from './stores/sidebar_assignees_store';
@@ -19,6 +16,8 @@ const sidebarAssigneesOptions = () => ({
   data() {
     const selector = this.$options.el;
     const element = document.querySelector(selector);
+
+    // Get data from data attributes passed from haml
     const rootPath = element.dataset.rootPath;
     const path = element.dataset.path;
     const field = element.dataset.field;
@@ -49,34 +48,27 @@ const sidebarAssigneesOptions = () => ({
     hideComponent() {
       return !this.assignees.saved;
     },
-    collapsedComponentName() {
-      switch (this.numberOfAssignees) {
-        case 0:
-          return 'collapsed-no-assignee';
-        case 1:
-          return 'collapsed-single-assignee';
-        case 2:
-          return 'collapsed-two-assignees';
-        default:
-          return 'collapsed-multiple-assignees';
-      }
-    },
   },
   components: {
     'no-assignee': NoAssignee,
     'single-assignee': SingleAssignee,
     'multiple-assignees': MultipleAssignees,
     'assignee-title': AssigneeTitle,
-    'collapsed-single-assignee': CollapsedSingleAssignee,
-    'collapsed-no-assignee': CollapsedNoAssignee,
-    'collapsed-two-assignees': CollapsedTwoAssignees,
-    'collapsed-multiple-assignees': CollapsedMultipleAssignees,
+    'collapsed-assignees': CollapsedAssignees,
   },
   template: `
     <div>
-      <component :is="collapsedComponentName" :users="assignees.users" />
-      <assignee-title :numberOfAssignees="assignees.users.length" :loading="assignees.loading" :editable="assignees.editable"/>
-      <component class="value" :is="componentName" :assignees="assignees" :class="{ hidden: hideComponent }" />
+      <collapsed-assignees :users="assignees.users"/>
+      <assignee-title
+        :numberOfAssignees="assignees.users.length"
+        :loading="assignees.loading"
+        :editable="assignees.editable"
+      />
+      <component v-if="assignees.saved"
+        class="value"
+        :is="componentName"
+        :assignees="assignees"
+      />
     </div>
   `,
 });

app/assets/javascripts/vue_sidebar_assignees/stores/sidebar_assignees_store.js

@@ -10,6 +10,7 @@ export default class SidebarAssigneesStore {
     this.saved = true;
     this.loading = false;
     this.editable = editable;
+    this.defaultRenderCount = 5;
   }
 
   addUser(user, saved = false) {