Added ability to infinite scroll issues list
This commit is contained in:
parent
9d307ee026
commit
d06e20b263
4 changed files with 44 additions and 17 deletions
|
@ -11,14 +11,19 @@
|
|||
watch: {
|
||||
'query': function () {
|
||||
if (this.board.canSearch()) {
|
||||
const data = _.extend(this.filters, { search: this.query });
|
||||
this.board.getIssues(data);
|
||||
this.board.filters = this.getFilterData();
|
||||
this.board.getIssues(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearSearch: function () {
|
||||
this.query = '';
|
||||
},
|
||||
getFilterData: function () {
|
||||
const queryData = this.board.canSearch() ? { search: this.query } : {};
|
||||
|
||||
return _.extend(this.filters, queryData);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
@ -2,16 +2,15 @@
|
|||
const BoardList = Vue.extend({
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
boardId: [Number, String],
|
||||
filters: Object,
|
||||
list: Object,
|
||||
issues: Array,
|
||||
loading: Boolean,
|
||||
issueLinkBase: String
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
scrollOffset: 20,
|
||||
loadMore: false
|
||||
scrollOffset: 250,
|
||||
loadingMore: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
@ -24,8 +23,15 @@
|
|||
scrollTop: function () {
|
||||
return this.$els.list.scrollTop + this.listHeight();
|
||||
},
|
||||
loadFromLastId: function () {
|
||||
loadNextPage: function () {
|
||||
this.loadingMore = true;
|
||||
const getIssues = this.list.nextPage();
|
||||
|
||||
if (getIssues) {
|
||||
getIssues.then(() => {
|
||||
this.loadingMore = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
ready: function () {
|
||||
|
@ -51,8 +57,8 @@
|
|||
|
||||
// Scroll event on list to load more
|
||||
this.$els.list.onscroll = () => {
|
||||
if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.loadMore) {
|
||||
this.loadFromLastId();
|
||||
if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.loadingMore) {
|
||||
this.loadNextPage();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
@ -4,6 +4,8 @@ class List {
|
|||
this.position = obj.position;
|
||||
this.title = obj.title;
|
||||
this.type = obj.list_type;
|
||||
this.filters = {};
|
||||
this.page = 1;
|
||||
this.loading = true;
|
||||
this.issues = [];
|
||||
|
||||
|
@ -39,19 +41,34 @@ class List {
|
|||
gl.boardService.updateList(this);
|
||||
}
|
||||
|
||||
nextPage () {
|
||||
if (this.issues.length / 20 === this.page) {
|
||||
this.page++;
|
||||
|
||||
return this.getIssues(false);
|
||||
}
|
||||
}
|
||||
|
||||
canSearch () {
|
||||
return this.type === 'backlog';
|
||||
}
|
||||
|
||||
getIssues (filter = {}) {
|
||||
this.loading = true;
|
||||
getIssues (emptyIssues = true) {
|
||||
const data = _.extend({ page: this.page }, this.filters);
|
||||
|
||||
gl.boardService.getIssuesForList(this.id, filter)
|
||||
if (emptyIssues) {
|
||||
this.loading = true;
|
||||
}
|
||||
|
||||
return gl.boardService.getIssuesForList(this.id, data)
|
||||
.then((resp) => {
|
||||
const data = resp.json();
|
||||
this.loading = false;
|
||||
|
||||
this.issues = [];
|
||||
if (emptyIssues) {
|
||||
this.issues = [];
|
||||
}
|
||||
|
||||
this.createIssues(data);
|
||||
});
|
||||
}
|
||||
|
|
|
@ -15,18 +15,17 @@
|
|||
%button.board-search-clear-btn{ type: "button", role: "button", "aria-label" => "Clear search", "@click" => "clearSearch", "v-show" => "query" }
|
||||
= icon("times", class: "board-search-clear")
|
||||
%board-list{ "inline-template" => true,
|
||||
"v-if" => "board.id != 'blank'",
|
||||
":board-id" => "board.id",
|
||||
"v-if" => "board.type !== 'blank'",
|
||||
":list" => "board",
|
||||
":issues" => "board.issues",
|
||||
":disabled" => "#{current_user.nil?}",
|
||||
":filters" => "filters",
|
||||
":loading" => "board.loading",
|
||||
":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,
|
||||
"v-show" => "!loading",
|
||||
":data-board" => "boardId" }
|
||||
":data-board" => "list.id" }
|
||||
= render "projects/boards/components/card"
|
||||
- if current_user
|
||||
= render "projects/boards/components/blank_state"
|
||||
|
|
Loading…
Reference in a new issue