diff options
author | Phil Hughes <me@iamphill.com> | 2017-01-27 11:58:43 +0000 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-02-03 17:02:43 +0300 |
commit | 0904e9b107ce78fed80830e00b8fc3621cb98f8f (patch) | |
tree | 0f24f8d87b40056d09f2d0f1edaf41051fc11a04 | |
parent | ac7949db174210a84fd4d2af43652559f56dbdb9 (diff) | |
download | gitlab-ce-0904e9b107ce78fed80830e00b8fc3621cb98f8f.tar.gz |
Infinite scrolling
5 files changed, 37 insertions, 6 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, }; } diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 04e7aea63fd..d3911ae233a 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/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 { diff --git a/app/controllers/projects/boards_controller.rb b/app/controllers/projects/boards_controller.rb index ba9d0eaa265..1eaa2ffdf29 100644 --- a/app/controllers/projects/boards_controller.rb +++ b/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, |