Commit 38d84c13 authored by Phil Hughes's avatar Phil Hughes Committed by Fatih Acet

Changed where data gets loaded

Changed what is hidden when data is loading
parent 97fbb3d1
...@@ -10,13 +10,10 @@ ...@@ -10,13 +10,10 @@
data() { data() {
return { return {
store: Store.modal, store: Store.modal,
disabled: false,
}; };
}, },
computed: { computed: {
submitDisabled() { submitDisabled() {
if (this.disabled) return true;
return !Store.modalSelectedCount(); return !Store.modalSelectedCount();
}, },
submitText() { submitText() {
...@@ -30,15 +27,19 @@ ...@@ -30,15 +27,19 @@
this.store.showAddIssuesModal = false; this.store.showAddIssuesModal = false;
}, },
addIssues() { addIssues() {
const list = this.store.selectedList;
const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id); const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id);
// Post the data to the backend
gl.boardService.addMultipleIssues(list, issueIds);
// Add the issues on the frontend
issueIds.forEach((id) => { issueIds.forEach((id) => {
const issue = this.store.issues.filter(issue => issue.id == id)[0]; const issue = this.store.issues.filter(issue => issue.id == id)[0];
this.store.selectedList.addIssue(issue); list.addIssue(issue);
this.store.selectedList.issuesSize += 1; list.issuesSize += 1;
}); });
this.disabled = true;
this.hideModal(); this.hideModal();
}, },
}, },
......
...@@ -18,14 +18,16 @@ ...@@ -18,14 +18,16 @@
'modal-search': gl.issueBoards.ModalSearch, 'modal-search': gl.issueBoards.ModalSearch,
}, },
template: ` template: `
<header class="add-issues-header"> <div>
<header class="add-issues-header form-actions">
<h2> <h2>
Add issues to board Add issues
<modal-dismiss></modal-dismiss> <modal-dismiss></modal-dismiss>
</h2> </h2>
<modal-tabs></modal-tabs>
<modal-search></modal-search>
</header> </header>
<modal-tabs v-if="issues.length"></modal-tabs>
<modal-search v-if="issues.length"></modal-search>
</div>
`, `,
}); });
})(); })();
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
}, },
issues: { issues: {
handler() { handler() {
if (this.activeTab === 'selected') {
this.$nextTick(() => { this.$nextTick(() => {
if (this.activeTab === 'selected') {
listMasonry.layout(); listMasonry.layout();
});
} }
});
}, },
deep: true, deep: true,
} }
...@@ -61,18 +61,7 @@ ...@@ -61,18 +61,7 @@
}, },
}, },
mounted() { mounted() {
gl.boardService.getBacklog()
.then((res) => {
const data = res.json();
data.forEach((issueObj) => {
this.issues.push(new ListIssue(issueObj));
});
this.$nextTick(() => {
this.initMasonry(); this.initMasonry();
});
});
}, },
destroyed() { destroyed() {
this.issues = []; this.issues = [];
...@@ -83,11 +72,6 @@ ...@@ -83,11 +72,6 @@
}, },
template: ` template: `
<section class="add-issues-list"> <section class="add-issues-list">
<div
class="add-issues-list-loading"
v-if="loading">
<i class="fa fa-spinner fa-spin"></i>
</div>
<div <div
class="add-issues-list-columns list-unstyled" class="add-issues-list-columns list-unstyled"
ref="list" ref="list"
...@@ -112,11 +96,6 @@ ...@@ -112,11 +96,6 @@
</div> </div>
</div> </div>
</div> </div>
<p
class="all-issues-selected-empty"
v-if="activeTab == 'selected' && selectedCount == 0">
You don't have any issues selected, <a href="#" @click="activeTab = 'all'">select some</a>.
</p>
</section> </section>
`, `,
}); });
......
...@@ -12,6 +12,16 @@ ...@@ -12,6 +12,16 @@
data() { data() {
return Store.modal; return Store.modal;
}, },
mounted() {
gl.boardService.getBacklog()
.then((res) => {
const data = res.json();
data.forEach((issueObj) => {
this.issues.push(new ListIssue(issueObj));
});
});
},
components: { components: {
'modal-header': gl.issueBoards.IssuesModalHeader, 'modal-header': gl.issueBoards.IssuesModalHeader,
'modal-list': gl.issueBoards.ModalList, 'modal-list': gl.issueBoards.ModalList,
...@@ -23,7 +33,14 @@ ...@@ -23,7 +33,14 @@
v-if="showAddIssuesModal"> v-if="showAddIssuesModal">
<div class="add-issues-container"> <div class="add-issues-container">
<modal-header></modal-header> <modal-header></modal-header>
<modal-list></modal-list> <modal-list v-if="issues.length"></modal-list>
<section
class="add-issues-list"
v-if="issues.length == 0">
<div class="add-issues-list-loading">
<i class="fa fa-spinner fa-spin"></i>
</div>
</section>
<modal-footer></modal-footer> <modal-footer></modal-footer>
</div> </div>
</div> </div>
......
...@@ -13,7 +13,11 @@ class BoardService { ...@@ -13,7 +13,11 @@ class BoardService {
generate: { generate: {
method: 'POST', method: 'POST',
url: `${root}/${boardId}/lists/generate.json` url: `${root}/${boardId}/lists/generate.json`
} },
multiple: {
method: 'POST',
url: `${root}/${boardId}/lists{/id}/multiple`
},
}); });
this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {}); this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {}); this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
...@@ -75,6 +79,12 @@ class BoardService { ...@@ -75,6 +79,12 @@ class BoardService {
getBacklog() { getBacklog() {
return this.boards.backlog(); return this.boards.backlog();
} }
addMultipleIssues(list, issue_ids) {
return this.lists.multiple(list.id, {
issue_ids,
});
}
} }
window.BoardService = BoardService; window.BoardService = BoardService;
...@@ -383,6 +383,10 @@ ...@@ -383,6 +383,10 @@
} }
.add-issues-header { .add-issues-header {
margin: -25px -15px -5px;
border-top: 0;
border-bottom: 1px solid $border-color;
> h2 { > h2 {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
...@@ -396,6 +400,7 @@ ...@@ -396,6 +400,7 @@
.add-issues-search { .add-issues-search {
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 10px;
.btn { .btn {
margin-left: 10px; margin-left: 10px;
......
...@@ -50,6 +50,10 @@ module Projects ...@@ -50,6 +50,10 @@ module Projects
end end
end end
def multiple
head :ok
end
private private
def authorize_admin_list! def authorize_admin_list!
......
...@@ -33,7 +33,7 @@ class Projects::BoardsController < Projects::ApplicationController ...@@ -33,7 +33,7 @@ class Projects::BoardsController < Projects::ApplicationController
LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id") LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
.where(label_id: board.lists.movable.pluck(:label_id)).limit(1).arel.exists .where(label_id: board.lists.movable.pluck(:label_id)).limit(1).arel.exists
) )
@issues = @issues.page(params[:page]) @issues = @issues.page(params[:page]).per(50)
render json: @issues.as_json( render json: @issues.as_json(
labels: true, labels: true,
......
...@@ -274,6 +274,7 @@ constraints(ProjectUrlConstrainer.new) do ...@@ -274,6 +274,7 @@ constraints(ProjectUrlConstrainer.new) do
resources :lists, only: [:index, :create, :update, :destroy] do resources :lists, only: [:index, :create, :update, :destroy] do
collection do collection do
post :generate post :generate
post :multiple
end end
resources :issues, only: [:index, :create] resources :issues, only: [:index, :create]
......
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