feat: task reminders script setup (#1934)

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

src/components/tasks/partials/reminders.vue

@@ -6,7 +6,7 @@
 			:class="{ 'overdue': r < new Date()}"
 			class="reminder-input"
 		>
-			<datepicker
+			<Datepicker
 				v-model="reminders[index]"
 				:disabled="disabled"
 				@close-on-change="() => addReminderDate(index)"
@@ -16,7 +16,7 @@
 			</a>
 		</div>
 		<div class="reminder-input" v-if="!disabled">
-			<datepicker
+			<Datepicker
 				v-model="newReminder"
 				@close-on-change="() => addReminderDate()"
 				:choose-date-label="$t('task.addReminder')"
@@ -25,87 +25,88 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {PropType, ref, onMounted, watch} from 'vue'
 
-import datepicker from '@/components/input/datepicker.vue'
+import Datepicker from '@/components/input/datepicker.vue'
 
-export default defineComponent({
-	name: 'reminders',
-	data() {
-		return {
-			newReminder: null,
-			reminders: [],
-		}
-	},
-	props: {
-		modelValue: {
-			default: () => [],
-			validator: prop => {
-				// This allows arrays of Dates and strings
-				if (!(prop instanceof Array)) {
+type Reminder = Date | string
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<Reminder[]>,
+		default: () => [],
+		validator(prop) {
+			// This allows arrays of Dates and strings
+			if (!(prop instanceof Array)) {
+				return false
+			}
+
+			const isDate = (e: any) => e instanceof Date
+			const isString = (e: any) => typeof e === 'string'
+
+			for (const e of prop) {
+				if (!isDate(e) && !isString(e)) {
+					console.log('validation failed', e, e instanceof Date)
 					return false
 				}
-
-				for (const e of prop) {
-					const isDate = e instanceof Date
-					const isString = typeof e === 'string'
-					if (!isDate && !isString) {
-						console.log('validation failed', e, e instanceof Date)
-						return false
-					}
-				}
-
-				return true
-			},
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue', 'change'],
-	components: {
-		datepicker,
-	},
-	mounted() {
-		this.reminders = this.modelValue
-	},
-	watch: {
-		modelValue(newVal) {
-			for (const i in newVal) {
-				if (typeof newVal[i] === 'string') {
-					newVal[i] = new Date(newVal[i])
-				}
-			}
-			this.reminders = newVal
-		},
-	},
-	methods: {
-		updateData() {
-			this.$emit('update:modelValue', this.reminders)
-			this.$emit('change')
-		},
-		addReminderDate(index = null) {
-			// New Date
-			if (index === null) {
-				if (this.newReminder === null) {
-					return
-				}
-				this.reminders.push(new Date(this.newReminder))
-				this.newReminder = null
-			} else if(this.reminders[index] === null) {
-				return
 			}
 
-			this.updateData()
-		},
-		removeReminderByIndex(index) {
-			this.reminders.splice(index, 1)
-			this.updateData()
+			return true
 		},
 	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
 })
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const reminders = ref<Reminder[]>([])
+
+onMounted(() => {
+	reminders.value = props.modelValue
+})
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		for (const i in newVal) {
+			if (typeof newVal[i] === 'string') {
+				newVal[i] = new Date(newVal[i])
+			}
+		}
+		reminders.value = newVal
+	},
+)
+
+
+function updateData() {
+	emit('update:modelValue', reminders.value)
+	emit('change')
+}
+
+const newReminder = ref(null)
+function addReminderDate(index : number | null = null) {
+	// New Date
+	if (index === null) {
+		if (newReminder.value === null) {
+			return
+		}
+		reminders.value.push(new Date(newReminder.value))
+		newReminder.value = null
+	} else if(reminders.value[index] === null) {
+		return
+	}
+
+	updateData()
+}
+
+function removeReminderByIndex(index: number) {
+	reminders.value.splice(index, 1)
+	updateData()
+}
 </script>
 
 <style lang="scss" scoped>