Commit 0904e9b1 authored by Phil Hughes's avatar Phil Hughes Committed by Fatih Acet

Infinite scrolling

parent ac7949db
......@@ -15,6 +15,9 @@
return ModalStore.store;
},
watch: {
page() {
this.loadIssues();
},
searchTerm() {
this.searchOperation();
},
......@@ -34,15 +37,17 @@
},
methods: {
searchOperation: _.debounce(function searchOperationDebounce() {
this.issues = [];
this.loadIssues();
}, 500),
loadIssues() {
return gl.boardService.getBacklog({
search: this.searchTerm,
page: this.page,
per: this.perPage,
}).then((res) => {
const data = res.json();
this.issues = [];
data.forEach((issueObj) => {
const issue = new ListIssue(issueObj);
const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
......@@ -50,6 +55,8 @@
this.issues.push(issue);
});
this.loadingNewPage = false;
});
},
},
......
......@@ -14,10 +14,8 @@
this.initMasonry();
},
issues: {
handler(issues, oldIssues) {
if (this.activeTab === 'selected' || issues.length !== oldIssues.length) {
handler() {
this.initMasonry();
}
},
deep: true,
},
......@@ -33,6 +31,15 @@
},
methods: {
toggleIssue: ModalStore.toggleIssue.bind(ModalStore),
listHeight () {
return this.$refs.list.getBoundingClientRect().height;
},
scrollHeight () {
return this.$refs.list.scrollHeight;
},
scrollTop () {
return this.$refs.list.scrollTop + this.listHeight();
},
showIssue(issue) {
if (this.activeTab === 'all') return true;
......@@ -59,6 +66,15 @@
},
mounted() {
this.initMasonry();
this.$refs.list.onscroll = () => {
const currentPage = Math.floor(this.issues.length / this.perPage);
if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage && currentPage === this.page) {
this.loadingNewPage = true;
this.page += 1;
}
};
},
destroyed() {
this.destroyMasonry();
......
......@@ -12,6 +12,9 @@
selectedList: {},
searchTerm: '',
loading: false,
loadingNewPage: false,
page: 1,
perPage: 50,
};
}
......
......@@ -372,6 +372,7 @@
flex-direction: column;
width: 90vw;
height: 85vh;
max-width: 1100px;
min-height: 500px;
margin: auto;
padding: 25px 15px 0;
......@@ -396,6 +397,8 @@
margin: -25px -15px -5px;
border-top: 0;
border-bottom: 1px solid $border-color;
border-top-right-radius: $border-radius-default;
border-top-left-radius: $border-radius-default;
> h2 {
margin: 0;
......@@ -448,6 +451,8 @@
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
border-bottom-right-radius: $border-radius-default;
border-bottom-left-radius: $border-radius-default;
}
.add-issues-footer-to-list {
......
......@@ -33,7 +33,7 @@ class Projects::BoardsController < Projects::ApplicationController
LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
.where(label_id: board.lists.movable.pluck(:label_id)).limit(1).arel.exists
)
@issues = @issues.page(params[:page]).per(50)
@issues = @issues.page(params[:page]).per(params[:per])
render json: @issues.as_json(
labels: true,
......
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