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

@@ -10,6 +10,7 @@ export interface IBucket extends IAbstract {
 	tasks: ITask[]
 	isDoneBucket: boolean
 	position: number
+	count: number
 	
 	createdBy: IUser
 	created: Date

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

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,

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