From 99d1c40cfd38c82869448578e7da6e94cf3e888e Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Sat, 14 May 2022 15:04:04 +0000
Subject: [PATCH] feat: prioritySelect script setup (#1925)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1925
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 .../tasks/partials/prioritySelect.vue         | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/components/tasks/partials/prioritySelect.vue b/src/components/tasks/partials/prioritySelect.vue
index be4b5b2c4..300cb60b9 100644
--- a/src/components/tasks/partials/prioritySelect.vue
+++ b/src/components/tasks/partials/prioritySelect.vue
@@ -1,6 +1,10 @@
 <template>
 	<div class="select">
-		<select :disabled="disabled || null" @change="updateData" v-model="priority">
+		<select
+			v-model="priority"
+			@change="updateData"
+			:disabled="disabled || undefined"
+		>
 			<option :value="priorities.UNSET">{{ $t('task.priority.unset') }}</option>
 			<option :value="priorities.LOW">{{ $t('task.priority.low') }}</option>
 			<option :value="priorities.MEDIUM">{{ $t('task.priority.medium') }}</option>
@@ -11,42 +15,36 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-import priorites from '../../../models/constants/priorities'
+<script setup lang="ts">
+import {ref, watch} from 'vue'
+import priorities from '@/models/constants/priorities.json'
 
-export default defineComponent({
-	name: 'prioritySelect',
-	data() {
-		return {
-			priorities: priorites,
-			priority: 0,
-		}
+const priority = ref(0)
+
+const props = defineProps({
+	modelValue: {
+		default: 0,
+		type: Number,
 	},
-	props: {
-		modelValue: {
-			default: 0,
-			type: Number,
-		},
-		disabled: {
-			default: false,
-		},
-	},
-	emits: ['update:modelValue', 'change'],
-	watch: {
-		// Set the priority to the :value every time it changes from the outside
-		modelValue: {
-			handler(value) {
-				this.priority = value
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		updateData() {
-			this.$emit('update:modelValue', this.priority)
-			this.$emit('change')
-		},
+	disabled: {
+		default: false,
 	},
 })
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// FIXME: store value outside
+// Set the priority to the :value every time it changes from the outside
+watch(
+	() => props.modelValue,
+	(value) => {
+		priority.value = value
+	},
+	{immediate: true},
+)
+
+function updateData() {
+	emit('update:modelValue', priority.value)
+	emit('change')
+}
 </script>