diff options
author | Fatih Acet <acetfatih@gmail.com> | 2016-09-01 21:32:44 +0000 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2016-09-01 21:32:44 +0000 |
commit | f90c6a24b469cb1fe939f6e8fba5a835c62e477f (patch) | |
tree | fc18fca95d1802235b3d8e621bd5d094e402cc01 /app/assets | |
parent | 2038e86772b3a7a02df5b01e454400e7d9314312 (diff) | |
parent | 25c84fd629e72acc753b920a35eb3cfe1cf93035 (diff) | |
download | gitlab-ce-f90c6a24b469cb1fe939f6e8fba5a835c62e477f.tar.gz |
Merge branch 'issue-boards-issues-total-count' into 'master'
Add the total number of issues in the JSON response in issue board lists
## What does this MR do?
Add the total number of issues in the JSON response in issue board lists
## Why was this MR needed?
The issue board lists should always show the total number of issues in the list, not the current amount fetched by endless scroll.
Closes #21327
See merge request !5904
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/boards/components/board_list.js.es6 | 13 | ||||
-rw-r--r-- | app/assets/javascripts/boards/models/list.js.es6 | 25 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 15 |
3 files changed, 39 insertions, 14 deletions
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6 index a6644e9eb8c..50fc11d7737 100644 --- a/app/assets/javascripts/boards/components/board_list.js.es6 +++ b/app/assets/javascripts/boards/components/board_list.js.es6 @@ -20,7 +20,8 @@ data () { return { scrollOffset: 250, - filters: Store.state.filters + filters: Store.state.filters, + showCount: false }; }, watch: { @@ -30,6 +31,15 @@ this.$els.list.scrollTop = 0; }, deep: true + }, + issues () { + this.$nextTick(() => { + if (this.scrollHeight() > this.listHeight()) { + this.showCount = true; + } else { + this.showCount = false; + } + }); } }, methods: { @@ -58,6 +68,7 @@ group: 'issues', sort: false, disabled: this.disabled, + filter: '.board-list-count', onStart: (e) => { const card = this.$refs.issue[e.oldIndex]; diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6 index 816fa49516c..91fd620fdb3 100644 --- a/app/assets/javascripts/boards/models/list.js.es6 +++ b/app/assets/javascripts/boards/models/list.js.es6 @@ -11,6 +11,7 @@ class List { this.loading = true; this.loadingMore = false; this.issues = []; + this.issuesSize = 0; if (obj.label) { this.label = new ListLabel(obj.label); @@ -51,7 +52,7 @@ class List { } nextPage () { - if (Math.floor(this.issues.length / 20) === this.page) { + if (this.issuesSize > this.issues.length) { this.page++; return this.getIssues(false); @@ -76,12 +77,13 @@ class List { .then((resp) => { const data = resp.json(); this.loading = false; + this.issuesSize = data.size; if (emptyIssues) { this.issues = []; } - this.createIssues(data); + this.createIssues(data.issues); }); } @@ -92,14 +94,20 @@ class List { } addIssue (issue, listFrom) { - this.issues.push(issue); + if (!this.findIssue(issue.id)) { + this.issues.push(issue); - if (this.label) { - issue.addLabel(this.label); - } + if (this.label) { + issue.addLabel(this.label); + } - if (listFrom) { - gl.boardService.moveIssue(issue.id, listFrom.id, this.id); + if (listFrom) { + this.issuesSize++; + gl.boardService.moveIssue(issue.id, listFrom.id, this.id) + .then(() => { + listFrom.getIssues(false); + }); + } } } @@ -112,6 +120,7 @@ class List { const matchesRemove = removeIssue.id === issue.id; if (matchesRemove) { + this.issuesSize--; issue.removeLabel(this.label); } diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index d91558bc672..037278bb083 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -142,11 +142,6 @@ } } -.board-header-loading-spinner { - margin-right: 10px; - color: $gray-darkest; -} - .board-inner-container { border-bottom: 1px solid $border-color; padding: $gl-padding; @@ -279,3 +274,13 @@ width: 210px; } } + +.board-list-count { + padding: 10px 0; + color: $gl-placeholder-color; + font-size: 13px; + + > .fa { + margin-right: 5px; + } +} |