From 49a73a154ba77a043b01ce15fce5d11734386f9e Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Sat, 14 May 2022 15:05:12 +0000
Subject: [PATCH] feat: checklist-summary script setup (#1924)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1924
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 .../tasks/partials/checklist-summary.vue      | 69 ++++++++++---------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/tasks/partials/checklist-summary.vue b/src/components/tasks/partials/checklist-summary.vue
index 830fc109d..5d501bb2e 100644
--- a/src/components/tasks/partials/checklist-summary.vue
+++ b/src/components/tasks/partials/checklist-summary.vue
@@ -5,37 +5,40 @@
 			<circle stroke-width="2" stroke-dasharray="31" :stroke-dashoffset="checklistCircleDone"
 					stroke-linecap="round" fill="transparent" cx="50%" cy="50%" r="5"></circle>
 		</svg>
-		<span>
-			{{ $t(checklist.total === checklist.checked ? 'task.checklistAllDone' : 'task.checklistTotal', checklist) }}
-		</span>
+		<span>{{ label }}</span>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {computed} from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import {getChecklistStatistics} from '@/helpers/checklistFromText'
+import TaskModel from '@/models/task'
 
-export default defineComponent({
-	name: 'checklist-summary',
-	props: {
-		task: {
-			required: true,
-		},
+const props = defineProps({
+	task: {
+		type: TaskModel,
+		required: true,
 	},
-	computed: {
-		checklist() {
-			return getChecklistStatistics(this.task.description)
-		},
-		checklistCircleDone() {
-			const r = 5
-			const c = Math.PI * (r * 2)
+})
 
-			const progress = this.checklist.checked / this.checklist.total * 100
+const checklist = computed(() => getChecklistStatistics(props.task.description))
 
-			return ((100 - progress) / 100) * c
-		},
-	},
+const checklistCircleDone = computed(() => {
+	const r = 5
+	const c = Math.PI * (r * 2)
+
+	const progress = checklist.value.checked / checklist.value.total * 100
+
+	return ((100 - progress) / 100) * c
+})
+
+const {t} = useI18n()
+const label = computed(() => {
+	return checklist.value.total === checklist.value.checked 
+		? t('task.checklistAllDone', checklist.value)
+		: t('task.checklistTotal', checklist.value)
 })
 </script>
 
@@ -47,18 +50,20 @@ export default defineComponent({
 	padding-left: .5rem;
 	font-size: .9rem;
 
-	svg {
-		transform: rotate(-90deg);
-		transition: stroke-dashoffset 0.35s;
-		margin-right: .25rem;
+}
 
-		circle {
-			stroke: var(--grey-400);
+svg {
+	transform: rotate(-90deg);
+	transition: stroke-dashoffset 0.35s;
+	margin-right: .25rem;
 
-			&:last-child {
-				stroke: var(--primary);
-			}
-		}
+}
+
+circle {
+	stroke: var(--grey-400);
+
+	&:last-child {
+		stroke: var(--primary);
 	}
 }
 </style>
\ No newline at end of file