Commit f330585a authored by Phil Hughes's avatar Phil Hughes

Added vue-resource to get & save data

parent 6478adf1
#= 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
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)
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)
Card = Vue.extend
data: ->
Vue.component('card', Card)
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 }
@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
......
......@@ -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 {
......
%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"
%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 }}
......@@ -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"
......@@ -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
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment