refactor: event instances

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/editors/EventEditorDates.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { parseCalendarDate } from '@/utils/date'
 
 interface Props {
   mode: 'edit' | 'view'
@@ -42,6 +43,9 @@ const formatTime = (date: Date): string => {
 
 const formatDateTime = (isoString: string | null | undefined): string => {
   if (!isoString) return 'Not set'
+  if (timelessValue.value) {
+    return parseCalendarDate(isoString)?.toLocaleDateString() ?? 'Not set'
+  }
   const date = new Date(isoString)
   return date.toLocaleString()
 }
@@ -53,6 +57,16 @@ const parseDateTime = (date: string, time: string): Date => {
   return new Date(`${date}T${time}`)
 }
 
+const serializeDateTime = (date: string, time: string): string => {
+  return timelessValue.value
+    ? `${date}T00:00:00.000Z`
+    : new Date(`${date}T${time}`).toISOString()
+}
+
+const inputDate = (value: string, timeless: boolean): string => {
+  return timeless ? value.slice(0, 10) : formatDate(new Date(value))
+}
+
 const formatDisplayDate = (value: string): string => {
   if (!value) return ''
   return new Date(`${value}T00:00:00`).toLocaleDateString(undefined, {
@@ -101,10 +115,10 @@ const selectEndDate = (value: unknown) => {
 }
 
 // Initialize date/time from props
-watch(() => props.startsOn, (newValue) => {
+watch([() => props.startsOn, () => props.timeless], ([newValue, timeless]) => {
   if (newValue) {
     const start = new Date(newValue)
-    startDate.value = formatDate(start)
+    startDate.value = inputDate(newValue, timeless === true)
     startTime.value = formatTime(start)
   } else {
     const now = new Date()
@@ -113,10 +127,10 @@ watch(() => props.startsOn, (newValue) => {
   }
 }, { immediate: true })
 
-watch(() => props.endsOn, (newValue) => {
+watch([() => props.endsOn, () => props.timeless], ([newValue, timeless]) => {
   if (newValue) {
     const end = new Date(newValue)
-    endDate.value = formatDate(end)
+    endDate.value = inputDate(newValue, timeless === true)
     endTime.value = formatTime(end)
   } else {
     const later = new Date(Date.now() + 60 * 60 * 1000)
@@ -129,10 +143,14 @@ const ensureValidRange = (): boolean => {
   if (!startDate.value || !endDate.value || !startTime.value || !endTime.value) return false
   const start = parseDateTime(startDate.value, startTime.value)
   const end = parseDateTime(endDate.value, endTime.value)
-  if (end.getTime() >= start.getTime()) return false
+  const valid = timelessValue.value
+    ? end.getTime() > start.getTime()
+    : end.getTime() >= start.getTime()
+  if (valid) return false
 
   const correctedEnd = new Date(start)
-  if (!timelessValue.value) correctedEnd.setHours(correctedEnd.getHours() + 1)
+  if (timelessValue.value) correctedEnd.setDate(correctedEnd.getDate() + 1)
+  else correctedEnd.setHours(correctedEnd.getHours() + 1)
   endDate.value = formatDate(correctedEnd)
   endTime.value = formatTime(correctedEnd)
   return true
@@ -140,8 +158,8 @@ const ensureValidRange = (): boolean => {
 
 watch([startDate, startTime, endDate, endTime, timelessValue], () => {
   if (props.mode !== 'edit' || ensureValidRange()) return
-  emit('update:startsOn', parseDateTime(startDate.value, startTime.value).toISOString())
-  emit('update:endsOn', parseDateTime(endDate.value, endTime.value).toISOString())
+  emit('update:startsOn', serializeDateTime(startDate.value, startTime.value))
+  emit('update:endsOn', serializeDateTime(endDate.value, endTime.value))
 })
 </script>