diff options
8 files changed, 55 insertions, 63 deletions
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6 index 8f360f69c6a..9b6331d54d8 100644 --- a/app/assets/javascripts/boards/boards_bundle.js.es6 +++ b/app/assets/javascripts/boards/boards_bundle.js.es6 @@ -20,13 +20,11 @@ $(function () { const boards = resp.json(); boards.forEach((board) => { - const list = new List(board); + const list = BoardsStore.new(board, false); if (list.type === 'done') { list.position = 9999999; } - - BoardsStore.state.lists.push(list); }); BoardsStore.addBlankState(); diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6 index bf222cc3d44..a468eb36cbf 100644 --- a/app/assets/javascripts/boards/components/board_list.js.es6 +++ b/app/assets/javascripts/boards/components/board_list.js.es6 @@ -71,7 +71,7 @@ toListId = parseInt(toListId) || toListId; const issueId = parseInt(e.item.getAttribute('data-issue')); - BoardsStore.moveCardToList(fromListId, toListId, issueId, e.newIndex); + BoardsStore.moveCardToList(fromListId, toListId, issueId); } }); diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6 index a56b2bc5175..af90560c7c0 100644 --- a/app/assets/javascripts/boards/models/issue.js.es6 +++ b/app/assets/javascripts/boards/models/issue.js.es6 @@ -6,7 +6,7 @@ class Issue { if (obj.assignee) { this.assignee = new User(obj.assignee); } - + this.labels = []; obj.labels.forEach((label) => { @@ -37,4 +37,10 @@ class Issue { }); } } + + getLists () { + return _.filter(BoardsStore.state.lists, (list) => { + return list.findIssue(this.id); + }); + } } diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6 index a9322eb216b..6482eda828c 100644 --- a/app/assets/javascripts/boards/models/list.js.es6 +++ b/app/assets/javascripts/boards/models/list.js.es6 @@ -24,6 +24,17 @@ class List { } } + save () { + service.createList(this.label.id) + .then((resp) => { + const data = resp.json(); + + this.id = data.id; + this.type = data.list_type; + this.position = data.position; + }); + } + destroy () { service.destroyList(this.id); } @@ -36,10 +47,12 @@ class List { return this.type === 'backlog'; } - addIssue (issue, index) { - this.issues.splice(index, 0, issue); + addIssue (issue, listFrom) { + this.issues.push(issue); issue.addLabel(this.label); + + service.moveIssue(issue.id, listFrom.id, this.id); } findIssue (id) { diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6 index 56c4bf31c4f..9612d82788a 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js.es6 +++ b/app/assets/javascripts/boards/stores/boards_store.js.es6 @@ -6,30 +6,23 @@ author: {}, assignee: {}, milestone: {}, + label: [] } }, - new: function (board) { + new: function (board, persist = true) { 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(); - - list.id = data.id; - list.type = data.list_type; - list.position = data.position; - }); - + if (persist) { + list.save(); this.removeBlankState(); this.addBlankState(); } - }, - addBlankState: function () { - const doneList = this.getDoneList(); + return list; + }, + shouldAddBlankState: function () { // Decide whether to add the blank state let addBlankState = true; @@ -39,6 +32,11 @@ return; } }); + return addBlankState; + }, + addBlankState: function () { + const doneList = this.getDoneList(), + addBlankState = this.shouldAddBlankState(); if (addBlankState) { this.new({ @@ -46,21 +44,17 @@ list_type: 'blank', title: 'Welcome to your Issue Board!', position: 0 - }); + }, false); } }, removeBlankState: function () { this.removeList('blank'); }, getDoneList: function () { - return _.find(this.state.lists, (list) => { - return list.type === 'done'; - }); + return this.findList('type', 'done'); }, removeList: function (id) { - const list = _.find(this.state.lists, (list) => { - return list.id === id; - }); + const list = this.findList('id', id); if (id !== 'blank') { list.destroy(); @@ -75,13 +69,8 @@ } }, moveList: function (oldIndex, newIndex) { - const listFrom = _.find(this.state.lists, (list) => { - return list.position === oldIndex; - }); - - const listTo = _.find(this.state.lists, (list) => { - return list.position === newIndex; - }); + const listFrom = this.findList('position', oldIndex), + istTo = this.findList('position', newIndex); listFrom.position = newIndex; if (newIndex > listTo.position) { @@ -92,42 +81,31 @@ listFrom.update(); }, - moveCardToList: function (listFromId, listToId, issueId, toIndex) { - const listFrom = _.find(this.state.lists, (list) => { - return list.id === listFromId; - }); - const listTo = _.find(this.state.lists, (list) => { - return list.id === listToId; - }); - const issueTo = listTo.findIssue(issueId); + moveCardToList: function (listFromId, listToId, issueId) { + const listFrom = this.findList('id', listFromId), + listTo = this.findList('id', listToId), + issueTo = listTo.findIssue(issueId); let issue = listFrom.findIssue(issueId); - const issueLists = this.getListsForIssue(issue); + const issueLists = issue.getLists(); listFrom.removeIssue(issue); // Add to new lists issues if it doesn't already exist if (issueTo) { - issue = issueTo; - issue.removeLabel(listFrom.label); + listTo.removeIssue(issueTo); } else { - listTo.addIssue(issue, toIndex); + listTo.addIssue(issue, listFrom); } if (listTo.id === 'done' && listFrom.id !== 'backlog') { issueLists.forEach((list) => { - issue.removeLabel(list.label); list.removeIssue(issue); }); } - - service.moveIssue(issue.id, listFrom.id, listTo.id); }, - getListsForIssue: function (issue) { - return _.filter(this.state.lists, (list) => { - return list.findIssue(issue.id); + findList: function (key, val) { + return _.find(this.state.lists, (list) => { + return list[key] === val; }); - }, - clearDone: function () { - Vue.set(BoardsStore.state, 'done', {}); } }; }(window)); diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 09bb3113f6f..7054cfd73c1 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -237,8 +237,3 @@ margin-right: 8px; font-weight: 500; } - -.card-avatar { - margin-top: -2px; - border-radius: 50%; -} diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml index 44b17f39b55..31b2305edca 100644 --- a/app/views/projects/boards/components/_board.html.haml +++ b/app/views/projects/boards/components/_board.html.haml @@ -25,6 +25,8 @@ ":issue-link-base" => "'#{namespace_project_issues_path(@project.namespace, @project)}'" } .board-list-loading.text-center{ "v-if" => "loading" } = icon("spinner spin") - %ul.board-list{ "v-el:list" => true, ":data-board" => "boardId" } + %ul.board-list{ "v-el:list" => true, + "v-show" => "!loading", + ":data-board" => "boardId" } = render "projects/boards/components/card" = render "projects/boards/components/blank_state" diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml index 707559122ef..043a046701d 100644 --- a/app/views/projects/boards/components/_card.html.haml +++ b/app/views/projects/boards/components/_card.html.haml @@ -9,4 +9,4 @@ %span.label.color-label{ "v-for" => "label in issue.labels", ":style" => "{ backgroundColor: label.color, color: label.textColor }" } {{ label.title }} %a{ ":href" => "'/u/' + issue.assignee.username", ":title" => "issue.assignee.name", "v-if" => "issue.assignee" } - %img.card-avatar{ ":src" => "issue.assignee.avatar", width: 20, height: 20 } + %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 } |