From a5925baff03ac2809b7c601b45b93363b6188083 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 2 Oct 2022 12:28:57 +0200
Subject: [PATCH 1/3] feat: migrate kanban card to script setup

---
 src/components/tasks/partials/kanban-card.vue | 101 +++++++-----------
 src/modelTypes/ITask.ts                       |   2 +
 src/models/task.ts                            |   2 +-
 3 files changed, 43 insertions(+), 62 deletions(-)

diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 6ddd776a8..b9121ce98 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -12,7 +12,7 @@
 		@click.meta="() => toggleTaskDone(task)"
 	>
 		<span class="task-id">
-			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
+			<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
 			<template v-if="task.identifier === ''">
 				#{{ task.index }}
 			</template>
@@ -65,8 +65,9 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent, type PropType} from 'vue'
+<script lang="ts" setup>
+import {ref, computed} from 'vue'
+import {useRouter} from 'vue-router'
 
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
 import User from '../../../components/misc/user.vue'
@@ -80,65 +81,43 @@ import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatD
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import {useTaskStore} from '@/stores/tasks'
 
-export default defineComponent({
-	name: 'kanban-card',
-	components: {
-		ChecklistSummary,
-		Done,
-		PriorityLabel,
-		User,
-		Labels,
-	},
-	data() {
-		return {
-			loadingInternal: false,
-			TASK_DEFAULT_COLOR,
-		}
-	},
-	props: {
-		task: {
-			type: Object as PropType<ITask>,
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	computed: {
-		color() {
-			return this.task.getHexColor
-				? this.task.getHexColor() 
-				: TASK_DEFAULT_COLOR
-		},
-	},
-	methods: {
-		formatDateLong,
-		formatISO,
-		formatDateSince,
-		colorIsDark,
-		async toggleTaskDone(task: ITask) {
-			this.loadingInternal = true
-			try {
-				const done = !task.done
-				await useTaskStore().update({
-					...task,
-					done,
-				})
-			} finally {
-				this.loadingInternal = false
-			}
-		},
-		openTaskDetail() {
-			this.$router.push({
-				name: 'task.detail',
-				params: { id: this.task.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
-			})
-		},
-	},
+const router = useRouter()
+
+const loadingInternal = ref(false)
+
+const props = withDefaults(defineProps<{
+	task: ITask,
+	loading: boolean,
+}>(), {
+	loading: false,
 })
+
+const color = computed(() => {
+	return props.task.getHexColor
+		? props.task.getHexColor()
+		: TASK_DEFAULT_COLOR
+})
+
+async function toggleTaskDone(task: ITask) {
+	loadingInternal.value = true
+	try {
+		const done = !task.done
+		await useTaskStore().update({
+			...task,
+			done,
+		})
+	} finally {
+		loadingInternal.value = false
+	}
+}
+
+function openTaskDetail() {
+	router.push({
+		name: 'task.detail',
+		params: {id: props.task.id},
+		state: {backdropView: router.currentRoute.value.fullPath},
+	})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modelTypes/ITask.ts b/src/modelTypes/ITask.ts
index 6616a680f..80eaad693 100644
--- a/src/modelTypes/ITask.ts
+++ b/src/modelTypes/ITask.ts
@@ -47,4 +47,6 @@ export interface ITask extends IAbstract {
 
 	listId: IList['id'] // Meta, only used when creating a new task
 	bucketId: IBucket['id']
+	
+	getHexColor(): string
 }
\ No newline at end of file
diff --git a/src/models/task.ts b/src/models/task.ts
index 641b2bc53..5f4e01d70 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -28,7 +28,7 @@ if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
 	console.debug('This browser does not support triggered notifications')
 }
 
-export function	getHexColor(hexColor: string) {
+export function	getHexColor(hexColor: string): string {
 	if (hexColor === '' || hexColor === '#') {
 		return TASK_DEFAULT_COLOR
 	}

From 367ad1e5a5972ac6ff353275b31f309ebcf5cb4c Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 3 Oct 2022 12:34:29 +0200
Subject: [PATCH 2/3] fix: don't add class method to interface

---
 src/components/tasks/partials/kanban-card.vue | 9 +++------
 src/modelTypes/ITask.ts                       | 2 --
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index b9121ce98..f816f0152 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -74,7 +74,8 @@ import User from '../../../components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
 import Labels from '../../../components/tasks/partials/labels.vue'
 import ChecklistSummary from './checklist-summary.vue'
-import {TASK_DEFAULT_COLOR} from '@/models/task'
+
+import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
 
 import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
@@ -92,11 +93,7 @@ const props = withDefaults(defineProps<{
 	loading: false,
 })
 
-const color = computed(() => {
-	return props.task.getHexColor
-		? props.task.getHexColor()
-		: TASK_DEFAULT_COLOR
-})
+const color = computed(() => getHexColor(props.task.hexColor))
 
 async function toggleTaskDone(task: ITask) {
 	loadingInternal.value = true
diff --git a/src/modelTypes/ITask.ts b/src/modelTypes/ITask.ts
index 80eaad693..6616a680f 100644
--- a/src/modelTypes/ITask.ts
+++ b/src/modelTypes/ITask.ts
@@ -47,6 +47,4 @@ export interface ITask extends IAbstract {
 
 	listId: IList['id'] // Meta, only used when creating a new task
 	bucketId: IBucket['id']
-	
-	getHexColor(): string
 }
\ No newline at end of file

From af7f8400e901c2f4d9c5c4cca7614af62892a75e Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 3 Oct 2022 12:35:15 +0200
Subject: [PATCH 3/3] chore: small review adjustments

---
 src/components/tasks/partials/kanban-card.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index f816f0152..1ee64f36c 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -6,7 +6,7 @@
 			'draggable': !(loadingInternal || loading),
 			'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
 		}"
-		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
+		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : undefined}"
 		@click.exact="openTaskDetail()"
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
@@ -44,11 +44,11 @@
 			<priority-label :priority="task.priority" :done="task.done"/>
 			<div class="assignees" v-if="task.assignees.length > 0">
 				<user
+					v-for="u in task.assignees"
 					:avatar-size="24"
 					:key="task.id + 'assignee' + u.id"
 					:show-username="false"
 					:user="u"
-					v-for="u in task.assignees"
 				/>
 			</div>
 			<checklist-summary :task="task"/>
@@ -69,10 +69,10 @@
 import {ref, computed} from 'vue'
 import {useRouter} from 'vue-router'
 
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
-import User from '../../../components/misc/user.vue'
+import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
+import User from '@/components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels.vue'
+import Labels from '@/components/tasks/partials/labels.vue'
 import ChecklistSummary from './checklist-summary.vue'
 
 import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
@@ -98,10 +98,9 @@ const color = computed(() => getHexColor(props.task.hexColor))
 async function toggleTaskDone(task: ITask) {
 	loadingInternal.value = true
 	try {
-		const done = !task.done
 		await useTaskStore().update({
 			...task,
-			done,
+			done: !task.done,
 		})
 	} finally {
 		loadingInternal.value = false