Infinite scrolling

3 files changed, 31 insertions, 5 deletions

diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 9cab701bb5d..eedfd826787 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -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;
         });
       },
     },
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 4ef40f851d4..a0b91e6f16a 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -14,10 +14,8 @@
         this.initMasonry();
       },
       issues: {
-        handler(issues, oldIssues) {
-          if (this.activeTab === 'selected' || issues.length !== oldIssues.length) {
-            this.initMasonry();
-          }
+        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();
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 54419751433..2d8da482e5f 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -12,6 +12,9 @@
         selectedList: {},
         searchTerm: '',
         loading: false,
+        loadingNewPage: false,
+        page: 1,
+        perPage: 50,
       };
     }