Event dialog cleanup
This commit is contained in:
Leo Vasanko
parent
fece943594
commit
c77f6af131
@ -1,16 +1,10 @@
|
||||
<script setup>
|
||||
import { useCalendarStore } from '@/stores/CalendarStore'
|
||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
|
||||
import BaseDialog from './BaseDialog.vue'
|
||||
import WeekdaySelector from './WeekdaySelector.vue'
|
||||
import Numeric from './Numeric.vue'
|
||||
import {
|
||||
addDaysStr,
|
||||
getMondayOfISOWeek,
|
||||
fromLocalString,
|
||||
toLocalString,
|
||||
DEFAULT_TZ,
|
||||
} from '@/utils/date'
|
||||
import { addDaysStr, getMondayOfISOWeek, fromLocalString, DEFAULT_TZ } from '@/utils/date'
|
||||
import { addDays, addMonths } from 'date-fns'
|
||||
|
||||
const props = defineProps({
|
||||
@ -23,11 +17,22 @@ const calendarStore = useCalendarStore()
|
||||
|
||||
const showDialog = ref(false)
|
||||
const dialogMode = ref('create') // 'create' or 'edit'
|
||||
const editingEventId = ref(null) // base event id if repeating occurrence clicked
|
||||
// Track the id of an unsaved event created in the current create dialog session
|
||||
const editingEventId = ref(null)
|
||||
const unsavedCreateId = ref(null)
|
||||
const occurrenceContext = ref(null) // { baseId, occurrenceIndex, weekday, occurrenceDate }
|
||||
const title = ref('')
|
||||
const title = computed({
|
||||
get() {
|
||||
if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
|
||||
return calendarStore.events.get(editingEventId.value).title || ''
|
||||
}
|
||||
return ''
|
||||
},
|
||||
set(v) {
|
||||
if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
|
||||
calendarStore.events.get(editingEventId.value).title = v
|
||||
}
|
||||
},
|
||||
})
|
||||
const recurrenceEnabled = ref(false)
|
||||
const recurrenceInterval = ref(1) // N in "Every N weeks/months"
|
||||
const recurrenceFrequency = ref('weeks') // 'weeks' | 'months'
|
||||
@ -36,80 +41,17 @@ const recurrenceOccurrences = ref(0) // 0 = unlimited
|
||||
const colorId = ref(0)
|
||||
const eventSaved = ref(false)
|
||||
const titleInput = ref(null)
|
||||
const modalRef = ref(null)
|
||||
|
||||
// UI display mode - stays fixed unless user manually changes it
|
||||
const uiDisplayFrequency = ref('weeks') // 'weeks' | 'months' | 'years'
|
||||
|
||||
// Drag functionality
|
||||
const isDragging = ref(false)
|
||||
const dragOffset = ref({ x: 0, y: 0 })
|
||||
const modalPosition = ref({ x: 0, y: 0 })
|
||||
|
||||
function startDrag(event) {
|
||||
if (!modalRef.value) return
|
||||
|
||||
isDragging.value = true
|
||||
const rect = modalRef.value.getBoundingClientRect()
|
||||
dragOffset.value = {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top,
|
||||
}
|
||||
|
||||
// Set pointer capture for better touch handling
|
||||
if (event.pointerId !== undefined) {
|
||||
try {
|
||||
event.target.setPointerCapture(event.pointerId)
|
||||
} catch (e) {
|
||||
console.warn('Could not set pointer capture:', e)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('pointermove', handleDrag, { passive: false })
|
||||
document.addEventListener('pointerup', stopDrag)
|
||||
document.addEventListener('pointercancel', stopDrag)
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
function handleDrag(event) {
|
||||
if (!isDragging.value || !modalRef.value) return
|
||||
|
||||
modalPosition.value = {
|
||||
x: event.clientX - dragOffset.value.x,
|
||||
y: event.clientY - dragOffset.value.y,
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
function stopDrag() {
|
||||
isDragging.value = false
|
||||
document.removeEventListener('pointermove', handleDrag)
|
||||
document.removeEventListener('pointerup', stopDrag)
|
||||
document.removeEventListener('pointercancel', stopDrag)
|
||||
}
|
||||
|
||||
const modalStyle = computed(() => {
|
||||
if (modalPosition.value.x !== 0 || modalPosition.value.y !== 0) {
|
||||
return {
|
||||
transform: 'none',
|
||||
left: `${modalPosition.value.x}px`,
|
||||
top: `${modalPosition.value.y}px`,
|
||||
}
|
||||
}
|
||||
return {}
|
||||
})
|
||||
|
||||
// Helper to get starting weekday (Sunday-first index)
|
||||
function getStartingWeekday(selectionData = null) {
|
||||
const currentSelection = selectionData || props.selection
|
||||
if (!currentSelection.start) return 0 // Default to Sunday
|
||||
if (!currentSelection.start) return 0
|
||||
const date = fromLocalString(currentSelection.start, DEFAULT_TZ)
|
||||
const dayOfWeek = date.getDay() // 0=Sunday, 1=Monday, ...
|
||||
return dayOfWeek // Keep Sunday-first (0=Sunday, 6=Saturday)
|
||||
return date.getDay() // 0=Sunday, 6=Saturday
|
||||
}
|
||||
|
||||
// Computed property for fallback weekdays - true for the initial day of the event, false for others
|
||||
const fallbackWeekdays = computed(() => {
|
||||
const startingDay = getStartingWeekday()
|
||||
const fallback = [false, false, false, false, false, false, false]
|
||||
@ -117,40 +59,35 @@ const fallbackWeekdays = computed(() => {
|
||||
return fallback
|
||||
})
|
||||
|
||||
// Computed property to handle UI frequency (weeks/months/years) vs store frequency (weeks/months)
|
||||
// Maps UI frequency display (including years) to store frequency (weeks/months only)
|
||||
const displayFrequency = computed({
|
||||
get() {
|
||||
return uiDisplayFrequency.value
|
||||
},
|
||||
set(val) {
|
||||
const oldFreq = uiDisplayFrequency.value
|
||||
const currentDisplayValue = displayInterval.value // Get the current display value before changing
|
||||
const currentDisplayValue = displayInterval.value
|
||||
uiDisplayFrequency.value = val
|
||||
|
||||
if (oldFreq === val) return // No change
|
||||
if (oldFreq === val) return
|
||||
|
||||
if (oldFreq === 'years' && val === 'months') {
|
||||
// Converting from years to months: keep the display value the same, but now it represents months
|
||||
recurrenceFrequency.value = 'months'
|
||||
recurrenceInterval.value = currentDisplayValue // Keep the same number, now as months
|
||||
recurrenceInterval.value = currentDisplayValue
|
||||
} else if (oldFreq === 'months' && val === 'years') {
|
||||
// Converting from months to years: keep the display value the same, but now it represents years
|
||||
recurrenceFrequency.value = 'months'
|
||||
recurrenceInterval.value = currentDisplayValue * 12 // Convert to months for storage
|
||||
recurrenceInterval.value = currentDisplayValue * 12
|
||||
} else if (val === 'years') {
|
||||
// Converting from weeks to years
|
||||
recurrenceFrequency.value = 'months'
|
||||
recurrenceInterval.value = 12 // Default to 1 year
|
||||
recurrenceInterval.value = 12
|
||||
} else if (val === 'months') {
|
||||
// Converting to months from weeks
|
||||
recurrenceFrequency.value = 'months'
|
||||
if (oldFreq === 'weeks') {
|
||||
recurrenceInterval.value = 1 // Default to 1 month
|
||||
recurrenceInterval.value = 1
|
||||
}
|
||||
} else if (val === 'weeks') {
|
||||
// Converting to weeks
|
||||
recurrenceFrequency.value = 'weeks'
|
||||
recurrenceInterval.value = 1 // Default to 1 week
|
||||
recurrenceInterval.value = 1
|
||||
}
|
||||
},
|
||||
})
|
||||
@ -172,11 +109,43 @@ const displayInterval = computed({
|
||||
},
|
||||
})
|
||||
|
||||
// Repeat mapping uses 'weeks' | 'months' | 'none' directly (store only supports weeks/months)
|
||||
const selectedColor = computed({
|
||||
get() {
|
||||
if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
|
||||
return calendarStore.events.get(editingEventId.value).colorId
|
||||
}
|
||||
return colorId.value
|
||||
},
|
||||
set(v) {
|
||||
const n = parseInt(v)
|
||||
if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
|
||||
calendarStore.events.get(editingEventId.value).colorId = n
|
||||
}
|
||||
colorId.value = n
|
||||
},
|
||||
})
|
||||
|
||||
// Maps 0 (unlimited) to 'unlimited' string in store
|
||||
const repeatCountBinding = computed({
|
||||
get() {
|
||||
if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
|
||||
const rc = calendarStore.events.get(editingEventId.value).repeatCount
|
||||
return rc === 'unlimited' ? 0 : parseInt(rc, 10) || 0
|
||||
}
|
||||
return recurrenceOccurrences.value
|
||||
},
|
||||
set(v) {
|
||||
if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
|
||||
calendarStore.events.get(editingEventId.value).repeatCount = v === 0 ? 'unlimited' : String(v)
|
||||
}
|
||||
recurrenceOccurrences.value = v
|
||||
},
|
||||
})
|
||||
|
||||
const repeat = computed({
|
||||
get() {
|
||||
if (!recurrenceEnabled.value) return 'none'
|
||||
return recurrenceFrequency.value // Always 'weeks' | 'months' for store
|
||||
return recurrenceFrequency.value
|
||||
},
|
||||
set(val) {
|
||||
if (val === 'none') {
|
||||
@ -192,18 +161,13 @@ const repeat = computed({
|
||||
}
|
||||
} else if (val === 'months') {
|
||||
recurrenceFrequency.value = 'months'
|
||||
// Don't change UI display frequency here - let it be determined by context
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// Convert Sunday-first recurrenceWeekdays to Sunday-first pattern for store
|
||||
function buildStoreWeekdayPattern() {
|
||||
// store expects Sun..Sat; we have Sun..Sat
|
||||
// Direct mapping: recurrenceWeekdays indices 0..6 (Sun..Sat) -> store array [Sun,Mon,Tue,Wed,Thu,Fri,Sat]
|
||||
let sunFirst = [...recurrenceWeekdays.value]
|
||||
|
||||
// Ensure at least one day is selected - fallback to starting day
|
||||
if (!sunFirst.some(Boolean)) {
|
||||
const startingDay = getStartingWeekday()
|
||||
sunFirst[startingDay] = true
|
||||
@ -214,39 +178,23 @@ function buildStoreWeekdayPattern() {
|
||||
|
||||
function loadWeekdayPatternFromStore(storePattern) {
|
||||
if (!Array.isArray(storePattern) || storePattern.length !== 7) return
|
||||
// store: Sun..Sat -> keep as Sun..Sat
|
||||
recurrenceWeekdays.value = [...storePattern]
|
||||
}
|
||||
|
||||
const selectedColor = computed({
|
||||
get: () => colorId.value,
|
||||
set: (val) => {
|
||||
colorId.value = parseInt(val)
|
||||
// Update the event immediately when color changes
|
||||
if (editingEventId.value) {
|
||||
updateEventInStore()
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
function openCreateDialog(selectionData = null) {
|
||||
// Start a fresh create dialog; delete any prior unsaved create
|
||||
if (unsavedCreateId.value && !eventSaved.value) {
|
||||
if (calendarStore.events?.has(unsavedCreateId.value)) {
|
||||
calendarStore.deleteEvent(unsavedCreateId.value)
|
||||
}
|
||||
unsavedCreateId.value = null
|
||||
}
|
||||
// Reset saved flag for new create
|
||||
const currentSelection = selectionData || props.selection
|
||||
|
||||
// Convert new format to start/end for compatibility with existing logic
|
||||
let start, end
|
||||
if (currentSelection.startDate && currentSelection.dayCount) {
|
||||
start = currentSelection.startDate
|
||||
end = addDaysStr(currentSelection.startDate, currentSelection.dayCount - 1)
|
||||
} else if (currentSelection.start && currentSelection.end) {
|
||||
// Fallback for old format
|
||||
start = currentSelection.start
|
||||
end = currentSelection.end
|
||||
} else {
|
||||
@ -256,11 +204,10 @@ function openCreateDialog(selectionData = null) {
|
||||
|
||||
occurrenceContext.value = null
|
||||
dialogMode.value = 'create'
|
||||
title.value = ''
|
||||
recurrenceEnabled.value = false
|
||||
recurrenceInterval.value = 1
|
||||
recurrenceFrequency.value = 'weeks'
|
||||
uiDisplayFrequency.value = 'weeks' // Set initial UI display mode
|
||||
uiDisplayFrequency.value = 'weeks'
|
||||
recurrenceWeekdays.value = [false, false, false, false, false, false, false]
|
||||
recurrenceOccurrences.value = 0
|
||||
colorId.value = calendarStore.selectEventColorId(start, end)
|
||||
@ -280,12 +227,10 @@ function openCreateDialog(selectionData = null) {
|
||||
recurrenceOccurrences.value === 0 ? 'for now' : String(recurrenceOccurrences.value),
|
||||
repeatWeekdays: buildStoreWeekdayPattern(),
|
||||
})
|
||||
// Track unsaved create id until saved or discarded
|
||||
unsavedCreateId.value = editingEventId.value
|
||||
|
||||
showDialog.value = true
|
||||
|
||||
// Focus and select text after dialog is shown
|
||||
nextTick(() => {
|
||||
if (titleInput.value) {
|
||||
titleInput.value.focus()
|
||||
@ -297,8 +242,6 @@ function openCreateDialog(selectionData = null) {
|
||||
}
|
||||
|
||||
function openEditDialog(payload) {
|
||||
// If we are switching away from an unsaved create to a DIFFERENT event, remove the temporary one.
|
||||
// If user clicked the same newly created event again, keep it (no deletion, no dialog flicker).
|
||||
if (
|
||||
dialogMode.value === 'create' &&
|
||||
unsavedCreateId.value &&
|
||||
@ -313,7 +256,7 @@ function openEditDialog(payload) {
|
||||
}
|
||||
occurrenceContext.value = null
|
||||
if (!payload) return
|
||||
// Payload expected: { id: baseId, instanceId, occurrenceIndex }
|
||||
|
||||
const baseId = payload.id
|
||||
let occurrenceIndex = payload.occurrenceIndex || 0
|
||||
let weekday = null
|
||||
@ -321,7 +264,7 @@ function openEditDialog(payload) {
|
||||
|
||||
const event = calendarStore.getEventById(baseId)
|
||||
if (!event) return
|
||||
// Compute occurrenceDate based on occurrenceIndex rather than parsing instanceId
|
||||
|
||||
if (event.isRepeating) {
|
||||
if (event.repeat === 'weeks' && occurrenceIndex >= 0) {
|
||||
const pattern = event.repeatWeekdays || []
|
||||
@ -331,7 +274,6 @@ function openEditDialog(payload) {
|
||||
occurrenceDate = baseStart
|
||||
weekday = baseStart.getDay()
|
||||
} else {
|
||||
// Count valid repeat occurrences (pattern + interval alignment) AFTER the base span
|
||||
const interval = event.repeatInterval || 1
|
||||
const WEEK_MS = 7 * 86400000
|
||||
const baseBlockStart = getMondayOfISOWeek(baseStart)
|
||||
@ -341,7 +283,7 @@ function openEditDialog(payload) {
|
||||
return diff % interval === 0
|
||||
}
|
||||
let cur = addDays(baseEnd, 1)
|
||||
let found = 0 // number of repeat occurrences found so far
|
||||
let found = 0
|
||||
let safety = 0
|
||||
while (found < occurrenceIndex && safety < 20000) {
|
||||
if (pattern[cur.getDay()] && isAligned(cur)) {
|
||||
@ -361,7 +303,6 @@ function openEditDialog(payload) {
|
||||
}
|
||||
dialogMode.value = 'edit'
|
||||
editingEventId.value = baseId
|
||||
title.value = event.title
|
||||
loadWeekdayPatternFromStore(event.repeatWeekdays)
|
||||
repeat.value = event.repeat // triggers setter mapping into recurrence state
|
||||
if (event.repeatInterval) recurrenceInterval.value = event.repeatInterval
|
||||
@ -370,22 +311,20 @@ function openEditDialog(payload) {
|
||||
if (event.repeat === 'weeks') {
|
||||
uiDisplayFrequency.value = 'weeks'
|
||||
} else if (event.repeat === 'months') {
|
||||
// If it's a yearly interval (multiple of 12), show as years
|
||||
if (event.repeatInterval && event.repeatInterval % 12 === 0 && event.repeatInterval >= 12) {
|
||||
uiDisplayFrequency.value = 'years'
|
||||
} else {
|
||||
uiDisplayFrequency.value = 'months'
|
||||
}
|
||||
} else {
|
||||
uiDisplayFrequency.value = 'weeks' // fallback
|
||||
uiDisplayFrequency.value = 'weeks'
|
||||
}
|
||||
|
||||
// Map repeatCount
|
||||
const rc = event.repeatCount ?? 'unlimited'
|
||||
recurrenceOccurrences.value = rc === 'unlimited' ? 0 : parseInt(rc, 10) || 0
|
||||
colorId.value = event.colorId
|
||||
eventSaved.value = false
|
||||
// Build occurrence context: treat any occurrenceIndex > 0 as a specific occurrence (weekday only relevant for weekly)
|
||||
|
||||
if (event.isRepeating) {
|
||||
if (event.repeat === 'weeks' && occurrenceIndex >= 0) {
|
||||
occurrenceContext.value = { baseId, occurrenceIndex, weekday, occurrenceDate }
|
||||
@ -395,7 +334,6 @@ function openEditDialog(payload) {
|
||||
}
|
||||
showDialog.value = true
|
||||
|
||||
// Focus and select text after dialog is shown
|
||||
nextTick(() => {
|
||||
if (titleInput.value) {
|
||||
titleInput.value.focus()
|
||||
@ -408,7 +346,6 @@ function openEditDialog(payload) {
|
||||
|
||||
function closeDialog() {
|
||||
showDialog.value = false
|
||||
// If we were creating a new event and user cancels (didn't save), delete it
|
||||
if (unsavedCreateId.value && !eventSaved.value) {
|
||||
if (calendarStore.events?.has(unsavedCreateId.value)) {
|
||||
calendarStore.deleteEvent(unsavedCreateId.value)
|
||||
@ -421,11 +358,8 @@ function closeDialog() {
|
||||
function updateEventInStore() {
|
||||
if (!editingEventId.value) return
|
||||
|
||||
// For simple property updates (title, color, repeat), update all instances directly
|
||||
// This avoids the expensive remove/re-add cycle
|
||||
if (calendarStore.events?.has(editingEventId.value)) {
|
||||
const event = calendarStore.events.get(editingEventId.value)
|
||||
event.title = title.value
|
||||
event.colorId = colorId.value
|
||||
event.repeat = repeat.value
|
||||
event.repeatInterval = recurrenceInterval.value
|
||||
@ -440,7 +374,6 @@ function saveEvent() {
|
||||
if (editingEventId.value) updateEventInStore()
|
||||
eventSaved.value = true
|
||||
if (dialogMode.value === 'create') {
|
||||
// This create is now saved; clear tracking so it won't be auto-deleted
|
||||
unsavedCreateId.value = null
|
||||
}
|
||||
if (dialogMode.value === 'create') emit('clear-selection')
|
||||
@ -467,32 +400,11 @@ function deleteEventFrom() {
|
||||
closeDialog()
|
||||
}
|
||||
|
||||
function toggleWeekday(index) {
|
||||
recurrenceWeekdays.value[index] = !recurrenceWeekdays.value[index]
|
||||
}
|
||||
|
||||
// Watch for title changes and update the event immediately
|
||||
watch(title, (newTitle) => {
|
||||
if (editingEventId.value && showDialog.value) {
|
||||
updateEventInStore()
|
||||
}
|
||||
})
|
||||
|
||||
// Watch for dialog being closed unexpectedly and cleanup unsaved events
|
||||
// Removed placeholder watcher
|
||||
|
||||
// Watch for editingEventId changes (switching to a different event while create in progress)
|
||||
// Removed editingEventId placeholder cleanup watcher
|
||||
|
||||
// Cleanup drag listeners on unmount
|
||||
onUnmounted(() => {
|
||||
if (unsavedCreateId.value && !eventSaved.value) {
|
||||
if (calendarStore.events?.has(unsavedCreateId.value))
|
||||
calendarStore.deleteEvent(unsavedCreateId.value)
|
||||
}
|
||||
document.removeEventListener('pointermove', handleDrag)
|
||||
document.removeEventListener('pointerup', stopDrag)
|
||||
document.removeEventListener('pointercancel', stopDrag)
|
||||
})
|
||||
|
||||
watch([recurrenceEnabled, recurrenceInterval, recurrenceFrequency], () => {
|
||||
@ -505,31 +417,12 @@ watch(
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
watch(recurrenceOccurrences, () => {
|
||||
if (editingEventId.value && showDialog.value) updateEventInStore()
|
||||
})
|
||||
|
||||
// Handle Esc key to close dialog
|
||||
function handleKeydown(event) {
|
||||
if (event.key === 'Escape' && showDialog.value) {
|
||||
closeDialog()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleKeydown)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
openCreateDialog,
|
||||
openEditDialog,
|
||||
})
|
||||
|
||||
// Computed helpers for delete UI
|
||||
const isRepeatingEdit = computed(
|
||||
() => dialogMode.value === 'edit' && recurrenceEnabled.value && repeat.value !== 'none',
|
||||
)
|
||||
@ -540,11 +433,8 @@ const isLastOccurrence = computed(() => {
|
||||
const event = calendarStore.getEventById(editingEventId.value)
|
||||
if (!event || !event.isRepeating) return false
|
||||
|
||||
// For unlimited events, there is no "last" occurrence
|
||||
if (event.repeatCount === 'unlimited' || recurrenceOccurrences.value === 0) return false
|
||||
|
||||
// For limited events, check if current occurrence index is the last one
|
||||
// occurrenceIndex is 0-based, so the last occurrence has index (totalCount - 1)
|
||||
const totalCount = parseInt(event.repeatCount, 10) || 0
|
||||
return occurrenceContext.value.occurrenceIndex === totalCount - 1
|
||||
})
|
||||
@ -573,9 +463,7 @@ const formattedOccurrenceShort = computed(() => {
|
||||
return ''
|
||||
})
|
||||
|
||||
// Short date shown in header (works for create, edit base, and occurrence)
|
||||
const headerDateShort = computed(() => {
|
||||
// If editing a specific occurrence use that date
|
||||
if (occurrenceContext.value?.occurrenceDate) {
|
||||
try {
|
||||
return occurrenceContext.value.occurrenceDate
|
||||
@ -585,7 +473,6 @@ const headerDateShort = computed(() => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
// Otherwise use the base event start date (covers create + edit base)
|
||||
if (editingEventId.value) {
|
||||
const ev = calendarStore.getEventById(editingEventId.value)
|
||||
if (ev?.startDate) {
|
||||
@ -604,8 +491,7 @@ const headerDateShort = computed(() => {
|
||||
const finalOccurrenceDate = computed(() => {
|
||||
if (!recurrenceEnabled.value) return null
|
||||
const count = recurrenceOccurrences.value
|
||||
if (!count || count < 1) return null // unlimited or invalid
|
||||
// Need start date
|
||||
if (!count || count < 1) return null
|
||||
const base = editingEventId.value ? calendarStore.getEventById(editingEventId.value) : null
|
||||
if (!base) return null
|
||||
const start = fromLocalString(base.startDate, DEFAULT_TZ)
|
||||
@ -667,12 +553,10 @@ const recurrenceSummary = computed(() => {
|
||||
} else if (uiDisplayFrequency.value === 'years') {
|
||||
return displayInterval.value === 1 ? 'Annually' : `Every ${displayInterval.value} years`
|
||||
}
|
||||
// For months frequency - always check the underlying recurrenceInterval for yearly patterns
|
||||
if (recurrenceFrequency.value === 'months' && recurrenceInterval.value % 12 === 0) {
|
||||
const years = recurrenceInterval.value / 12
|
||||
return years === 1 ? 'Annually' : `Every ${years} years`
|
||||
}
|
||||
// Regular monthly display
|
||||
return displayInterval.value === 1 ? 'Monthly' : `Every ${displayInterval.value} months`
|
||||
})
|
||||
</script>
|
||||
@ -683,7 +567,7 @@ const recurrenceSummary = computed(() => {
|
||||
{{ dialogMode === 'create' ? 'Create Event' : 'Edit Event'
|
||||
}}<template v-if="headerDateShort"> · {{ headerDateShort }}</template>
|
||||
</template>
|
||||
<label class="ec-field" ref="modalRef">
|
||||
<label class="ec-field">
|
||||
<input type="text" v-model="title" autocomplete="off" ref="titleInput" />
|
||||
</label>
|
||||
<div class="ec-color-swatches">
|
||||
@ -728,7 +612,7 @@ const recurrenceSummary = computed(() => {
|
||||
</select>
|
||||
<Numeric
|
||||
class="occ-stepper"
|
||||
v-model="recurrenceOccurrences"
|
||||
v-model="repeatCountBinding"
|
||||
:min="2"
|
||||
:prefix-values="[{ value: 0, display: '∞' }]"
|
||||
number-postfix=" times"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user