Commit d06e20b2 authored by Phil Hughes's avatar Phil Hughes

Added ability to infinite scroll issues list

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