Nodarx/chrono
1
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Projects Releases Activity

feat: recurrence expansion.

Browse Source 
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-06-29 22:19:38 -04:00
parent cd270e9e99
commit acbe0ad5ca
8 changed files with 478 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AgendaView.vue
+2 -8
View File
@@ -37,7 +37,7 @@
<template #prepend>
<v-icon :color="getEventColor(occurrence)">mdi-circle</v-icon>
</template>
<v-list-item-title>{{ occurrence.entity.properties?.label || 'Untitled' }}</v-list-item-title>
<v-list-item-title>{{ occurrence.label || 'Untitled' }}</v-list-item-title>
<v-list-item-subtitle>
{{ occurrence.timeless ? 'All day' : `${formatOccurrenceTime(occurrence.startMs)} - ${formatOccurrenceTime(occurrence.endMs)}` }}
</v-list-item-subtitle>
@@ -52,7 +52,6 @@ import { ref, computed, watch } from 'vue';
import { AGENDA_VIEW_SPANS, spanToDays, type AgendaViewSpan } from '@/types/spans';
import type { EntityObject } from '@ChronoManager/models/entity';
import type { CollectionObject } from '@ChronoManager/models/collection';
import { EventObject } from '@ChronoManager/models/event';
import { daysVisibleRange, shiftLocalDays } from '@/utils/dateRanges';
import { occurrencesForRange } from '@/utils/occurrenceIndex';
import type { CalendarOccurrence, CalendarOccurrenceIndex } from '@/types/occurrence';
@@ -149,16 +148,11 @@ const groupedEvents = computed(() => {
function getEventColor(occurrence: CalendarOccurrence): string {
const entity = occurrence.entity;
const event = getEventProperties(entity);
if (event.color) return event.color;
if (occurrence.color) return occurrence.color;
const calendar = props.calendars.find(cal => cal.identifier === entity.collection);
return calendar?.properties?.color || '#1976D2';
}
function getEventProperties(entity: CalendarEntity): EventObject {
return entity.properties as EventObject;
}
function formatTime(date: Date): string {
return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
}
src/components/DaysView.vue
+8 -14
View File
@@ -56,7 +56,7 @@
@mouseenter="emit('event-hover', { event: $event, entity: segment.occurrence.entity })"
@mouseleave="emit('event-hover-end')"
>
<span v-if="segment.isStart" class="event-label">{{ segment.occurrence.entity.properties?.label || 'Untitled' }}</span>
<span v-if="segment.isStart" class="event-label">{{ segment.occurrence.label || 'Untitled' }}</span>
</div>
</div>
</div>
@@ -85,10 +85,10 @@
<div class="event-time">
{{ formatOccurrenceTime(occurrence.startMs) }} - {{ formatOccurrenceTime(occurrence.endMs) }}
</div>
<div class="event-title">{{ getEventProperties(occurrence.entity).label || 'Untitled' }}</div>
<div class="event-title">{{ occurrence.label || 'Untitled' }}</div>
</template>
<template v-else>
<div class="event-title-compact">{{ getEventProperties(occurrence.entity).label || 'Untitled' }}</div>
<div class="event-title-compact">{{ occurrence.label || 'Untitled' }}</div>
</template>
</div>
</div>
@@ -110,7 +110,6 @@ import { shiftLocalDays } from '@/utils/dateRanges';
import { DAYS_VIEW_SPANS, spanToDays, type DaysViewSpan } from '@/types/spans';
import type { EntityObject } from '@ChronoManager/models/entity';
import type { CollectionObject } from '@ChronoManager/models/collection';
import { EventObject } from '@ChronoManager/models/event';
import { occurrencesForDay, occurrencesForRange } from '@/utils/occurrenceIndex';
import type { CalendarOccurrence, CalendarOccurrenceIndex } from '@/types/occurrence';
@@ -223,20 +222,15 @@ function getTimedEvents(date: Date): CalendarOccurrence[] {
return occurrencesForDay(props.occurrenceIndex, date).filter(occurrence => !occurrence.timeless);
}
function getEventProperties(entity: CalendarEntity): EventObject {
return entity.properties as EventObject;
}
function getEventColor(entity: CalendarEntity): string {
const event = getEventProperties(entity);
if (event.color) return event.color;
const calendar = props.calendars.find(cal => cal.identifier === entity.collection);
function getEventColor(occurrence: CalendarOccurrence): string {
if (occurrence.color) return occurrence.color;
const calendar = props.calendars.find(cal => cal.identifier === occurrence.entity.collection);
return calendar?.properties?.color || '#1976D2';
}
function getAllDayEventStyle(segment: MultiDaySegment) {
return {
backgroundColor: getEventColor(segment.occurrence.entity),
backgroundColor: getEventColor(segment.occurrence),
left: `calc(${segment.startCol} / ${daysCount.value} * 100% + 4px)`,
width: `calc(${segment.span} / ${daysCount.value} * 100% - 8px)`,
top: `${segment.lane * ALL_DAY_EVENT_HEIGHT}px`,
@@ -251,7 +245,7 @@ function getEventStyle(occurrence: CalendarOccurrence) {
return {
top: `${(start / 1440) * 100}%`,
height: `${(duration / 1440) * 100}%`,
backgroundColor: getEventColor(occurrence.entity),
backgroundColor: getEventColor(occurrence),
};
}
src/components/MonthView.vue
+7 -7
View File
@@ -161,9 +161,9 @@ function isToday(date: Date): boolean {
return date.toDateString() === today.toDateString();
}
function getEventColor(entity: CalendarOccurrence['entity']): string {
if (entity.properties?.color) return entity.properties.color;
const calendar = props.calendars.find(cal => cal.identifier === entity.collection);
function getEventColor(occurrence: CalendarOccurrence): string {
if (occurrence.color) return occurrence.color;
const calendar = props.calendars.find(cal => cal.identifier === occurrence.entity.collection);
return calendar?.properties?.color || '#1976D2';
}
</script>
@@ -214,12 +214,12 @@ function getEventColor(entity: CalendarOccurrence['entity']): string {
v-for="occurrence in getSingleDayEvents(cell.date).slice(0, MAX_VISIBLE_EVENTS - week.laneCount)"
:key="occurrence.key"
class="single-day-event"
:style="{ backgroundColor: getEventColor(occurrence.entity) }"
:style="{ backgroundColor: getEventColor(occurrence) }"
@click.stop="$emit('event-click', occurrence.entity)"
@mouseenter="$emit('event-hover', { event: $event, entity: occurrence.entity })"
@mouseleave="$emit('event-hover-end')"
>
{{ occurrence.entity.properties?.label || 'Untitled' }}
{{ occurrence.label || 'Untitled' }}
</div>
<div
v-if="getHiddenCount(cell, week.laneCount) > 0"
@@ -243,7 +243,7 @@ function getEventColor(entity: CalendarOccurrence['entity']): string {
'is-end': segment.isEnd,
}"
:style="{
backgroundColor: getEventColor(segment.occurrence.entity),
backgroundColor: getEventColor(segment.occurrence),
left: `calc(${segment.startCol} / 7 * 100% + 4px)`,
width: `calc(${segment.span} / 7 * 100% - 8px)`,
top: `${34 + segment.lane * EVENT_HEIGHT}px`,
@@ -253,7 +253,7 @@ function getEventColor(entity: CalendarOccurrence['entity']): string {
@mouseleave="$emit('event-hover-end')"
>
<span v-if="segment.isStart" class="event-label">
{{ segment.occurrence.entity.properties?.label || 'Untitled' }}
{{ segment.occurrence.label || 'Untitled' }}
</span>
</div>
</div>