diff options
author | Phil Hughes <me@iamphill.com> | 2017-01-25 13:54:45 +0000 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-02-03 17:02:43 +0300 |
commit | acd86c120f012b38108971ec466c6c141405f1d1 (patch) | |
tree | fcdb94edff8d99286eb53a2c469c866b5942c06e /app | |
parent | 38d84c1396b5264ba171df109c873469d371be73 (diff) | |
download | gitlab-ce-acd86c120f012b38108971ec466c6c141405f1d1.tar.gz |
Search bar now returns data
Selected data is added into a different array
Diffstat (limited to 'app')
7 files changed, 72 insertions, 35 deletions
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6 index 978900c866a..cacc8d69a3c 100644 --- a/app/assets/javascripts/boards/components/modal/footer.js.es6 +++ b/app/assets/javascripts/boards/components/modal/footer.js.es6 @@ -28,7 +28,7 @@ }, addIssues() { const list = this.store.selectedList; - const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id); + const issueIds = this.store.selectedIssues.map(issue => issue.id); // Post the data to the backend gl.boardService.addMultipleIssues(list, issueIds); diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6 index f4c722c0974..a89b2bbc515 100644 --- a/app/assets/javascripts/boards/components/modal/header.js.es6 +++ b/app/assets/javascripts/boards/components/modal/header.js.es6 @@ -25,8 +25,8 @@ <modal-dismiss></modal-dismiss> </h2> </header> - <modal-tabs v-if="issues.length"></modal-tabs> - <modal-search v-if="issues.length"></modal-search> + <modal-tabs v-if="!loading"></modal-tabs> + <modal-search v-if="!loading"></modal-search> </div> `, }); diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6 index e2056f1ada3..3520c49699a 100644 --- a/app/assets/javascripts/boards/components/modal/list.js.es6 +++ b/app/assets/javascripts/boards/components/modal/list.js.es6 @@ -22,9 +22,7 @@ issues: { handler() { this.$nextTick(() => { - if (this.activeTab === 'selected') { - listMasonry.layout(); - } + listMasonry.layout(); }); }, deep: true, @@ -37,12 +35,26 @@ selectedCount() { return Store.modalSelectedCount(); }, + loopIssues() { + if (this.activeTab === 'all') { + return this.issues; + } + + return this.selectedIssues; + }, }, methods: { toggleIssue(issueObj) { const issue = issueObj; - issue.selected = !issue.selected; + + if (issue.selected) { + this.selectedIssues.push(issue); + } else { + // Remove this issue + const index = this.selectedIssues.indexOf(issue); + this.selectedIssues.splice(index, 1); + } }, showIssue(issue) { if (this.activeTab === 'all') return true; @@ -64,7 +76,6 @@ this.initMasonry(); }, destroyed() { - this.issues = []; this.destroyMasonry(); }, components: { @@ -77,7 +88,7 @@ ref="list" v-show="!loading"> <div - v-for="issue in issues" + v-for="issue in loopIssues" v-if="showIssue(issue)" class="card-parent"> <div diff --git a/app/assets/javascripts/boards/components/modal/modal.es6 b/app/assets/javascripts/boards/components/modal/modal.es6 index 7a15beb10f0..8d593459935 100644 --- a/app/assets/javascripts/boards/components/modal/modal.es6 +++ b/app/assets/javascripts/boards/components/modal/modal.es6 @@ -12,15 +12,40 @@ data() { return Store.modal; }, + watch: { + searchTerm() { + this.searchOperation(); + }, + }, mounted() { - gl.boardService.getBacklog() - .then((res) => { + this.loading = true; + + this.loadIssues() + .then(() => { + this.loading = false; + }); + }, + methods: { + searchOperation: _.debounce(function() { + this.loadIssues(); + }, 500), + loadIssues() { + return gl.boardService.getBacklog({ + search: this.searchTerm, + }).then((res) => { const data = res.json(); + this.issues = []; data.forEach((issueObj) => { - this.issues.push(new ListIssue(issueObj)); + const issue = new ListIssue(issueObj); + const foundSelectedIssue = this.selectedIssues + .filter(filteredIssue => filteredIssue.id === issue.id)[0]; + issue.selected = foundSelectedIssue !== undefined; + + this.issues.push(issue); }); }); + }, }, components: { 'modal-header': gl.issueBoards.IssuesModalHeader, @@ -33,10 +58,10 @@ v-if="showAddIssuesModal"> <div class="add-issues-container"> <modal-header></modal-header> - <modal-list v-if="issues.length"></modal-list> + <modal-list v-if="!loading"></modal-list> <section class="add-issues-list" - v-if="issues.length == 0"> + v-if="loading"> <div class="add-issues-list-loading"> <i class="fa fa-spinner fa-spin"></i> </div> diff --git a/app/assets/javascripts/boards/components/modal/search.js.es6 b/app/assets/javascripts/boards/components/modal/search.js.es6 index 59aeb17baa5..8c3814740f1 100644 --- a/app/assets/javascripts/boards/components/modal/search.js.es6 +++ b/app/assets/javascripts/boards/components/modal/search.js.es6 @@ -24,7 +24,17 @@ this.issues.forEach((issue) => { const issueUpdate = issue; - issueUpdate.selected = select; + + if (issueUpdate.selected !== select) { + issueUpdate.selected = select; + + if (select) { + this.selectedIssues.push(issueUpdate); + } else { + const index = this.selectedIssues.indexOf(issue); + this.selectedIssues.splice(index, 1); + } + } }); }, }, @@ -35,7 +45,8 @@ <input placeholder="Search issues..." class="form-control" - type="search" /> + type="search" + v-model="searchTerm" /> <button type="button" class="btn btn-success btn-inverted" diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6 index 335950caf10..c8db107d890 100644 --- a/app/assets/javascripts/boards/services/board_service.js.es6 +++ b/app/assets/javascripts/boards/services/board_service.js.es6 @@ -76,8 +76,8 @@ class BoardService { }); } - getBacklog() { - return this.boards.backlog(); + getBacklog(data) { + return this.boards.backlog(data); } addMultipleIssues(list, issue_ids) { diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6 index fa0224beee5..d29731ad0aa 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js.es6 +++ b/app/assets/javascripts/boards/stores/boards_store.js.es6 @@ -14,9 +14,12 @@ }, modal: { issues: [], + selectedIssues: [], showAddIssuesModal: false, activeTab: 'all', - selectedList: {} + selectedList: {}, + searchTerm: '', + loading: false, }, moving: { issue: {}, @@ -40,15 +43,10 @@ }, new (listObj) { const list = this.addList(listObj); - const backlogList = this.findList('type', 'backlog', 'backlog'); list .save() .then(() => { - // Remove any new issues from the backlog - // as they will be visible in the new list - list.issues.forEach(backlogList.removeIssue.bind(backlogList)); - this.state.lists = _.sortBy(this.state.lists, 'position'); }); this.removeBlankState(); @@ -58,7 +56,7 @@ }, shouldAddBlankState () { // Decide whether to add the blank state - return !(this.state.lists.filter(list => list.type !== 'backlog' && list.type !== 'done')[0]); + return !(this.state.lists.filter(list => list.type !== 'done')[0]); }, addBlankState () { if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return; @@ -108,7 +106,7 @@ listTo.addIssue(issue, listFrom, newIndex); } - if (listTo.type === 'done' && listFrom.type !== 'backlog') { + if (listTo.type === 'done') { issueLists.forEach((list) => { list.removeIssue(issue); }); @@ -128,15 +126,7 @@ history.pushState(null, null, `?${$.param(this.state.filters)}`); }, modalSelectedCount() { - let count = 0; - - this.modal.issues.forEach((issue) => { - if (issue.selected) { - count += 1; - } - }); - - return count; + return this.modal.selectedIssues.length; }, }; })(); |