From 8ac0eb4aa4fbe5a3b147e7f31a29aa2c2f84a1ca Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 6 Jul 2024 12:26:27 +0200
Subject: [PATCH] feat: defineModel and withDefaults for PercentDoneSelect

---
 .../tasks/partials/PercentDoneSelect.vue      | 62 ++++---------------
 1 file changed, 12 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/tasks/partials/PercentDoneSelect.vue b/frontend/src/components/tasks/partials/PercentDoneSelect.vue
index 0f917f6ec..817d962c9 100644
--- a/frontend/src/components/tasks/partials/PercentDoneSelect.vue
+++ b/frontend/src/components/tasks/partials/PercentDoneSelect.vue
@@ -4,63 +4,25 @@
 			v-model.number="percentDone"
 			:disabled="disabled || undefined"
 		>
-			<option value="0">
-				0%
-			</option>
-			<option value="0.1">
-				10%
-			</option>
-			<option value="0.2">
-				20%
-			</option>
-			<option value="0.3">
-				30%
-			</option>
-			<option value="0.4">
-				40%
-			</option>
-			<option value="0.5">
-				50%
-			</option>
-			<option value="0.6">
-				60%
-			</option>
-			<option value="0.7">
-				70%
-			</option>
-			<option value="0.8">
-				80%
-			</option>
-			<option value="0.9">
-				90%
-			</option>
-			<option value="1">
-				100%
+			<option
+				v-for="option in PERCENT_OPTIONS"
+				:key="option"
+				:value="option"
+			>
+				{{ option * 100 }}%
 			</option>
 		</select>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
-
-const props = defineProps({
-	modelValue: {
-		default: 0,
-		type: Number,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
+withDefaults(defineProps<{
+	disabled?: boolean
+}>(), {
+	disabled: false,
 })
 
-const emit = defineEmits(['update:modelValue'])
+const percentDone = defineModel<number>({ required: true })
 
-const percentDone = computed({
-	get: () => props.modelValue,
-	set(percentDone) {
-		emit('update:modelValue', percentDone)
-	},
-})
+const PERCENT_OPTIONS = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] as const
 </script>