[skip ci] refactor

app/assets/javascripts/sidebar_assignees/components/collapsed/assignees.js

@@ -18,9 +18,7 @@ export default {
     title() {
       const maxRender = Math.min(this.defaultRenderCount, this.users.length);
       const renderUsers = this.users.slice(0, maxRender);
-      const names = [];
-
-      renderUsers.forEach(u => names.push(u.name));
+      const names = renderUsers.map(u => u.name);
 
       if (this.users.length > maxRender) {
         names.push(`+ ${this.users.length - maxRender} more`);
@@ -58,12 +56,11 @@ export default {
       <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"
+      <div v-else class="sidebar-collapsed-icon sidebar-collapsed-user has-tooltip"
           :class="{'multiple-users': moreThanOneAssignees}"
           data-container="body"
           data-placement="left"
-          data-toggle="tooltip"
-          :data-original-title="title" >
+          :title="title" >
         <collapsed-avatar
           :name="users[0].name"
           :avatarUrl="users[0].avatarUrl"

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

@@ -43,32 +43,30 @@ export default {
   },
   template: `
     <div class="hide-collapsed">
-      <div class="hide-collapsed">
-        <div class="user-list">
-          <div class="user-item" v-for="(user, index) in users"
-              v-if="renderAssignee(index)" >
-            <a class="user-link has-tooltip"
-              data-placement="bottom"
-              :href="assigneeUrl(user.username)"
-              :data-title="user.name" >
-              <img width="32"
-                class="avatar avatar-inline s32"
-                :alt="assigneeAlt(user.name)"
-                :src="user.avatarUrl" >
-            </a>
-          </div>
-        </div>
-        <div class="user-list-more" v-if="renderShowMoreSection">
-          <button type="button" class="btn-link" @click="toggleShowLess">
-            <template v-if="showLess">
-              + {{numberOfHiddenAssignees}} more
-            </template>
-            <template v-else>
-              - show less
-            </template>
-          </button>
+      <div class="user-list">
+        <div class="user-item" v-for="(user, index) in users"
+            v-if="renderAssignee(index)" >
+          <a class="user-link has-tooltip"
+            data-placement="bottom"
+            :href="assigneeUrl(user.username)"
+            :data-title="user.name" >
+            <img width="32"
+              class="avatar avatar-inline s32"
+              :alt="assigneeAlt(user.name)"
+              :src="user.avatarUrl" >
+          </a>
         </div>
       </div>
+      <div class="user-list-more" v-if="renderShowMoreSection">
+        <button type="button" class="btn-link" @click="toggleShowLess">
+          <template v-if="showLess">
+            + {{numberOfHiddenAssignees}} more
+          </template>
+          <template v-else>
+            - show less
+          </template>
+        </button>
+      </div>
     </div>
   `,
 };

app/assets/javascripts/sidebar_assignees/index.js

 import Vue from 'vue';
 import sidebarAssigneesOptions from './sidebar_assignees_options';
 
-document.addEventListener('DOMContentLoaded', () => {
-  window.gl.sidebarAssigneesOptions = new Vue(sidebarAssigneesOptions);
-});
+document.addEventListener('DOMContentLoaded', () => new Vue(sidebarAssigneesOptions));

app/assets/javascripts/sidebar_assignees/services/sidebar_assignees_service.js

 import Vue from 'vue';
 import VueResource from 'vue-resource';
-
-require('~/vue_shared/vue_resource_interceptor');
+import '../../vue_shared/vue_resource_interceptor';
 
 Vue.http.options.emulateJSON = true;
 Vue.use(VueResource);
@@ -9,12 +8,12 @@ Vue.use(VueResource);
 export default class SidebarAssigneesService {
   constructor(path, field) {
     this.field = field;
-    this.sidebarAssigneeResource = Vue.resource(path);
+    this.path = path;
   }
 
   update(userIds) {
-    return this.sidebarAssigneeResource.update({
+    return Vue.http.put(this.path, {
       [this.field]: userIds,
-    });
+    }, { emulateJSON: true });
   }
 }

app/assets/javascripts/sidebar_assignees/sidebar_assignees_options.js

@@ -35,6 +35,7 @@ export default {
     });
 
     return {
+      loading: false,
       store,
       service,
     };
@@ -57,14 +58,14 @@ export default {
       this.saveUsers();
     },
     saveUsers() {
-      this.store.loading = true;
+      this.loading = true;
       this.service.update(this.store.getUserIds())
         .then((response) => {
-          this.store.loading = false;
+          this.loading = false;
           this.store.setUsers(response.data.assignees);
         }).catch(() => {
-          this.store.loading = false;
-          return new Flash('An error occured while saving assignees', 'alert');
+          this.loading = false;
+          return new Flash('An error occured while saving assignees');
         });
     },
   },
@@ -79,7 +80,7 @@ export default {
     <div>
       <assignee-title
         :numberOfAssignees="store.userIds.length"
-        :loading="store.loading"
+        :loading="loading"
         :editable="store.editable"
       />
       <collapsed-assignees :users="store.users"/>

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

@@ -16,7 +16,7 @@ export default class SidebarAssigneesStore {
 
     this.setUsers(assignees);
 
-    assignees.forEach(a => this.addUserId(a.id));
+    this.userIds = assignees.map(a => a.id);
   }
 
   addUserId(id) {
@@ -41,15 +41,11 @@ export default class SidebarAssigneesStore {
   }
 
   setUsers(users) {
-    this.users = [];
-
-    users.forEach((u) => {
-      this.users.push({
-        id: u.id,
-        name: u.name,
-        username: u.username,
-        avatarUrl: u.avatar_url,
-      });
-    });
+    this.users = users.map((u) => ({
+      id: u.id,
+      name: u.name,
+      username: u.username,
+      avatarUrl: u.avatar_url,
+    }));
   }
 }

app/assets/javascripts/users_select.js

@@ -251,7 +251,6 @@ import eventHub from './sidebar_assignees/event_hub';
             defaultLabel: defaultLabel,
             hidden: function(e) {
               if ($dropdown.hasClass('js-multiselect')) {
-                // gl.sidebarAssigneesOptions.store.saveUsers();
                 eventHub.$emit('saveUsers');
               }