diff --git a/src/views/Event/EditView.vue b/src/views/Event/EditView.vue index 751deafff..ebb9bacb5 100644 --- a/src/views/Event/EditView.vue +++ b/src/views/Event/EditView.vue @@ -743,8 +743,8 @@ const initializeEvent = () => { end.setUTCHours(now.getUTCHours() + 3); - event.value.beginsOn = now.toISOString(); - event.value.endsOn = end.toISOString(); + beginsOn.value = now; + endsOn.value = end; }; const organizerActor = computed({ @@ -1215,66 +1215,54 @@ const isEventModified = computed((): boolean => { ); }); -const beginsOn = computed({ - get(): Date | null { - if (!event.value.beginsOn) { - return null; - } - // return event.value.beginsOn taking care of timezone - const date = new Date(event.value.beginsOn); - date.setUTCMinutes(date.getUTCMinutes() + tzOffset(date)); - return date; - }, - set(newBeginsOn: Date | null) { - if (!newBeginsOn) { - event.value.beginsOn = null; - return; - } +const beginsOn = ref(new Date()); +const endsOn = ref(new Date()); - // usefull for comparaison - newBeginsOn.setUTCSeconds(0); - newBeginsOn.setUTCMilliseconds(0); +const updateEventDateRelatedToTimezone = () => { + // update event.value.beginsOn taking care of timezone + const dateBeginsOn = new Date(beginsOn.value.getTime()); + dateBeginsOn.setUTCMinutes(dateBeginsOn.getUTCMinutes() - tzOffset.value); + event.value.beginsOn = dateBeginsOn.toISOString(); - // update event.value.beginsOn taking care of timezone - const date = new Date(newBeginsOn.getTime()); - date.setUTCMinutes(date.getUTCMinutes() - tzOffset(newBeginsOn)); - event.value.beginsOn = date.toISOString(); + // update event.value.endsOn taking care of timezone + const dateEndsOn = new Date(endsOn.value.getTime()); + dateEndsOn.setUTCMinutes(dateEndsOn.getUTCMinutes() - tzOffset.value); + event.value.endsOn = dateEndsOn.toISOString(); +}; - // Update endsOn to make sure endsOn is later than beginsOn - if (endsOn.value && endsOn.value <= newBeginsOn) { - const newEndsOn = new Date(newBeginsOn); - newEndsOn.setUTCHours(newBeginsOn.getUTCHours() + 1); - endsOn.value = newEndsOn; - } - }, +watch(beginsOn, (newBeginsOn) => { + if (!newBeginsOn) { + event.value.beginsOn = null; + return; + } + + // usefull for comparaison + newBeginsOn.setUTCSeconds(0); + newBeginsOn.setUTCMilliseconds(0); + + // update event.value.beginsOn taking care of timezone + updateEventDateRelatedToTimezone(); + + // Update endsOn to make sure endsOn is later than beginsOn + if (endsOn.value && endsOn.value <= newBeginsOn) { + const newEndsOn = new Date(newBeginsOn); + newEndsOn.setUTCHours(newBeginsOn.getUTCHours() + 1); + endsOn.value = newEndsOn; + } }); -const endsOn = computed({ - get(): Date | null { - if (!event.value.endsOn) { - return null; - } +watch(endsOn, (newEndsOn) => { + if (!newEndsOn) { + event.value.endsOn = null; + return; + } - // return event.value.endsOn taking care of timezone - const date = new Date(event.value.endsOn); - date.setUTCMinutes(date.getUTCMinutes() + tzOffset(date)); - return date; - }, - set(newEndsOn: Date | null) { - if (!newEndsOn) { - event.value.endsOn = null; - return; - } + // usefull for comparaison + newEndsOn.setUTCSeconds(0); + newEndsOn.setUTCMilliseconds(0); - // usefull for comparaison - newEndsOn.setUTCSeconds(0); - newEndsOn.setUTCMilliseconds(0); - - // update event.value.endsOn taking care of timezone - const date = new Date(newEndsOn.getTime()); - date.setUTCMinutes(date.getUTCMinutes() - tzOffset(newEndsOn)); - event.value.endsOn = date.toISOString(); - }, + // update event.value.endsOn taking care of timezone + updateEventDateRelatedToTimezone(); }); const { timezones: rawTimezones, loading: timezoneLoading } = useTimezones(); @@ -1342,10 +1330,13 @@ const userActualTimezone = computed((): string => { return browserTimeZone; }); -const tzOffset = (date: Date | null): number => { - if (!timezone.value || !date) { +const tzOffset = computed((): number => { + if (!timezone.value) { return 0; } + + const date = new Date(); + // diff between UTC and selected timezone // example: Asia/Shanghai is + 8 hours const eventUTCOffset = getTimezoneOffset(timezone.value, date); @@ -1356,7 +1347,12 @@ const tzOffset = (date: Date | null): number => { // example : offset is 8-1=7 return (eventUTCOffset - localUTCOffset) / (60 * 1000); -}; +}); + +watch(tzOffset, () => { + // tzOffset has been changed, we need to update the event dates + updateEventDateRelatedToTimezone(); +}); const eventPhysicalAddress = computed({ get(): IAddress | null { @@ -1403,6 +1399,20 @@ const { event: fetchedEvent, onResult: onFetchEventResult } = useFetchEvent( eventId.value ); +// update the date components if the event changed (after fetching it, for example) +watch(event, () => { + if (event.value.beginsOn) { + const date = new Date(event.value.beginsOn); + date.setUTCMinutes(date.getUTCMinutes() + tzOffset.value); + beginsOn.value = date; + } + if (event.value.endsOn) { + const date = new Date(event.value.endsOn); + date.setUTCMinutes(date.getUTCMinutes() + tzOffset.value); + endsOn.value = date; + } +}); + watch( fetchedEvent, () => {