Removes boards correctly

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

@@ -10,7 +10,7 @@ Board = Vue.extend
     isPreset: ->
       typeof this.board.id != 'number'
   ready: ->
-    Sortable.create this.$el.parentNode,
+    this.sortable = Sortable.create this.$el.parentNode,
       group: 'boards'
       animation: 150
       draggable: '.is-draggable'
@@ -19,5 +19,7 @@ Board = Vue.extend
       ghostClass: 'is-ghost'
       onUpdate: (e) ->
         BoardsStore.moveBoard(e.oldIndex + 1, e.newIndex + 1)
+  beforeDestroy: ->
+    this.sortable.destroy()
 
 Vue.component('board', Board)

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

@@ -1,5 +1,11 @@
 BoardDelete = Vue.extend
   props:
     boardId: Number
+  methods:
+    deleteBoard: ->
+      $(this.$el).tooltip('destroy')
+
+      if confirm('Are you sure you want to delete this list?')
+        BoardsStore.removeBoard(this.boardId)
 
 Vue.component 'board-delete', BoardDelete

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

@@ -56,5 +56,7 @@ BoardList = Vue.extend
     this.$els.list.onscroll = =>
       if (this.scrollTop() > this.scrollHeight() - this.scrollOffset) and !this.loadMore
         this.loadFromLastId()
+  beforeDestroy: ->
+    this.sortable.destroy()
 
 Vue.component('board-list', BoardList)

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

@@ -6,6 +6,9 @@
       author: {}
       assignee: {}
       milestone: {}
+  removeBoard: (id) ->
+    BoardsStore.state.boards = _.reject BoardsStore.state.boards, (board) ->
+      board.id is id
   moveBoard: (oldIndex, newIndex) ->
     boardFrom = _.find BoardsStore.state.boards, (board) ->
       board.index is oldIndex

app/assets/stylesheets/pages/boards.scss

@@ -110,6 +110,7 @@
   color: $gray-darkest;
   background-color: transparent;
   border: 0;
+  outline: 0;
 
   &:hover {
     color: $gl-link-color;

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

@@ -6,8 +6,8 @@
           {{ board.title }}
           %span.pull-right
             {{ board.issues.length }}
-          %board-delete{ "inline-template" => true, "v-if" => "!isPreset" }
-            %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete board", data: { placement: "bottom" } }
+          %board-delete{ "inline-template" => true, "v-if" => "!isPreset", ":board-id" => "board.id" }
+            %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete board", data: { placement: "bottom" }, "@click" => "deleteBoard" }
               %span.sr-only
                 Delete board
               = icon("trash")

vendor/assets/javascripts/clipboard.js

@@ -154,12 +154,12 @@ function E () {
 E.prototype = {
 	on: function (name, callback, ctx) {
     var e = this.e || (this.e = {});
-    
+
     (e[name] || (e[name] = [])).push({
       fn: callback,
       ctx: ctx
     });
-    
+
     return this;
   },
 
@@ -169,7 +169,7 @@ E.prototype = {
       self.off(name, fn);
       callback.apply(ctx, arguments);
     };
-    
+
     return this.on(name, fn, ctx);
   },
 
@@ -178,11 +178,11 @@ E.prototype = {
     var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
     var i = 0;
     var len = evtArr.length;
-    
+
     for (i; i < len; i++) {
       evtArr[i].fn.apply(evtArr[i].ctx, data);
     }
-    
+
     return this;
   },
 
@@ -190,21 +190,21 @@ E.prototype = {
     var e = this.e || (this.e = {});
     var evts = e[name];
     var liveEvents = [];
-    
+
     if (evts && callback) {
       for (var i = 0, len = evts.length; i < len; i++) {
         if (evts[i].fn !== callback) liveEvents.push(evts[i]);
       }
     }
-    
+
     // Remove event from queue to prevent memory leak
     // Suggested by https://github.com/lazd
     // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
 
-    (liveEvents.length) 
+    (liveEvents.length)
       ? e[name] = liveEvents
       : delete e[name];
-    
+
     return this;
   }
 };
@@ -618,4 +618,4 @@ exports['default'] = Clipboard;
 module.exports = exports['default'];
 
 },{"./clipboard-action":6,"delegate-events":1,"tiny-emitter":5}]},{},[7])(7)
-});
+});