Commit d06e20b2 authored by Phil Hughes's avatar Phil Hughes

Added ability to infinite scroll issues list

parent 9d307ee0
......@@ -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 = {}) {
getIssues (emptyIssues = true) {
const data = _.extend({ page: this.page }, this.filters);
if (emptyIssues) {
this.loading = true;
}
gl.boardService.getIssuesForList(this.id, filter)
return gl.boardService.getIssuesForList(this.id, data)
.then((resp) => {
const data = resp.json();
this.loading = false;
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"
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