Added vue-resource to get & save data

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

 #= require vue
+#= require vue-resource
 #= require Sortable
 #= require_tree ./stores
+#= require_tree ./services
 #= require_tree ./components
 
-$ ->
+$ =>
+  @service = new BoardService($('#board-app').data('endpoint'))
+
   new Vue
     el: '#board-app'
     data:
       boards: BoardsStore.state
-      interaction: BoardsStore.dragging
+    ready: ->
+      service
+        .all()
+        .then (resp) ->
+          BoardsStore.state.push(board) for board in resp.data

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

 Board = Vue.extend
   props:
-    disabled: Boolean
     board: Object
   data: ->
     dragging: BoardsStore.dragging
   methods:
     clearSearch: ->
       this.query = ''
+  computed:
+    isPreset: ->
+      typeof this.board.id != 'number'
   ready: ->
-    Sortable.create this.$els.list,
+    Sortable.create this.$el.parentNode,
       group: 'boards'
-      disabled: this.disabled
       animation: 150
-      scroll: document.getElementById('board-app')
-      scrollSensitivity: 150
-      scrollSpeed: 50
+      draggable: '.is-draggable'
       forceFallback: true
       fallbackClass: 'is-dragging'
       ghostClass: 'is-ghost'
-      onAdd: (e) ->
-        fromBoardId = e.from.getAttribute('data-board')
-        fromBoardId = parseInt(fromBoardId) || fromBoardId
-        toBoardId = e.to.getAttribute('data-board')
-        toBoardId = parseInt(toBoardId) || toBoardId
-        issueId = parseInt(e.item.getAttribute('data-issue'))
-
-        BoardsStore.moveCardToBoard(fromBoardId, toBoardId, issueId, e.newIndex)
       onUpdate: (e) ->
-        console.log e.newIndex, e.oldIndex
-      onStart: ->
-        BoardsStore.dragging = true
+        BoardsStore.moveBoard(e.oldIndex + 1, e.newIndex + 1)
 
 Vue.component('board', Board)

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

+BoardList = Vue.extend
+  props:
+    disabled: Boolean
+    boardId: [Number, String]
+    issues: Array
+    query: String
+  ready: ->
+    Sortable.create this.$els.list,
+      group: 'issues'
+      disabled: this.disabled
+      animation: 150
+      scroll: document.getElementById('board-app')
+      scrollSensitivity: 150
+      scrollSpeed: 50
+      forceFallback: true
+      fallbackClass: 'is-dragging'
+      ghostClass: 'is-ghost'
+      onAdd: (e) ->
+        fromBoardId = e.from.getAttribute('data-board')
+        fromBoardId = parseInt(fromBoardId) || fromBoardId
+        toBoardId = e.to.getAttribute('data-board')
+        toBoardId = parseInt(toBoardId) || toBoardId
+        issueId = parseInt(e.item.getAttribute('data-issue'))
+
+        BoardsStore.moveCardToBoard(fromBoardId, toBoardId, issueId, e.newIndex)
+      onUpdate: (e) ->
+        console.log e.newIndex, e.oldIndex
+
+Vue.component('board-list', BoardList)

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

-Card = Vue.extend
-  data: ->
-
-Vue.component('card', Card)

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

+class @BoardService
+  constructor: (@root) ->
+    Vue.http.options.root = @root
+
+    @resource = Vue.resource "#{@root}{/id}", {},
+      all:
+        method: 'GET'
+        url: 'all'
+
+  setCSRF: ->
+  	Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken()
+
+  all: ->
+    @setCSRF()
+    @resource.all()
+
+  updateBoard: (id, index) ->
+    @setCSRF()
+    @resource.update { id: id }, { index: index }

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

 @BoardsStore =
-  state: [
-    {id: 'backlog', title: 'Backlog', index: 0, search: true, issues: [{ id: 1, title: 'Test', labels: []}]},
-    {id: 1, title: 'Frontend', index: 1, label: { title: 'Frontend', backgroundColor: '#44ad8e', textColor: '#ffffff' }, issues: [{ id: 3, title: 'Frontend bug', labels: [{ title: 'Frontend', backgroundColor: '#44ad8e', textColor: '#ffffff' }, { title: 'UX', backgroundColor: '#44ad8e', textColor: '#ffffff' }]}]},
-    {id: 'done', title: 'Done', index: 99999999, issues: [{ id: 2, title: 'Testing done', labels: []}]}
-  ]
-  interaction: {
-    dragging: false
-  }
+  state: []
+  moveBoard: (oldIndex, newIndex) ->
+    boardFrom = _.find BoardsStore.state, (board) ->
+      board.index is oldIndex
+
+    service.updateBoard(boardFrom.id, newIndex)
+
+    boardTo = _.find BoardsStore.state, (board) ->
+      board.index is newIndex
+
+    boardFrom.index = newIndex
+    if newIndex > boardTo.index
+      boardTo.index--
+    else
+      boardTo.index++
   moveCardToBoard: (boardFromId, boardToId, issueId, toIndex) ->
     boardFrom = _.find BoardsStore.state, (board) ->
       board.id is boardFromId
@@ -19,7 +26,7 @@
     boardFrom.issues = _.reject boardFrom.issues, (issue) ->
       issue.id is issueId
 
-    # Add to new boards issues and increase count
+    # Add to new boards issues
     boardTo.issues.splice(toIndex, 0, issue)
 
     # If going to done - remove label

app/assets/stylesheets/pages/boards.scss

@@ -107,31 +107,29 @@
   flex: 1;
   margin: 0;
   padding: 5px;
-  list-style: none;
   overflow: scroll;
 }
 
+.is-ghost {
+  opacity: 0;
+}
+
+.is-dragging {
+  // Important because plugin sets inline CSS
+  opacity: 1!important;
+}
+
 .card {
   width: 100%;
   padding: 10px $gl-padding;
   background: #fff;
   border-radius: $border-radius-default;
   box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
+  list-style: none;
 
   &:not(:last-child) {
     margin-bottom: 5px;
   }
-
-  &.is-dragging {
-    cursor: -webkit-grabbing;
-    cursor: -moz-grabbing;
-    // Important because plugin sets inline CSS
-    opacity: 1!important;
-  }
-
-  &.is-ghost {
-    opacity: 0;
-  }
 }
 
 .card-title {

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

-%board{ "inline-template" => true, "v-cloak" => true, "v-for" => "board in boards | orderBy 'index'", ":board" => "board", ":disabled" => "#{current_user.nil?}" }
-  .board
+%board{ "inline-template" => true, "v-cloak" => true, "v-for" => "board in boards | orderBy 'index'", ":board" => "board" }
+  .board{ ":class" => "{ 'is-draggable': !isPreset }" }
     .board-inner
       %header.board-inner-container.board-header{ ":class" => "{ 'has-border': board.label }", ":style" => "{ borderTopColor: board.label.backgroundColor }" }
         %h3.board-title
@@ -13,5 +13,6 @@
           %span.sr-only
             Clear search
           = icon("times", class: "board-search-clear")
-      %ul.board-list{ "v-el:list" => true, ":data-board" => "board.id" }
-        = render "projects/boards/components/card"
+      %board-list{ "inline-template" => true, ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query" }
+        %ul.board-list{ "v-el:list" => true, ":data-board" => "boardId" }
+          = render "projects/boards/components/card"

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

-%li.card{ "v-for" => "issue in board.issues", ":data-issue" => "issue.id" }
+%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | filterBy query in 'title'" }
   %h4.card-title
-    %a{ href: "#" }
+    %a{ href: "#", ":title" => "issue.title" }
       {{ issue.title }}
   .card-footer
     %span.card-number
-      \#288
+      = precede '#' do
+        {{ issue.id }}
     %span.label.color-label{ "v-for" => "label in issue.labels", ":style" => "{ backgroundColor: label.backgroundColor, color: label.textColor }" }
       {{ label.title }}

app/views/projects/boards/index.html.haml

@@ -9,6 +9,5 @@
 
 = render 'shared/issuable/filter', type: :boards
 
-.boards-list#board-app{ ":class" => "{ 'is-dragging': interaction.dragging }"}
-  {{ interaction.dragging }}
+.boards-list#board-app{ "data-endpoint" => "#{namespace_project_boards_path(@project.namespace, @project)}" }
   = render "projects/boards/components/board"

config/routes.rb

@@ -832,7 +832,17 @@ Rails.application.routes.draw do
           end
         end
 
+<<<<<<< 9d83a366e263d015894908f72576972f87848399
         resources :project_members, except: [:show, :new, :edit], constraints: { id: /[a-zA-Z.\/0-9_\-#%+]+/ }, concerns: :access_requestable do
+=======
+        resources :boards do
+          collection do
+            get :all
+          end
+        end
+
+        resources :project_members, except: [:new, :edit], constraints: { id: /[a-zA-Z.\/0-9_\-#%+]+/ }, concerns: :access_requestable do
+>>>>>>> Added vue-resource to get & save data
           collection do
             delete :leave