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

Infinite scrolling

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