Commit 3e839b34 authored by Phil Hughes's avatar Phil Hughes

Hooked the frontend services up with the backend

parent 9172c45b
......@@ -19,18 +19,17 @@ $(function () {
.then((resp) => {
const boards = resp.json();
// Add blank state board
if (boards.length === 2) {
boards.splice(1, 0, {
id: 'blank',
title: 'Welcome to your Issue Board!',
index: 1
});
}
boards.forEach((board) => {
BoardsStore.new(board);
const list = new List(board);
if (list.type === 'done') {
list.position = 9999999;
}
BoardsStore.state.lists.push(list);
});
BoardsStore.addBlankState();
});
}
});
......
......@@ -15,7 +15,7 @@
},
computed: {
isPreset: function () {
return typeof this.board.id !== 'number';
return this.board.type === 'backlog' || this.board.type === 'done' || this.board.type === 'blank';
}
},
ready: function () {
......@@ -27,7 +27,7 @@
fallbackClass: 'is-dragging',
ghostClass: 'is-ghost',
onUpdate: function (e) {
BoardsStore.moveList(e.oldIndex + 1, e.newIndex + 1);
BoardsStore.moveList(e.oldIndex, e.newIndex);
}
});
},
......
......@@ -31,13 +31,12 @@ $(() => {
clicked: (label, $el, e) => {
e.preventDefault();
BoardsStore.new({
id: BoardsStore.state.lists.length - 1,
title: label.title,
index: BoardsStore.state.lists.length - 1,
position: BoardsStore.state.lists.length - 1,
label: {
id: label.id,
title: label.title,
backgroundColor: label.color,
color: '#fff'
color: label.color
},
issues: []
});
......
class Label {
constructor (obj) {
this.id = obj.id;
this.title = obj.title;
this.backgroundColor = obj.backgroundColor;
this.textColor = obj.textColor;
this.color = obj.color;
}
}
class List {
constructor (obj) {
this.id = obj.id;
this.index = obj.index;
this.search = obj.search || false;
this.position = obj.position;
this.title = obj.title;
this.type = obj.list_type;
if (obj.label) {
this.label = new Label(obj.label);
......@@ -17,6 +17,18 @@ class List {
}
}
destroy () {
service.destroyList(this.id);
}
update () {
service.updateList(this);
}
canSearch () {
return this.type === 'backlog';
}
addIssue (issue, index) {
this.issues.splice(index, 0, issue);
......
......@@ -2,12 +2,8 @@ class BoardService {
constructor (root) {
Vue.http.options.root = root;
this.resource = Vue.resource(`${root}{/id}`, {}, {
all: {
method: 'GET',
url: 'all'
}
});
this.lists = Vue.resource(`${root}{/id}.json`, {});
this.list = Vue.resource(`${root}/lists{/id}.json`, {});
}
setCSRF () {
......@@ -16,11 +12,32 @@ class BoardService {
all () {
this.setCSRF();
return this.resource.all();
return this.lists.get();
}
createList (labelId) {
this.setCSRF();
return this.list.save({}, {
list: {
label_id: labelId
}
});
}
updateBoard (id, index) {
updateList (list) {
this.setCSRF();
return this.resource.update({ id: id }, { index: index });
return this.list.update({ id: list.id }, {
list: {
position: list.position
}
});
}
destroyList (id) {
this.setCSRF();
return this.list.delete({ id });
}
};
......@@ -2,7 +2,6 @@
w.BoardsStore = {
state: {
lists: [],
done: {},
filters: {
author: {},
assignee: {},
......@@ -10,47 +9,88 @@
}
},
new: function (board) {
// Move the done list index
const doneList = this.getDoneList();
const doneList = this.getDoneList(),
list = new List(board);
this.state.lists.push(list);
if (list.type !== 'blank') {
service.createList(list.label.id)
.then(function (resp) {
const data = resp.json();
if (doneList) {
doneList.index = board.index + 1;
list.id = data.id;
list.type = data.list_type;
list.position = data.position;
});
this.removeBlankState();
this.addBlankState();
}
},
addBlankState: function () {
const doneList = this.getDoneList();
const list = new List(board);
this.state.lists.push(list);
// Decide whether to add the blank state
let addBlankState = true;
this.state.lists.forEach(function (list) {
if (list.type !== 'backlog' && list.type !== 'done') {
addBlankState = false;
return;
}
});
if (addBlankState) {
this.new({
id: 'blank',
list_type: 'blank',
title: 'Welcome to your Issue Board!',
position: 0
});
}
},
removeBlankState: function () {
this.removeList('blank');
},
getDoneList: function () {
return _.find(this.state.lists, (list) => {
return list.id === 'done';
return list.type === 'done';
});
},
removeList: function (id) {
const list = _.find(this.state.lists, (list) => {
return list.id === id;
});
if (id !== 'blank') {
list.destroy();
}
this.state.lists = _.reject(this.state.lists, (list) => {
return list.id === id;
});
if (id !== 'blank') {
this.getDoneList().index = this.state.lists.length - 1;
this.addBlankState();
}
},
moveList: function (oldIndex, newIndex) {
const listFrom = _.find(this.state.lists, (list) => {
return list.index === oldIndex;
return list.position === oldIndex;
});
service.updateBoard(listFrom.id, newIndex);
const listTo = _.find(this.state.lists, (list) => {
return list.index === newIndex;
return list.position === newIndex;
});
listFrom.index = newIndex;
if (newIndex > listTo.index) {
listTo.index--;
listFrom.position = newIndex;
if (newIndex > listTo.position) {
listTo.position--;
} else {
listTo.index++;
listTo.position++;
}
listFrom.update();
},
moveCardToList: function (listFromId, listToId, issueId, toIndex) {
const listFrom = _.find(this.state.lists, (list) => {
......@@ -84,7 +124,7 @@
return list.findIssue(issue.id);
});
},
clearDone: () => {
clearDone: function () {
Vue.set(BoardsStore.state, 'done', {});
}
};
......
%board{ "inline-template" => true, "v-cloak" => true, "v-for" => "board in state.lists | orderBy 'index'", ":board" => "board" }
%board{ "inline-template" => true, "v-cloak" => true, "v-for" => "board in state.lists | orderBy 'position'", ":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 }" }
%header.board-inner-container.board-header{ ":class" => "{ 'has-border': board.label }", ":style" => "{ borderTopColor: board.label.color }" }
%h3.board-title
{{ board.title }}
%span.pull-right
......@@ -9,7 +9,7 @@
%board-delete{ "inline-template" => true, "v-if" => "!isPreset", ":board-id" => "board.id" }
%button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete board", "aria-label" => "Delete board", data: { placement: "bottom" }, "@click" => "deleteBoard" }
= icon("trash")
.board-inner-container.board-search-container{ "v-if" => "board.search" }
.board-inner-container.board-search-container{ "v-if" => "board.canSearch()" }
%input.form-control{ type: "text", placeholder: "Search issues", "v-model" => "query" }
= 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" }
......
- @no_container = true
- @content_class = "issue-boards-content"
- page_title "Boards"
- content_for :page_specific_javascripts do
= page_specific_javascript_tag('boards/boards_bundle.js')
= page_specific_javascript_tag('boards/test_utils/simulate_drag.js') if Rails.env.test?
= render "projects/issues/head"
= render 'shared/issuable/filter', type: :boards
.boards-list#board-app{ "data-endpoint" => "#{namespace_project_boards_path(@project.namespace, @project)}" }
= render "projects/boards/components/board"
- @no_container = true
- @content_class = "issue-boards-content"
- page_title "Boards"
- content_for :page_specific_javascripts do
= page_specific_javascript_tag('boards/boards_bundle.js')
= page_specific_javascript_tag('boards/test_utils/simulate_drag.js') if Rails.env.test?
= render "projects/issues/head"
.boards-list
.board
.board-inner
%header.board-inner-container
%h3.board-title
Backlog
%span.pull-right
5
.board-inner-container.board-search-container
%input.form-control{ type: "text", placeholder: "Search issues" }
%ul.board-list
%li.card
%h4.card-title
Issue title
.card-footer
%span.card-number
\#288
%span.label.color-label{ style: "background-color: #428bca; color: #FFFFFF" }
label
= render 'shared/issuable/filter', type: :boards
.boards-list#board-app{ "data-endpoint" => "#{namespace_project_board_path(@project.namespace, @project)}" }
= render "projects/boards/components/board"
......@@ -832,17 +832,7 @@ 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
......
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