From ad27f588a28a4a54fbce586f9041a4ceee8a27dd Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 8 Jun 2023 16:57:58 +0200
Subject: [PATCH] feat(kanban): use total task count from the api instead of
 manually calculating it per bucket

This fixes an ux issue where the total count would show a wrong number of total tasks because that was the number of tasks which were loaded at the time. In combination with bucket limits, this caused error messages when the user would attempt to drag tasks into a bucket which appeared not full but was.
---
 src/modelTypes/IBucket.ts           |  1 +
 src/models/bucket.ts                |  1 +
 src/stores/kanban.ts                |  1 +
 src/views/project/ProjectKanban.vue | 19 ++++++++++++++++---
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/modelTypes/IBucket.ts b/src/modelTypes/IBucket.ts
index 73a3d8a1b..196628dcc 100644
--- a/src/modelTypes/IBucket.ts
+++ b/src/modelTypes/IBucket.ts
@@ -10,6 +10,7 @@ export interface IBucket extends IAbstract {
 	tasks: ITask[]
 	isDoneBucket: boolean
 	position: number
+	count: number
 	
 	createdBy: IUser
 	created: Date
diff --git a/src/models/bucket.ts b/src/models/bucket.ts
index 7c5241ca3..183736d7e 100644
--- a/src/models/bucket.ts
+++ b/src/models/bucket.ts
@@ -14,6 +14,7 @@ export default class BucketModel extends AbstractModel<IBucket> implements IBuck
 	tasks: ITask[] = []
 	isDoneBucket = false
 	position = 0
+	count = 0
 	
 	createdBy: IUser = null
 	created: Date = null
diff --git a/src/stores/kanban.ts b/src/stores/kanban.ts
index 4735fd2eb..39d60dff0 100644
--- a/src/stores/kanban.ts
+++ b/src/stores/kanban.ts
@@ -167,6 +167,7 @@ export const useKanbanStore = defineStore('kanban', () => {
 		const oldBucket = buckets.value[bucketIndex]
 		const newBucket = {
 			...oldBucket,
+			count: oldBucket.count + 1,
 			tasks: [
 				...oldBucket.tasks,
 				task,
diff --git a/src/views/project/ProjectKanban.vue b/src/views/project/ProjectKanban.vue
index c5af1bd37..5551f795d 100644
--- a/src/views/project/ProjectKanban.vue
+++ b/src/views/project/ProjectKanban.vue
@@ -52,10 +52,10 @@
 								:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? true : undefined"
 								:spellcheck="false">{{ bucket.title }}</h2>
 							<span
-								:class="{'is-max': bucket.tasks.length >= bucket.limit}"
+								:class="{'is-max': bucket.count >= bucket.limit}"
 								class="limit"
 								v-if="bucket.limit > 0">
-								{{ bucket.tasks.length }}/{{ bucket.limit }}
+								{{ bucket.count }}/{{ bucket.limit }}
 							</span>
 							<dropdown
 								class="is-right options"
@@ -433,6 +433,19 @@ async function updateTaskPosition(e) {
 	) {
 		newTask.done = newBucket.isDoneBucket
 	}
+	if (
+		oldBucket !== undefined && // This shouldn't actually be `undefined`, but let's play it safe.
+		newBucket.id !== oldBucket.id
+	) {
+		kanbanStore.setBucketById({
+			...oldBucket,
+			count: oldBucket.count - 1,
+		})
+		kanbanStore.setBucketById({
+			...newBucket,
+			count: newBucket.count + 1,
+		})
+	}
 
 	try {
 		await taskStore.update(newTask)
@@ -580,7 +593,7 @@ function shouldAcceptDrop(bucket: IBucket) {
 		// If there is no limit set, dragging & dropping should always work
 		bucket.limit === 0 ||
 		// Disallow dropping to buckets which have their limit reached
-		bucket.tasks.length < bucket.limit
+		bucket.count < bucket.limit
 	)
 }