Add basic pagination

src/store/modules/kanban.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import BucketService from '../../services/bucket'
 import {filterObject} from '@/helpers/filterObject'
 import {setLoading} from '../helper'
+import TaskCollectionService from '@/services/taskCollection'
 
 /**
  * This store is intended to hold the currently active kanban view.
@@ -13,6 +14,9 @@ export default {
 	state: () => ({
 		buckets: [],
 		listId: 0,
+		bucketLoading: {},
+		taskPagesPerBucket: {},
+		allTasksLoadedForBucket: {},
 	}),
 	mutations: {
 		setListId(state, listId) {
@@ -71,6 +75,13 @@ export default {
 			const bi = filterObject(state.buckets, b => b.id === task.bucketId)
 			state.buckets[bi].tasks.push(task)
 		},
+		addTasksToBucket(state, {tasks, bucketId}) {
+			const bi = filterObject(state.buckets, b => b.id === bucketId)
+
+			tasks.forEach(t => {
+				state.buckets[bi].tasks.push(t)
+			})
+		},
 		removeTaskInBucket(state, task) {
 			// If this gets invoked without any tasks actually loaded, we can save the hassle of finding the task
 			if (state.buckets.length === 0) {
@@ -91,6 +102,15 @@ export default {
 				}
 			}
 		},
+		setBucketLoading(state, {bucketId, loading}) {
+			Vue.set(state.bucketLoading, bucketId, loading)
+		},
+		setTasksLoadedForBucketPage(state, {bucketId, page}) {
+			Vue.set(state.taskPagesPerBucket, bucketId, page)
+		},
+		setAllTasksLoadedForBucket(state, bucketId) {
+			Vue.set(state.allTasksLoadedForBucket, bucketId, true)
+		},
 	},
 	getters: {
 		getTaskById: state => id => {
@@ -133,6 +153,57 @@ export default {
 					cancel()
 				})
 		},
+		loadNextTasksForBucket(ctx, {listId, params = {}, bucketId}) {
+			const isLoading = ctx.state.bucketLoading[bucketId] ?? false
+			if (isLoading) {
+				return Promise.resolve()
+			}
+
+			const page = (ctx.state.taskPagesPerBucket[bucketId] ?? 1) + 1
+
+			const alreadyLoaded = ctx.state.allTasksLoadedForBucket[bucketId] ?? false
+			if (alreadyLoaded) {
+				return Promise.resolve()
+			}
+
+			const cancel = setLoading(ctx, 'kanban')
+			ctx.commit('setBucketLoading', {bucketId: bucketId, loading: true})
+
+			let hasBucketFilter = false
+			for (const f in params.filter_by) {
+				if (params.filter_by[f] === 'bucket_id') {
+					hasBucketFilter = true
+					if (params.filter_value[f] !== bucketId) {
+						params.filter_value[f] = bucketId
+					}
+					break
+				}
+			}
+
+			if (!hasBucketFilter) {
+				params.filter_by = [...(params.filter_by ?? []), 'bucket_id']
+				params.filter_value = [...(params.filter_value ?? []), bucketId]
+				params.filter_comparator = [...(params.filter_comparator ?? []), 'equals']
+			}
+
+			const taskService = new TaskCollectionService()
+			return taskService.getAll({listId: listId}, params, page)
+				.then(r => {
+					ctx.commit('addTasksToBucket', {tasks: r, bucketId: bucketId})
+					ctx.commit('setTasksLoadedForBucketPage', {bucketId, page})
+					if (taskService.totalPages <= page) {
+						ctx.commit('setAllTasksLoadedForBucket', bucketId)
+					}
+					return Promise.resolve(r)
+				})
+				.catch(e => {
+					return Promise.reject(e)
+				})
+				.finally(() => {
+					cancel()
+					ctx.commit('setBucketLoading', {bucketId: bucketId, loading: false})
+				})
+		},
 		createBucket(ctx, bucket) {
 			const cancel = setLoading(ctx, 'kanban')
 

src/views/list/views/Kanban.vue

@@ -352,7 +352,26 @@ export default {
 			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
 			this.filtersChanged = false
 
+			const minScrollHeightPercent = 0.25
+
 			this.$store.dispatch('kanban/loadBucketsForList', {listId: this.$route.params.listId, params: this.params})
+				.then(bs => {
+					bs.forEach(b => {
+						const e = this.$refs[`tasks-container${b.id}`][0]
+						e.onscroll = () => {
+							if (e.scrollTopMax <= e.scrollTop + e.scrollTop * minScrollHeightPercent) {
+								this.$store.dispatch('kanban/loadNextTasksForBucket', {
+									listId: this.$route.params.listId,
+									params: this.params,
+									bucketId: b.id,
+								})
+									.catch(e => {
+										this.error(e, this)
+									})
+							}
+						}
+					})
+				})
 				.catch(e => {
 					this.error(e, this)
 				})
@@ -423,7 +442,7 @@ export default {
 			task.done = !task.done
 			this.$store.dispatch('tasks/update', task)
 				.then(() => {
-					if(task.done) {
+					if (task.done) {
 						playPop()
 					}
 				})