feat: checklist-summary script setup (#1924)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: #1924
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

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>
+		<span>{{ label }}</span>
-			{{ $t(checklist.total === checklist.checked ? 'task.checklistAllDone' : 'task.checklistTotal', checklist) }}
-		</span>
 	</span>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {computed} from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import {getChecklistStatistics} from '@/helpers/checklistFromText'
+import TaskModel from '@/models/task'
 
-export default defineComponent({
+const props = defineProps({
-	name: 'checklist-summary',
-	props: {
 	task: {
+		type: TaskModel,
 		required: true,
 	},
-	},
+})
-	computed: {
+
-		checklist() {
+const checklist = computed(() => getChecklistStatistics(props.task.description))
-			return getChecklistStatistics(this.task.description)
+
-		},
+const checklistCircleDone = computed(() => {
-		checklistCircleDone() {
 	const r = 5
 	const c = Math.PI * (r * 2)
 
-			const progress = this.checklist.checked / this.checklist.total * 100
+	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,11 +50,15 @@ 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);
 
@@ -59,6 +66,4 @@ export default defineComponent({
 		stroke: var(--primary);
 	}
 }
-	}
-}
 </style>