Fixed bug when moving lists around & then deleting

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

@@ -64,9 +64,20 @@
         group: 'boards',
         draggable: '.is-draggable',
         handle: '.js-board-handle',
-        onUpdate: (e) => {
-          if (e.oldIndex !== e.newIndex) {
-            gl.issueBoards.BoardsStore.moveList(e.oldIndex, this.sortable.toArray());
+        onEnd: (e) => {
+          document.body.classList.remove('is-dragging');
+
+          if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
+            const order = this.sortable.toArray(),
+                  $board = this.$parent.$refs.board[e.oldIndex + 1],
+                  list = $board.list;
+
+            $board.$destroy(true);
+
+            this.$nextTick(() => {
+              gl.issueBoards.BoardsStore.state.lists.splice(e.newIndex, 0, list);
+              gl.issueBoards.BoardsStore.moveList(list, order);
+            });
           }
         }
       });
@@ -78,11 +89,7 @@
       this.sortable = Sortable.create(this.$el.parentNode, options);
     },
     beforeDestroy () {
-      this.list.destroy();
-
-      if (gl.issueBoards.BoardsStore.state.lists.length === 0) {
-        this.sortable.destroy();
-      }
+      gl.issueBoards.BoardsStore.state.lists.$remove(this.list);
     }
   });
 })();

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

@@ -3,13 +3,16 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.BoardDelete = Vue.extend({
+    props: {
+      list: Object
+    },
     methods: {
       deleteBoard (e) {
         e.stopImmediatePropagation();
         $(this.$el).tooltip('hide');
 
         if (confirm('Are you sure you want to delete this list?')) {
-          this.$parent.$destroy(true);
+          this.list.destroy();
         }
       }
     }

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

 class List {
   constructor (obj) {
     this.id = obj.id;
+    this._uid = Math.ceil(Math.random() * 1000);
     this.position = obj.position;
     this.title = obj.title;
     this.type = obj.list_type;

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

@@ -80,15 +80,14 @@
         return list.id !== id;
       });
     },
-    moveList (oldIndex, orderLists) {
-      const listFrom = this.findList('position', oldIndex);
-
+    moveList (listFrom, orderLists) {
       for (let i = 0, orderLength = orderLists.length; i < orderLength; i++) {
         const id = parseInt(orderLists[i]),
               list = this.findList('id', id);
 
         list.position = i;
       }
+      listFrom.update();
     },
     moveIssueToList (listFrom, listTo, issue) {
       const issueTo = listTo.findIssue(issue.id),

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

 %board{ "inline-template" => true,
   "v-cloak" => true,
   "v-for" => "list in state.lists | orderBy 'position'",
+  "v-ref:board" => true,
   ":list" => "list",
   ":disabled" => "disabled",
-  ":issue-link-base" => "issueLinkBase" }
+  ":issue-link-base" => "issueLinkBase",
+  "track-by" => "_uid" }
   .board{ ":class" => "{ 'is-draggable': !isPreset }",
     ":data-id" => "list.id" }
     .board-inner
@@ -15,6 +17,7 @@
             {{ list.issues.length }}
           - if can?(current_user, :admin_list, @project)
             %board-delete{ "inline-template" => true,
+              ":list" => "list",
               "v-if" => "!isPreset && list.id" }
               %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
                 = icon("trash")