feat: tasks store with composition api

src/stores/tasks.ts

@@ -1,3 +1,4 @@
+import {computed, ref} from 'vue'
 import {defineStore, acceptHMRUpdate} from 'pinia'
 import router from '@/router'
 import {formatISO} from 'date-fns'
@@ -78,48 +79,48 @@ async function findAssignees(parsedTaskAssignees: string[]) {
 	return validatedUsers.filter((item) => Boolean(item))
 }
 
-export interface TaskState {
-	tasks: { [id: ITask['id']]: ITask }
-	isLoading: boolean,
-}
+export const useTaskStore = defineStore('task', () => {
+	const baseStore = useBaseStore()
+	const kanbanStore = useKanbanStore()
+	const attachmentStore = useAttachmentStore()
+	const labelStore = useLabelStore()
+	const listStore = useListStore()
 
-export const useTaskStore = defineStore('task', {
-	state: () : TaskState => ({
-		tasks: {},
-		isLoading: false,
-	}),
-	getters: {
-		hasTasks(state) {
-			return Object.keys(state.tasks).length > 0
-		},
-	},
-	actions: {
-		setTasks(tasks: ITask[]) {
-			tasks.forEach(task => {
-				this.tasks[task.id] = task
+	const tasks = ref<{ [id: ITask['id']]: ITask }>({}) // TODO: or is this ITask[]
+	const isLoading = ref(false)
+
+	const hasTasks = computed(() => Object.keys(tasks.value).length > 0)
+
+	function setIsLoading(newIsLoading: boolean) {
+		isLoading.value = newIsLoading
+	}
+
+	function setTasks(newTasks: ITask[]) {
+		newTasks.forEach(task => {
+			tasks.value[task.id] = task
 		})
-		},
+	}
 
-		async loadTasks(params) {
+	async function loadTasks(params) {
 		const taskService = new TaskService()
 
-			const cancel = setModuleLoading(this)
+		const cancel = setModuleLoading(this, setIsLoading)
 		try {
-				this.tasks = await taskService.getAll({}, params)
-				useBaseStore().setHasTasks(this.tasks.length > 0)
-				return this.tasks
+			tasks.value = await taskService.getAll({}, params)
+			baseStore.setHasTasks(tasks.value.length > 0)
+			return tasks.value
 		} finally {
 			cancel()
 		}
-		},
+	}
 
-		async update(task: ITask) {
-			const cancel = setModuleLoading(this)
+	async function update(task: ITask) {
+		const cancel = setModuleLoading(this, setIsLoading)
 
 		const taskService = new TaskService()
 		try {
 			const updatedTask = await taskService.update(task)
-				useKanbanStore().setTaskInBucket(updatedTask)
+			kanbanStore.setTaskInBucket(updatedTask)
 			if (task.done) {
 				playPop()
 			}
@@ -127,25 +128,24 @@ export const useTaskStore = defineStore('task', {
 		} finally {
 			cancel()
 		}
-		},
+	}
 
-		async delete(task: ITask) {
+	async function deleteTask(task: ITask) {
 		const taskService = new TaskService()
 		const response = await taskService.delete(task)
-			useKanbanStore().removeTaskInBucket(task)
+		kanbanStore.removeTaskInBucket(task)
 		return response
-		},
+	}
 
 	// Adds a task attachment in store.
 	// This is an action to be able to commit other mutations
-		addTaskAttachment({
+	function addTaskAttachment({
 		taskId,
 		attachment,
 	}: {
 		taskId: ITask['id']
 		attachment: IAttachment
 	}) {
-			const kanbanStore = useKanbanStore()
 		const t = kanbanStore.getTaskById(taskId)
 		if (t.task !== null) {
 			const attachments = [
@@ -162,21 +162,19 @@ export const useTaskStore = defineStore('task', {
 			}
 			kanbanStore.setTaskInBucketByIndex(newTask)
 		}
-			const attachmentStore = useAttachmentStore()
 		attachmentStore.add(attachment)
-		},
+	}
 
-		async addAssignee({
+	async function addAssignee({
 		user,
 		taskId,
 	}: {
 		user: IUser,
 		taskId: ITask['id']
 	}) {
-			const cancel = setModuleLoading(this)
+		const cancel = setModuleLoading(this, setIsLoading)
 		
 		try {
-				const kanbanStore = useKanbanStore()
 			const taskAssigneeService = new TaskAssigneeService()
 			const r = await taskAssigneeService.create(new TaskAssigneeModel({
 				userId: user.id,
@@ -206,16 +204,15 @@ export const useTaskStore = defineStore('task', {
 		} finally {
 			cancel()
 		}
-		},
+	}
 
-		async removeAssignee({
+	async function removeAssignee({
 		user,
 		taskId,
 	}: {
 		user: IUser,
 		taskId: ITask['id']
 	}) {
-			const kanbanStore = useKanbanStore()
 		const taskAssigneeService = new TaskAssigneeService()
 		const response = await taskAssigneeService.delete(new TaskAssigneeModel({
 			userId: user.id,
@@ -241,16 +238,15 @@ export const useTaskStore = defineStore('task', {
 		})
 		return response
 
-		},
+	}
 
-		async addLabel({
+	async function addLabel({
 		label,
 		taskId,
 	} : {
 		label: ILabel,
 		taskId: ITask['id']
 	}) {
-			const kanbanStore = useKanbanStore()
 		const labelTaskService = new LabelTaskService()
 		const r = await labelTaskService.create(new LabelTaskModel({
 			taskId,
@@ -277,13 +273,12 @@ export const useTaskStore = defineStore('task', {
 		})
 
 		return r
-		},
+	}
 
-		async removeLabel(
+	async function removeLabel(
 		{label, taskId}:
 		{label: ILabel, taskId: ITask['id']},
 	) {
-			const kanbanStore = useKanbanStore()
 		const labelTaskService = new LabelTaskService()
 		const response = await labelTaskService.delete(new LabelTaskModel({
 			taskId, labelId:
@@ -310,10 +305,10 @@ export const useTaskStore = defineStore('task', {
 		})
 
 		return response
-		},
+	}
 
 	// Do everything that is involved in finding, creating and adding the label to the task
-		async addLabelsToTask(
+	async function addLabelsToTask(
 		{ task, parsedLabels }:
 		{ task: ITask, parsedLabels: string[] },
 	) {
@@ -321,8 +316,6 @@ export const useTaskStore = defineStore('task', {
 			return task
 		}
 
-			const labelStore = useLabelStore()
-
 		const labelAddsToWaitFor = parsedLabels.map(async labelTitle => {
 			let label = validateLabel(Object.values(labelStore.labels), labelTitle)
 			if (typeof label === 'undefined') {
@@ -337,9 +330,9 @@ export const useTaskStore = defineStore('task', {
 		// This waits until all labels are created and added to the task
 		await Promise.all(labelAddsToWaitFor)
 		return task
-		},
+	}
 
-		findListId(
+	function findListId(
 		{ list: listName, listId }:
 		{ list: string, listId: IList['id'] }) {
 		let foundListId = null
@@ -347,7 +340,6 @@ export const useTaskStore = defineStore('task', {
 		// Uses the following ways to get the list id of the new task:
 		//  1. If specified in quick add magic, look in store if it exists and use it if it does
 		if (listName !== null) {
-				const listStore = useListStore()
 			const list = listStore.findListByExactname(listName)
 			foundListId = list === null ? null : list.id
 		}
@@ -368,9 +360,9 @@ export const useTaskStore = defineStore('task', {
 		}
 	
 		return foundListId
-		},
+	}
 
-		async createNewTask({
+	async function createNewTask({
 		title,
 		bucketId,
 		listId,
@@ -378,10 +370,10 @@ export const useTaskStore = defineStore('task', {
 	} : 
 		Partial<ITask>,
 	) {
-			const cancel = setModuleLoading(this)
+		const cancel = setModuleLoading(this, setIsLoading)
 		const parsedTask = parseTaskText(title, getQuickAddMagicMode())
 	
-			const foundListId = await this.findListId({
+		const foundListId = await findListId({
 			list: parsedTask.list,
 			listId: listId || 0,
 		})
@@ -410,7 +402,7 @@ export const useTaskStore = defineStore('task', {
 		const taskService = new TaskService()
 		try {
 			const createdTask = await taskService.create(task)
-				const result = await this.addLabelsToTask({
+			const result = await addLabelsToTask({
 				task: createdTask,
 				parsedLabels: parsedTask.labels,
 			})
@@ -418,15 +410,34 @@ export const useTaskStore = defineStore('task', {
 		} finally {
 			cancel()
 		}
-		},
+	}
 	
-		async setCoverImage(task: ITask, attachment: IAttachment | null) {
-			return this.update({
+	async function setCoverImage(task: ITask, attachment: IAttachment | null) {
+		return update({
 			...task,
 			coverImageAttachmentId: attachment ? attachment.id : 0,
 		})
-		},
-	},
+	}
+
+	return {
+		tasks,
+		isLoading,
+
+		hasTasks,
+
+		setTasks,
+		loadTasks,
+		update,
+		delete: deleteTask, // since delete is a reserved word we have to alias here
+		addTaskAttachment,
+		addAssignee,
+		removeAssignee,
+		addLabel,
+		removeLabel,
+		addLabelsToTask,
+		createNewTask,
+		setCoverImage,
+	}
 })
 
 // support hot reloading