Added ability to infinite scroll issues list

4 files changed, 44 insertions, 17 deletions

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