Infinite scrolling

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;
         });
       },
     },

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();

app/assets/javascripts/boards/stores/modal_store.js.es6

@@ -12,6 +12,9 @@
         selectedList: {},
         searchTerm: '',
         loading: false,
+        loadingNewPage: false,
+        page: 1,
+        perPage: 50,
       };
     }

app/assets/stylesheets/pages/boards.scss

@@ -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 {

app/controllers/projects/boards_controller.rb

@@ -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,