Fixed removing items from list

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

@@ -64,8 +64,10 @@
         group: 'boards',
         draggable: '.is-draggable',
         handle: '.js-board-handle',
-        onUpdate (e) {
-          gl.issueBoards.BoardsStore.moveList(e.oldIndex, e.newIndex);
+        onUpdate: (e) => {
+          if (e.oldIndex !== e.newIndex) {
+            gl.issueBoards.BoardsStore.moveList(e.oldIndex, this.sortable.toArray());
+          }
         }
       });
 
@@ -76,7 +78,11 @@
       this.sortable = Sortable.create(this.$el.parentNode, options);
     },
     beforeDestroy () {
-      this.sortable.destroy();
+      this.list.destroy();
+
+      if (gl.issueBoards.BoardsStore.state.lists.length === 0) {
+        this.sortable.destroy();
+      }
     }
   });
 })();

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

@@ -7,7 +7,8 @@
       list: Object,
       issue: Object,
       issueLinkBase: String,
-      disabled: Boolean
+      disabled: Boolean,
+      index: Number
     },
     methods: {
       filterByLabel (label, e) {

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

@@ -3,16 +3,13 @@
   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.list.destroy();
+          this.$parent.$destroy(true);
         }
       }
     }

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

@@ -56,16 +56,28 @@
           group: 'issues',
           sort: false,
           disabled: this.disabled,
-          onAdd (e) {
+          onStart: (e) => {
+            const card = this.$refs.issue[e.oldIndex];
+
+            gl.issueBoards.BoardsStore.moving.issue = card.issue;
+            gl.issueBoards.BoardsStore.moving.list = card.list;
+          },
+          onAdd: (e) => {
+            const card = e.item,
+                  fromList = gl.issueBoards.BoardsStore.moving.list,
+                  issue = gl.issueBoards.BoardsStore.moving.issue;
+
+            gl.issueBoards.BoardsStore.moveIssueToList(fromList, this.list, issue);
+          },
+          onRemove (e) {
             const card = e.item,
-                  fromListId = parseInt(e.from.getAttribute('data-board')),
-                  toListId = parseInt(e.to.getAttribute('data-board')),
-                  issueId = parseInt(card.getAttribute('data-issue'));
+                  list = gl.issueBoards.BoardsStore.moving.list,
+                  issue = gl.issueBoards.BoardsStore.moving.issue;
 
             // Remove the new dom element & let vue add the element
             card.parentNode.removeChild(card);
 
-            gl.issueBoards.BoardsStore.moveCardToList(fromListId, toListId, issueId);
+            list.removeIssue(issue);
           }
         });
 

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

@@ -38,7 +38,7 @@ $(() => {
         if (!gl.issueBoards.BoardsStore.findList('title', label.title)) {
           gl.issueBoards.BoardsStore.new({
             title: label.title,
-            position: gl.issueBoards.BoardsStore.state.lists.length - 1,
+            position: gl.issueBoards.BoardsStore.state.lists.length - 2,
             list_type: 'label',
             label: {
               id: label.id,

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

@@ -34,9 +34,7 @@ class List {
 
   destroy () {
     if (this.type !== 'blank') {
-      gl.issueBoards.BoardsStore.state.lists = gl.issueBoards.BoardsStore.state.lists.filter((list) => {
-        return list.id !== this.id;
-      });
+      gl.issueBoards.BoardsStore.state.lists.$remove(this);
       gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
 
       gl.boardService.destroyList(this.id);

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

@@ -5,6 +5,10 @@
   gl.issueBoards.BoardsStore = {
     disabled: false,
     state: {},
+    moving: {
+      issue: {},
+      list: {}
+    },
     create () {
       this.state.lists = [];
       this.state.filters = {
@@ -76,31 +80,21 @@
         return list.id !== id;
       });
     },
-    moveList (oldIndex, newIndex) {
-      if (oldIndex === newIndex) return;
+    moveList (oldIndex, orderLists) {
+      const listFrom = this.findList('position', oldIndex);
 
-      const listFrom = this.findList('position', oldIndex),
-            listTo = this.findList('position', newIndex);
+      for (let i = 0, orderLength = orderLists.length; i < orderLength; i++) {
+        const id = parseInt(orderLists[i]),
+              list = this.findList('id', id);
 
-      listFrom.position = newIndex;
-      if (newIndex === listTo.position) {
-        listTo.position = oldIndex;
-      } else if (newIndex > listTo.position) {
-        listTo.position--;
-      } else {
-        listTo.position++;
+        list.position = i;
       }
-
-      listFrom.update();
     },
-    moveCardToList (listFromId, listToId, issueId) {
-      const listFrom = this.findList('id', listFromId, false),
-            listTo = this.findList('id', listToId, false),
-            issueTo = listTo.findIssue(issueId),
-            issue = listFrom.findIssue(issueId),
+    moveIssueToList (listFrom, listTo, issue) {
+      const issueTo = listTo.findIssue(issue.id),
             issueLists = issue.getLists(),
-            listLabels = issueLists.map((issue) => {
-              return issue.label;
+            listLabels = issueLists.map((listIssue) => {
+              return listIssue.label;
             });
 
       // Add to new lists issues if it doesn't already exist
@@ -114,8 +108,6 @@
           list.removeIssue(issue);
         }
         issue.removeLabels(listLabels);
-      } else {
-        listFrom.removeIssue(issue);
       }
     },
     findList (key, val, type = 'label') {

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

@@ -4,7 +4,8 @@
   ":list" => "list",
   ":disabled" => "disabled",
   ":issue-link-base" => "issueLinkBase" }
-  .board{ ":class" => "{ 'is-draggable': !isPreset }" }
+  .board{ ":class" => "{ 'is-draggable': !isPreset }",
+    ":data-id" => "list.id" }
     .board-inner
       %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
         %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !isPreset) }" }
@@ -14,8 +15,7 @@
             {{ list.issues.length }}
           - if can?(current_user, :admin_list, @project)
             %board-delete{ "inline-template" => true,
-              "v-if" => "!isPreset",
-              ":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")
           = icon("spinner spin", class: "board-header-loading-spinner pull-right", "v-show" => "list.loadingMore")

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

 %board-card{ "inline-template" => true,
   "v-for" => "issue in issues | orderBy 'priority'",
+  "v-ref:issue" => true,
+  ":index" => "$index",
   ":list" => "list",
   ":issue" => "issue",
   ":issue-link-base" => "issueLinkBase",
   ":disabled" => "disabled",
   "track-by" => "id" }
-  %li.card{ ":data-issue" => "issue.id",
-    ":class" => "{ 'user-can-drag': !disabled }" }
+  %li.card{ ":class" => "{ 'user-can-drag': !disabled }",
+    ":index" => "index" }
     = icon("align-justify", class: "board-mobile-handle js-card-drag-handle", "v-if" => "!disabled")
     %h4.card-title
       = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")

app/views/shared/issuable/_label_page_default.html.haml

@@ -8,7 +8,7 @@
   - if show_boards_content
     .issue-board-dropdown-content
       %p
-        Add a list to issue boards by selecting a label below. The list will automatically be populated with issues that have that label. To create a list for a label that doesn't exist yet, simply create the label below.
+        Each label that exists in your issue tracker can have its own dedicated list. Select a label below to add a list to your Board and it will automatically be populated with issues that have that label. To create a list for a label that doesn't exist yet, simply create the label below.
   = dropdown_filter(filter_placeholder)
   = dropdown_content
   - if @project && show_footer

spec/javascripts/boards/boards_store_spec.js.es6

@@ -155,7 +155,7 @@
           expect(list.issues.length).toBe(1);
           expect(listTwo.issues.length).toBe(1);
 
-          gl.issueBoards.BoardsStore.moveCardToList(1, 2, 1);
+          gl.issueBoards.BoardsStore.moveIssueToList(1, 2, 1);
 
           expect(list.issues.length).toBe(0);
           expect(listTwo.issues.length).toBe(1);