Can move between lists

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

@@ -5,7 +5,8 @@
       boardId: [Number, String],
       filters: Object,
       issues: Array,
-      query: String
+      query: String,
+      loading: Boolean
     },
     data: () => {
       return {

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

 class Issue {
   constructor (obj) {
-    this.id = obj.id;
+    this.id = obj.iid;
     this.title = obj.title;
     this.labels = [];
 

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

@@ -11,9 +11,11 @@ class List {
     }
 
     if (this.type !== 'blank') {
+      this.loading = true;
       service.getIssuesForList(this.id)
         .then((resp) => {
           const data = resp.json();
+          this.loading = false;
 
           data.forEach((issue) => {
             this.issues.push(new Issue(issue));

app/assets/javascripts/boards/services/board_service.js.es6

@@ -4,6 +4,7 @@ class BoardService {
 
     this.lists = Vue.resource(`${root}{/id}.json`, {});
     this.list = Vue.resource(`${root}/lists{/id}.json`, {});
+    this.issue = Vue.resource(`${root}/issues{/id}.json`, {});
     this.issues = Vue.resource(`${root}/lists{/id}/issues.json`, {});
   }
 
@@ -47,4 +48,13 @@ class BoardService {
 
     return this.issues.get({ id });
   }
+
+  moveIssue (id, from, to) {
+    return this.issue.update({ id }, {
+      issue: {
+        from,
+        to
+      }
+    });
+  }
 };

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

@@ -118,6 +118,8 @@
           list.removeIssue(issue);
         });
       }
+
+      service.moveIssue(issue.id, listFrom.id, listTo.id);
     },
     getListsForIssue: function (issue) {
       return _.filter(this.state.lists, (list) => {

app/assets/stylesheets/pages/boards.scss

@@ -188,6 +188,11 @@
   overflow: scroll;
 }
 
+.board-list-loading {
+  margin-top: 10px;
+  font-size: 26px;
+}
+
 .is-ghost {
   opacity: 0;
 }

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

@@ -14,7 +14,9 @@
         = icon("search", class: "board-search-icon", "v-show" => "!query")
         %button.board-search-clear-btn{ type: "button", role: "button", "aria-label" => "Clear search", "@click" => "clearSearch", "v-show" => "query" }
           = icon("times", class: "board-search-clear")
-      %board-list{ "inline-template" => true, "v-if" => "board.id != 'blank'", ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query", ":filters" => "filters" }
+      %board-list{ "inline-template" => true, "v-if" => "board.id != 'blank'", ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query", ":filters" => "filters", ":loading" => "board.loading" }
+        .board-list-loading.text-center{ "v-if" => "loading" }
+          = icon("spinner spin")
         %ul.board-list{ "v-el:list" => true, ":data-board" => "boardId" }
           = render "projects/boards/components/card"
       = render "projects/boards/components/blank_state"