feat: kanban store with composition api

src/stores/kanban.ts

@@ -1,3 +1,4 @@
+import {computed, readonly, ref} from 'vue'
 import {defineStore, acceptHMRUpdate} from 'pinia'
 import cloneDeep from 'lodash.clonedeep'
 
@@ -16,9 +17,9 @@ import type { IBucket } from '@/modelTypes/IBucket'
 
 const TASKS_PER_BUCKET = 25
 
-function getTaskIndicesById(state: KanbanState, taskId: ITask['id']) {
+function getTaskIndicesById(buckets: IBucket[], taskId: ITask['id']) {
 	let taskIndex
-	const bucketIndex = state.buckets.findIndex(({ tasks }) => {
+	const bucketIndex = buckets.findIndex(({ tasks }) => {
 		taskIndex = findIndexById(tasks, taskId)
 		return taskIndex !== -1
 	})
@@ -29,104 +30,81 @@ function getTaskIndicesById(state: KanbanState, taskId: ITask['id']) {
 	}	
 }
 
-const addTaskToBucketAndSort = (state: KanbanState, task: ITask) => {
-	const bucketIndex = findIndexById(state.buckets, task.bucketId)
-	if(typeof state.buckets[bucketIndex] === 'undefined') {
+const addTaskToBucketAndSort = (buckets: IBucket[], task: ITask) => {
+	const bucketIndex = findIndexById(buckets, task.bucketId)
+	if(typeof buckets[bucketIndex] === 'undefined') {
 		return
 	}
-	state.buckets[bucketIndex].tasks.push(task)
-	state.buckets[bucketIndex].tasks.sort((a, b) => a.kanbanPosition > b.kanbanPosition ? 1 : -1)
-}
-
-export interface KanbanState {
-	buckets: IBucket[],
-	listId: IList['id'],
-	bucketLoading: {
-		[id: IBucket['id']]: boolean
-	},
-	taskPagesPerBucket: {
-		[id: IBucket['id']]: number
-	},
-	allTasksLoadedForBucket: {
-		[id: IBucket['id']]: boolean
-	},
-	isLoading: boolean,
+	buckets[bucketIndex].tasks.push(task)
+	buckets[bucketIndex].tasks.sort((a, b) => a.kanbanPosition > b.kanbanPosition ? 1 : -1)
 }
 
 /**
  * This store is intended to hold the currently active kanban view.
  * It should hold only the current buckets.
  */
-export const useKanbanStore = defineStore('kanban', {
-	state: () : KanbanState => ({
-		buckets: [],
-		listId: 0,
-		bucketLoading: {},
-		taskPagesPerBucket: {},
-		allTasksLoadedForBucket: {},
-		isLoading: false,
-	}),
+export const useKanbanStore = defineStore('kanban', () => {
+	const buckets = ref<IBucket[]>([])
+	const listId = ref<IList['id']>(0)
+	const bucketLoading = ref<{[id: IBucket['id']]: boolean}>({})
+	const taskPagesPerBucket = ref<{[id: IBucket['id']]: number}>({})
+	const allTasksLoadedForBucket = ref<{[id: IBucket['id']]: boolean}>({})
+	const isLoading = ref(false)
 
-	getters: {
-		getBucketById(state) {
-			return (bucketId: IBucket['id']): IBucket | undefined => findById(state.buckets, bucketId)
-		},
-
-		getTaskById(state) {
+	const getBucketById = computed(() => (bucketId: IBucket['id']): IBucket | undefined => findById(buckets.value, bucketId))
+	const getTaskById = computed(() => {
 		return (id: ITask['id']) => {
-				const { bucketIndex, taskIndex } = getTaskIndicesById(state, id)
+			const { bucketIndex, taskIndex } = getTaskIndicesById(buckets.value, id)
 			
 			return {
 				bucketIndex,
 				taskIndex,
-					task: bucketIndex !== null && taskIndex !== null && state.buckets[bucketIndex]?.tasks?.[taskIndex] || null,
+				task: bucketIndex !== null && taskIndex !== null && buckets.value[bucketIndex]?.tasks?.[taskIndex] || null,
 			}
 		}
-		},
-	},
-
-	actions: {
-		setIsLoading(isLoading: boolean) {
-			this.isLoading = isLoading
-		},
-
-		setListId(listId: IList['id']) {
-			this.listId = Number(listId)
-		},
-
-		setBuckets(buckets: IBucket[]) {
-			this.buckets = buckets
-			buckets.forEach(b => {
-				this.taskPagesPerBucket[b.id] = 1
-				this.allTasksLoadedForBucket[b.id] = false
 	})
-		},
 
-		addBucket(bucket: IBucket) {
-			this.buckets.push(bucket)
-		},
+	function setIsLoading(newIsLoading: boolean) {
+		isLoading.value = newIsLoading
+	}
 
-		removeBucket(bucket: IBucket) {
-			const bucketIndex = findIndexById(this.buckets, bucket.id)
-			this.buckets.splice(bucketIndex, 1)
-		},
+	function setListId(newListId: IList['id']) {
+		listId.value = Number(newListId)
+	}
 
-		setBucketById(bucket: IBucket) {
-			const bucketIndex = findIndexById(this.buckets, bucket.id)
-			this.buckets[bucketIndex] = bucket
-		},
+	function setBuckets(newBuckets: IBucket[]) {
+		buckets.value = newBuckets
+		newBuckets.forEach(b => {
+			taskPagesPerBucket.value[b.id] = 1
+			allTasksLoadedForBucket.value[b.id] = false
+		})
+	}
 
-		setBucketByIndex({
+	function addBucket(bucket: IBucket) {
+		buckets.value.push(bucket)
+	}
+
+	function removeBucket(newBucket: IBucket) {
+		const bucketIndex = findIndexById(buckets.value, newBucket.id)
+		buckets.value.splice(bucketIndex, 1)
+	}
+
+	function setBucketById(newBucket: IBucket) {
+		const bucketIndex = findIndexById(buckets.value, newBucket.id)
+		buckets.value[bucketIndex] = newBucket
+	}
+
+	function setBucketByIndex({
 		bucketIndex,
 		bucket,
 	} : {
 		bucketIndex: number,
 		bucket: IBucket
 	}) {
-			this.buckets[bucketIndex] = bucket
-		},
+		buckets.value[bucketIndex] = bucket
+	}
 
-		setTaskInBucketByIndex({
+	function setTaskInBucketByIndex({
 		bucketIndex,
 		taskIndex,
 		task,
@@ -135,45 +113,31 @@ export const useKanbanStore = defineStore('kanban', {
 		taskIndex: number,
 		task: ITask
 	}) {
-			const bucket = this.buckets[bucketIndex]
+		const bucket = buckets.value[bucketIndex]
 		bucket.tasks[taskIndex] = task
-			this.buckets[bucketIndex] = bucket
-		},
-
-		setTasksInBucketByBucketId({
-			bucketId,
-			tasks,
-		} : {
-			bucketId: IBucket['id'],
-			tasks: ITask[],
-		}) {
-			const bucketIndex = findIndexById(this.buckets, bucketId)
-			this.buckets[bucketIndex] = {
-				...this.buckets[bucketIndex],
-				tasks,
+		buckets.value[bucketIndex] = bucket
 	}
-		},
 
-		setTaskInBucket(task: ITask) {
+	function setTaskInBucket(task: ITask) {
 		// If this gets invoked without any tasks actually loaded, we can save the hassle of finding the task
-			if (this.buckets.length === 0) {
+		if (buckets.value.length === 0) {
 			return
 		}
 
 		let found = false
 
 		const findAndUpdate = b => {
-				for (const t in this.buckets[b].tasks) {
-					if (this.buckets[b].tasks[t].id === task.id) {
-						const bucket = this.buckets[b]
+			for (const t in buckets.value[b].tasks) {
+				if (buckets.value[b].tasks[t].id === task.id) {
+					const bucket = buckets.value[b]
 					bucket.tasks[t] = task
 
 					if (bucket.id !== task.bucketId) {
 						bucket.tasks.splice(t, 1)
-							addTaskToBucketAndSort(this, task)
+						addTaskToBucketAndSort(buckets.value, task)
 					}
 
-						this.buckets[b] = bucket
+					buckets.value[b] = bucket
 
 					found = true
 					return
@@ -181,8 +145,8 @@ export const useKanbanStore = defineStore('kanban', {
 			}
 		}
 
-			for (const b in this.buckets) {
-				if (this.buckets[b].id === task.bucketId) {
+		for (const b in buckets.value) {
+			if (buckets.value[b].id === task.bucketId) {
 				findAndUpdate(b)
 				if (found) {
 					return
@@ -190,17 +154,17 @@ export const useKanbanStore = defineStore('kanban', {
 			}
 		}
 
-			for (const b in this.buckets) {
+		for (const b in buckets.value) {
 			findAndUpdate(b)
 			if (found) {
 				return
 			}
 		}
-		},
+	}
 
-		addTaskToBucket(task: ITask) {
-			const bucketIndex = findIndexById(this.buckets, task.bucketId)
-			const oldBucket = this.buckets[bucketIndex]
+	function addTaskToBucket(task: ITask) {
+		const bucketIndex = findIndexById(buckets.value, task.bucketId)
+		const oldBucket = buckets.value[bucketIndex]
 		const newBucket = {
 			...oldBucket,
 			tasks: [
@@ -208,15 +172,15 @@ export const useKanbanStore = defineStore('kanban', {
 				task,
 			],
 		}
-			this.buckets[bucketIndex] = newBucket
-		},
+		buckets.value[bucketIndex] = newBucket
+	}
 
-		addTasksToBucket({tasks, bucketId}: {
+	function addTasksToBucket({tasks, bucketId}: {
 		tasks: ITask[];
 		bucketId: IBucket['id'];
 	}) {
-			const bucketIndex = findIndexById(this.buckets, bucketId)
-			const oldBucket = this.buckets[bucketIndex]
+		const bucketIndex = findIndexById(buckets.value, bucketId)
+		const oldBucket = buckets.value[bucketIndex]
 		const newBucket = {
 			...oldBucket,
 			tasks: [
@@ -224,79 +188,79 @@ export const useKanbanStore = defineStore('kanban', {
 				...tasks,
 			],
 		}
-			this.buckets[bucketIndex] = newBucket
-		},
+		buckets.value[bucketIndex] = newBucket
+	}
 
-		removeTaskInBucket(task: ITask) {
+	function removeTaskInBucket(task: ITask) {
 		// If this gets invoked without any tasks actually loaded, we can save the hassle of finding the task
-			if (this.buckets.length === 0) {
+		if (buckets.value.length === 0) {
 			return
 		}
 
-			const { bucketIndex, taskIndex } = getTaskIndicesById(this, task.id)
+		const { bucketIndex, taskIndex } = getTaskIndicesById(buckets.value, task.id)
 
 		if (
 			!bucketIndex || 
-				this.buckets[bucketIndex]?.id !== task.bucketId ||
+			buckets.value[bucketIndex]?.id !== task.bucketId ||
 			!taskIndex ||
-				(this.buckets[bucketIndex]?.tasks[taskIndex]?.id !== task.id)
+			(buckets.value[bucketIndex]?.tasks[taskIndex]?.id !== task.id)
 		) {
 			return
 		}
 		
-			this.buckets[bucketIndex].tasks.splice(taskIndex, 1)
-		},
+		buckets.value[bucketIndex].tasks.splice(taskIndex, 1)
+	}
 
-		setBucketLoading({bucketId, loading}: {bucketId: IBucket['id'], loading: boolean}) {
-			this.bucketLoading[bucketId] = loading
-		},
+	function setBucketLoading({bucketId, loading}: {bucketId: IBucket['id'], loading: boolean}) {
+		bucketLoading.value[bucketId] = loading
+	}
 
-		setTasksLoadedForBucketPage({bucketId, page}: {bucketId: IBucket['id'], page: number}) {
-			this.taskPagesPerBucket[bucketId] = page
-		},
+	function setTasksLoadedForBucketPage({bucketId, page}: {bucketId: IBucket['id'], page: number}) {
+		taskPagesPerBucket.value[bucketId] = page
+	}
 
-		setAllTasksLoadedForBucket(bucketId: IBucket['id']) {
-			this.allTasksLoadedForBucket[bucketId] = true
-		},
+	function setAllTasksLoadedForBucket(bucketId: IBucket['id']) {
+		allTasksLoadedForBucket.value[bucketId] = true
+	}
 
-		async loadBucketsForList({listId, params}: {listId: IList['id'], params}) {
-			const cancel = setModuleLoading(this)
+	async function loadBucketsForList({listId, params}: {listId: IList['id'], params}) {
+		const cancel = setModuleLoading(this, setIsLoading)
 
 		// Clear everything to prevent having old buckets in the list if loading the buckets from this list takes a few moments
-			this.setBuckets([])
+		setBuckets([])
 
 		const bucketService = new BucketService()
 		try {
-				const buckets = await bucketService.getAll({listId}, {
+			const newBuckets = await bucketService.getAll({listId}, {
 				...params,
 				per_page: TASKS_PER_BUCKET,
 			})
-				this.setBuckets(buckets)
-				this.setListId(listId)
-				return buckets
+			setBuckets(newBuckets)
+			setListId(listId)
+			return newBuckets
 		} finally {
 			cancel()
 		}
-		},
+	}
 
-		async loadNextTasksForBucket(
+	async function loadNextTasksForBucket(
 		{listId, ps = {}, bucketId} :
 		{listId: IList['id'], ps, bucketId: IBucket['id']},
 	) {
-			const isLoading = this.bucketLoading[bucketId] ?? false
+		const isLoading = bucketLoading.value[bucketId] ?? false
 		if (isLoading) {
 			return
 		}
 
-			const page = (this.taskPagesPerBucket[bucketId] ?? 1) + 1
+		const page = (taskPagesPerBucket.value[bucketId] ?? 1) + 1
 
-			const alreadyLoaded = this.allTasksLoadedForBucket[bucketId] ?? false
+		const alreadyLoaded = allTasksLoadedForBucket.value[bucketId] ?? false
 		if (alreadyLoaded) {
 			return
 		}
 
-			const cancel = setModuleLoading(this)
-			this.setBucketLoading({bucketId: bucketId, loading: true})
+		const cancel = setModuleLoading(this, setIsLoading)
+		setBucketLoading({bucketId: bucketId, loading: true})
 
 		const params = JSON.parse(JSON.stringify(ps))
 
@@ -325,86 +289,106 @@ export const useKanbanStore = defineStore('kanban', {
 		const taskService = new TaskCollectionService()
 		try {
 			const tasks = await taskService.getAll({listId}, params, page)
-				this.addTasksToBucket({tasks, bucketId: bucketId})
-				this.setTasksLoadedForBucketPage({bucketId, page})
+			addTasksToBucket({tasks, bucketId: bucketId})
+			setTasksLoadedForBucketPage({bucketId, page})
 			if (taskService.totalPages <= page) {
-					this.setAllTasksLoadedForBucket(bucketId)
+				setAllTasksLoadedForBucket(bucketId)
 			}
 			return tasks
 		} finally {
 			cancel()
-				this.setBucketLoading({bucketId, loading: false})
+			setBucketLoading({bucketId, loading: false})
+		}
 	}
-		},
 
-		async createBucket(bucket: IBucket) {
-			const cancel = setModuleLoading(this)
+	async function createBucket(bucket: IBucket) {
+		const cancel = setModuleLoading(this, setIsLoading)
 
 		const bucketService = new BucketService()
 		try {
 			const createdBucket = await bucketService.create(bucket)
-				this.addBucket(createdBucket)
+			addBucket(createdBucket)
 			return createdBucket
 		} finally {
 			cancel()
 		}
-		},
+	}
 
-		async deleteBucket({bucket, params}: {bucket: IBucket, params}) {
-			const cancel = setModuleLoading(this)
+	async function deleteBucket({bucket, params}: {bucket: IBucket, params}) {
+		const cancel = setModuleLoading(this, setIsLoading)
 
 		const bucketService = new BucketService()
 		try {
 			const response = await bucketService.delete(bucket)
-				this.removeBucket(bucket)
+			removeBucket(bucket)
 			// We reload all buckets because tasks are being moved from the deleted bucket
-				this.loadBucketsForList({listId: bucket.listId, params})
+			loadBucketsForList({listId: bucket.listId, params})
 			return response
 		} finally {
 			cancel()
 		}
-		},
+	}
 
-		async updateBucket(updatedBucketData: Partial<IBucket>) {
-			const cancel = setModuleLoading(this)
+	async function updateBucket(updatedBucketData: Partial<IBucket>) {
+		const cancel = setModuleLoading(this, setIsLoading)
 
-			const bucketIndex = findIndexById(this.buckets, updatedBucketData.id)
-			const oldBucket = cloneDeep(this.buckets[bucketIndex])
+		const bucketIndex = findIndexById(buckets.value, updatedBucketData.id)
+		const oldBucket = cloneDeep(buckets.value[bucketIndex])
 
 		const updatedBucket = {
 			...oldBucket,
 			...updatedBucketData,
 		}
 
-			this.setBucketByIndex({bucketIndex, bucket: updatedBucket})
+		setBucketByIndex({bucketIndex, bucket: updatedBucket})
 		
 		const bucketService = new BucketService()
 		try {
 			const returnedBucket = await bucketService.update(updatedBucket)
-				this.setBucketByIndex({bucketIndex, bucket: returnedBucket})
+			setBucketByIndex({bucketIndex, bucket: returnedBucket})
 			return returnedBucket
 		} catch(e) {
 			// restore original state
-				this.setBucketByIndex({bucketIndex, bucket: oldBucket})
+			setBucketByIndex({bucketIndex, bucket: oldBucket})
 
 			throw e
 		} finally {
 			cancel()
 		}
-		},
+	}
 
-		async updateBucketTitle({ id, title }: { id: IBucket['id'], title: IBucket['title'] }) {
-			const bucket = findById(this.buckets, id)
+	async function updateBucketTitle({ id, title }: { id: IBucket['id'], title: IBucket['title'] }) {
+		const bucket = findById(buckets.value, id)
 
 		if (bucket?.title === title) {
 			// bucket title has not changed
 			return
 		}
 
-			await this.updateBucket({ id, title })
+		await updateBucket({ id, title })
 		success({message: i18n.global.t('list.kanban.bucketTitleSavedSuccess')})
-		},
-	},
+	}
+	
+	return {
+		buckets: readonly(buckets),
+		isLoading: readonly(isLoading),
+	
+		getBucketById,
+		getTaskById,
+
+		setBuckets,
+		setBucketById,
+		setTaskInBucketByIndex,
+		setTaskInBucket,
+		addTaskToBucket,
+		removeTaskInBucket,
+		loadBucketsForList,
+		loadNextTasksForBucket,
+		createBucket,
+		deleteBucket,
+		updateBucket,
+		updateBucketTitle,
+	}
 })
 
 // support hot reloading