Moved some code around to make it easier to read & work with

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -20,13 +20,11 @@ $(function () {
           const boards = resp.json();
 
           boards.forEach((board) => {
-            const list = new List(board);
+            const list = BoardsStore.new(board, false);
 
             if (list.type === 'done') {
               list.position = 9999999;
             }
-
-            BoardsStore.state.lists.push(list);
           });
 
           BoardsStore.addBlankState();

app/assets/javascripts/boards/components/board_list.js.es6

@@ -71,7 +71,7 @@
           toListId = parseInt(toListId) || toListId;
           const issueId = parseInt(e.item.getAttribute('data-issue'));
 
-          BoardsStore.moveCardToList(fromListId, toListId, issueId, e.newIndex);
+          BoardsStore.moveCardToList(fromListId, toListId, issueId);
         }
       });
 

app/assets/javascripts/boards/models/issue.js.es6

@@ -6,7 +6,7 @@ class Issue {
     if (obj.assignee) {
       this.assignee = new User(obj.assignee);
     }
-    
+
     this.labels = [];
 
     obj.labels.forEach((label) => {
@@ -37,4 +37,10 @@ class Issue {
       });
     }
   }
+
+  getLists () {
+    return _.filter(BoardsStore.state.lists, (list) => {
+      return list.findIssue(this.id);
+    });
+  }
 }

app/assets/javascripts/boards/models/list.js.es6

@@ -24,6 +24,17 @@ class List {
     }
   }
 
+  save () {
+    service.createList(this.label.id)
+      .then((resp) => {
+        const data = resp.json();
+
+        this.id = data.id;
+        this.type = data.list_type;
+        this.position = data.position;
+      });
+  }
+
   destroy () {
     service.destroyList(this.id);
   }
@@ -36,10 +47,12 @@ class List {
     return this.type === 'backlog';
   }
 
-  addIssue (issue, index) {
-    this.issues.splice(index, 0, issue);
+  addIssue (issue, listFrom) {
+    this.issues.push(issue);
 
     issue.addLabel(this.label);
+
+    service.moveIssue(issue.id, listFrom.id, this.id);
   }
 
   findIssue (id) {

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -6,30 +6,23 @@
         author: {},
         assignee: {},
         milestone: {},
+        label: []
       }
     },
-    new: function (board) {
+    new: function (board, persist = true) {
       const doneList = this.getDoneList(),
             list = new List(board);
       this.state.lists.push(list);
 
-      if (list.type !== 'blank') {
-        service.createList(list.label.id)
-          .then(function (resp) {
-            const data = resp.json();
-
-            list.id = data.id;
-            list.type = data.list_type;
-            list.position = data.position;
-          });
-
+      if (persist) {
+        list.save();
         this.removeBlankState();
         this.addBlankState();
       }
-    },
-    addBlankState: function () {
-      const doneList = this.getDoneList();
 
+      return list;
+    },
+    shouldAddBlankState: function () {
       // Decide whether to add the blank state
       let addBlankState = true;
 
@@ -39,6 +32,11 @@
           return;
         }
       });
+      return addBlankState;
+    },
+    addBlankState: function () {
+      const doneList = this.getDoneList(),
+            addBlankState = this.shouldAddBlankState();
 
       if (addBlankState) {
         this.new({
@@ -46,21 +44,17 @@
           list_type: 'blank',
           title: 'Welcome to your Issue Board!',
           position: 0
-        });
+        }, false);
       }
     },
     removeBlankState: function () {
       this.removeList('blank');
     },
     getDoneList: function () {
-      return _.find(this.state.lists, (list) => {
-        return list.type === 'done';
-      });
+      return this.findList('type', 'done');
     },
     removeList: function (id) {
-      const list = _.find(this.state.lists, (list) => {
-        return list.id === id;
-      });
+      const list = this.findList('id', id);
 
       if (id !== 'blank') {
         list.destroy();
@@ -75,13 +69,8 @@
       }
     },
     moveList: function (oldIndex, newIndex) {
-      const listFrom = _.find(this.state.lists, (list) => {
-        return list.position === oldIndex;
-      });
-
-      const listTo = _.find(this.state.lists, (list) => {
-        return list.position === newIndex;
-      });
+      const listFrom = this.findList('position', oldIndex),
+            istTo = this.findList('position', newIndex);
 
       listFrom.position = newIndex;
       if (newIndex > listTo.position) {
@@ -92,42 +81,31 @@
 
       listFrom.update();
     },
-    moveCardToList: function (listFromId, listToId, issueId, toIndex) {
-      const listFrom = _.find(this.state.lists, (list) => {
-        return list.id === listFromId;
-      });
-      const listTo = _.find(this.state.lists, (list) => {
-        return list.id === listToId;
-      });
-      const issueTo = listTo.findIssue(issueId);
+    moveCardToList: function (listFromId, listToId, issueId) {
+      const listFrom = this.findList('id', listFromId),
+            listTo = this.findList('id', listToId),
+            issueTo = listTo.findIssue(issueId);
       let issue = listFrom.findIssue(issueId);
-      const issueLists = this.getListsForIssue(issue);
+      const issueLists = issue.getLists();
       listFrom.removeIssue(issue);
 
       // Add to new lists issues if it doesn't already exist
       if (issueTo) {
-        issue = issueTo;
-        issue.removeLabel(listFrom.label);
+        listTo.removeIssue(issueTo);
       } else {
-        listTo.addIssue(issue, toIndex);
+        listTo.addIssue(issue, listFrom);
       }
 
       if (listTo.id === 'done' && listFrom.id !== 'backlog') {
         issueLists.forEach((list) => {
-          issue.removeLabel(list.label);
           list.removeIssue(issue);
         });
       }
-
-      service.moveIssue(issue.id, listFrom.id, listTo.id);
     },
-    getListsForIssue: function (issue) {
-      return _.filter(this.state.lists, (list) => {
-        return list.findIssue(issue.id);
+    findList: function (key, val) {
+      return _.find(this.state.lists, (list) => {
+        return list[key] === val;
       });
-    },
-    clearDone: function () {
-      Vue.set(BoardsStore.state, 'done', {});
     }
   };
 }(window));

app/assets/stylesheets/pages/boards.scss

@@ -237,8 +237,3 @@
   margin-right: 8px;
   font-weight: 500;
 }
-
-.card-avatar {
-  margin-top: -2px;
-  border-radius: 50%;
-}

app/views/projects/boards/components/_board.html.haml

@@ -25,6 +25,8 @@
         ":issue-link-base" => "'#{namespace_project_issues_path(@project.namespace, @project)}'" }
         .board-list-loading.text-center{ "v-if" => "loading" }
           = icon("spinner spin")
-        %ul.board-list{ "v-el:list" => true, ":data-board" => "boardId" }
+        %ul.board-list{ "v-el:list" => true,
+          "v-show" => "!loading",
+          ":data-board" => "boardId" }
           = render "projects/boards/components/card"
       = render "projects/boards/components/blank_state"

app/views/projects/boards/components/_card.html.haml

@@ -9,4 +9,4 @@
     %span.label.color-label{ "v-for" => "label in issue.labels", ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
       {{ label.title }}
     %a{ ":href" => "'/u/' + issue.assignee.username", ":title" => "issue.assignee.name", "v-if" => "issue.assignee" }
-      %img.card-avatar{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }
+      %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }