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,32 +25,28 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {PropType, ref, onMounted, watch} from 'vue'
 
-import datepicker from '@/components/input/datepicker.vue'
+import Datepicker from '@/components/input/datepicker.vue'
 
-export default defineComponent({
+type Reminder = Date | string
-	name: 'reminders',
+
-	data() {
+const props = defineProps({
-		return {
-			newReminder: null,
-			reminders: [],
-		}
-	},
-	props: {
 	modelValue: {
+		type: Array as PropType<Reminder[]>,
 		default: () => [],
-			validator: prop => {
+		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) {
-					const isDate = e instanceof Date
+				if (!isDate(e) && !isString(e)) {
-					const isString = typeof e === 'string'
-					if (!isDate && !isString) {
 					console.log('validation failed', e, e instanceof Date)
 					return false
 				}
@@ -63,49 +59,54 @@ export default defineComponent({
 		type: Boolean,
 		default: false,
 	},
-	},
+})
-	emits: ['update:modelValue', 'change'],
+
-	components: {
+const emit = defineEmits(['update:modelValue', 'change'])
-		datepicker,
+
-	},
+const reminders = ref<Reminder[]>([])
-	mounted() {
+
-		this.reminders = this.modelValue
+onMounted(() => {
-	},
+	reminders.value = props.modelValue
-	watch: {
+})
-		modelValue(newVal) {
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
 		for (const i in newVal) {
 			if (typeof newVal[i] === 'string') {
 				newVal[i] = new Date(newVal[i])
 			}
 		}
-			this.reminders = newVal
+		reminders.value = newVal
 	},
-	},
+)
-	methods: {
+
-		updateData() {
+
-			this.$emit('update:modelValue', this.reminders)
+function updateData() {
-			this.$emit('change')
+	emit('update:modelValue', reminders.value)
-		},
+	emit('change')
-		addReminderDate(index = null) {
+}
+
+const newReminder = ref(null)
+function addReminderDate(index : number | null = null) {
 	// New Date
 	if (index === null) {
-				if (this.newReminder === null) {
+		if (newReminder.value === null) {
 			return
 		}
-				this.reminders.push(new Date(this.newReminder))
+		reminders.value.push(new Date(newReminder.value))
-				this.newReminder = null
+		newReminder.value = null
-			} else if(this.reminders[index] === null) {
+	} else if(reminders.value[index] === null) {
 		return
 	}
 
-			this.updateData()
+	updateData()
-		},
+}
-		removeReminderByIndex(index) {
+
-			this.reminders.splice(index, 1)
+function removeReminderByIndex(index: number) {
-			this.updateData()
+	reminders.value.splice(index, 1)
-		},
+	updateData()
-	},
+}
-})
 </script>
 
 <style lang="scss" scoped>