feat: repeatAfter script setup (#1928)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1928
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/tasks/partials/repeatAfter.vue

@@ -26,7 +26,7 @@
 			<div class="field has-addons is-fullwidth">
 				<div class="control">
 					<input
-						:disabled="disabled || null"
+						:disabled="disabled || undefined"
 						@change="updateData"
 						class="input"
 						:placeholder="$t('task.repeat.specifyAmount')"
@@ -36,7 +36,11 @@
 				</div>
 				<div class="control">
 					<div class="select">
-						<select :disabled="disabled || null" @change="updateData" v-model="repeatAfter.type">
+						<select
+							v-model="repeatAfter.type"
+							@change="updateData"
+							:disabled="disabled || undefined"
+						>
 							<option value="hours">{{ $t('task.repeat.hours') }}</option>
 							<option value="days">{{ $t('task.repeat.days') }}</option>
 							<option value="weeks">{{ $t('task.repeat.weeks') }}</option>
@@ -50,23 +54,12 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {ref, reactive, watch} from 'vue'
 import repeatModes from '@/models/constants/taskRepeatModes'
+import TaskModel from '@/models/task'
 
-export default defineComponent({
+const props = defineProps({
-	name: 'repeatAfter',
-	data() {
-		return {
-			task: {},
-			repeatAfter: {
-				amount: 0,
-				type: '',
-			},
-			repeatModes,
-		}
-	},
-	props: {
 	modelValue: {
 		default: () => {},
 		required: true,
@@ -75,36 +68,41 @@ export default defineComponent({
 		type: Boolean,
 		default: false,
 	},
-	},
+})
-	emits: ['update:modelValue', 'change'],
+
-	watch: {
+const emit = defineEmits(['update:modelValue', 'change'])
-		modelValue: {
+
-			handler(value) {
+const task = ref<TaskModel>({})
-				this.task = value
+const repeatAfter = reactive({
+	amount: 0,
+	type: '',
+})
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		task.value = value
 		if (typeof value.repeatAfter !== 'undefined') {
-					this.repeatAfter = value.repeatAfter
+			Object.assign(repeatAfter, value.repeatAfter)
 		}
 	},
-			immediate: true,
+	{immediate: true},
-		},
+)
-	},
+
-	methods: {
+function updateData() {
-		updateData() {
+	if (task.value.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
-			if (this.task.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && this.repeatAfter.amount === 0) {
 		return
 	}
 	
-			this.task.repeatAfter = this.repeatAfter
+	Object.assign(task.value.repeatAfter, repeatAfter)
-			this.$emit('update:modelValue', this.task)
+	emit('update:modelValue', task.value)
-			this.$emit('change')
+	emit('change')
-		},
+}
-		setRepeatAfter(amount, type) {
+
-			this.repeatAfter.amount = amount
+function setRepeatAfter(amount: number, type) {
-			this.repeatAfter.type = type
+	Object.assign(repeatAfter, { amount, type})
-			this.updateData()
+	updateData()
-		},
+}
-	},
-})
 </script>
 
 <style lang="scss" scoped>