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

feat: use module store

Browse Source 
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-02-17 19:11:12 -05:00
parent 6a7b28b86d
commit b663efbb3e
10 changed files with 883 additions and 612 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AgendaView.vue
+53 -34
View File
@@ -9,12 +9,16 @@
</div>
<v-spacer />
<div class="view-selector">
<v-btn size="x-small" variant="text" @click="setSpan('1d')" :color="selectedSpan === '1d' ? 'primary' : undefined">1D</v-btn>
<v-btn size="x-small" variant="text" @click="setSpan('3d')" :color="selectedSpan === '3d' ? 'primary' : undefined">3D</v-btn>
<v-btn size="x-small" variant="text" @click="setSpan('1w')" :color="selectedSpan === '1w' ? 'primary' : undefined">1W</v-btn>
<v-btn size="x-small" variant="text" @click="setSpan('2w')" :color="selectedSpan === '2w' ? 'primary' : undefined">2W</v-btn>
<v-btn size="x-small" variant="text" @click="setSpan('3w')" :color="selectedSpan === '3w' ? 'primary' : undefined">3W</v-btn>
<v-btn size="x-small" variant="text" @click="setSpan('1m')" :color="selectedSpan === '1m' ? 'primary' : undefined">1M</v-btn>
<v-btn
v-for="span in AGENDA_VIEW_SPANS"
:key="span"
size="x-small"
variant="text"
@click="setSpan(span)"
:color="selectedSpan === span ? 'primary' : undefined"
>
{{ span.toUpperCase() }}
</v-btn>
</div>
</div>
<v-list class="agenda-list">
@@ -35,7 +39,7 @@
</template>
<v-list-item-title>{{ entity.properties?.label || 'Untitled' }}</v-list-item-title>
<v-list-item-subtitle>
{{ entity.properties?.timeless ? 'All day' : `${entity.properties?.startsOn ? formatTime(new Date(entity.properties.startsOn)) : ''} - ${entity.properties?.endsOn ? formatTime(new Date(entity.properties.endsOn)) : ''}` }}
{{ getEventProperties(entity).timeless ? 'All day' : `${formatEventDateTime(getEventProperties(entity).startsOn)} - ${formatEventDateTime(getEventProperties(entity).endsOn)}` }}
</v-list-item-subtitle>
</v-list-item>
</template>
@@ -45,23 +49,29 @@
<script setup lang="ts">
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';
type SpanType = '1d' | '3d' | '1w' | '2w' | '3w' | '1m';
type CalendarEntity = EntityObject;
type CalendarCollection = CollectionObject;
const props = defineProps<{
events: any[];
calendars: any[];
events: CalendarEntity[];
calendars: CalendarCollection[];
currentDate?: Date;
initialSpan?: SpanType;
initialSpan?: AgendaViewSpan;
}>();
defineEmits<{
'event-click': [event: any];
}>();
const selectedSpan = ref<SpanType>(props.initialSpan ?? '1w');
const selectedSpan = ref<AgendaViewSpan>(props.initialSpan ?? '1w');
const localDate = ref(new Date(props.currentDate ?? new Date()));
const emit = defineEmits<{
'event-click': [event: CalendarEntity];
'update:span': [span: AgendaViewSpan];
}>();
// Watch for external date changes (e.g., from mini calendar)
watch(() => props.currentDate, (newDate) => {
if (newDate) {
@@ -69,20 +79,19 @@ watch(() => props.currentDate, (newDate) => {
}
});
function setSpan(span: SpanType) {
watch(() => props.initialSpan, (newSpan) => {
if (newSpan && newSpan !== selectedSpan.value) {
selectedSpan.value = newSpan;
}
});
function setSpan(span: AgendaViewSpan) {
selectedSpan.value = span;
emit('update:span', span);
}
function getSpanDays(): number {
switch (selectedSpan.value) {
case '1d': return 1;
case '3d': return 3;
case '1w': return 7;
case '2w': return 14;
case '3w': return 21;
case '1m': return 30;
default: return 7;
}
return spanToDays(selectedSpan.value);
}
function previousPeriod() {
@@ -128,21 +137,22 @@ const dateRangeLabel = computed(() => {
});
const groupedEvents = computed(() => {
const grouped: Record<string, any[]> = {};
const grouped: Record<string, CalendarEntity[]> = {};
const { start, end } = dateRange.value;
const filtered = props.events.filter(e => {
if (!e.properties?.startsOn) return false;
const eventStart = new Date(e.properties.startsOn);
const filtered = props.events.filter((e): e is CalendarEntity => {
const startsOn = getEventProperties(e).startsOn;
if (typeof startsOn !== 'string') return false;
const eventStart = new Date(startsOn);
return eventStart >= start && eventStart <= end;
});
const sorted = filtered.sort((a, b) =>
new Date(a.properties.startsOn).getTime() - new Date(b.properties.startsOn).getTime()
new Date(getEventProperties(a).startsOn || 0).getTime() - new Date(getEventProperties(b).startsOn || 0).getTime()
);
sorted.forEach(entity => {
const dateKey = new Date(entity.properties.startsOn).toDateString();
const dateKey = new Date(getEventProperties(entity).startsOn || 0).toDateString();
if (!grouped[dateKey]) {
grouped[dateKey] = [];
}
@@ -152,16 +162,25 @@ const groupedEvents = computed(() => {
return grouped;
});
function getEventColor(entity: any): string {
if (entity.properties?.color) return entity.properties.color;
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);
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' });
}
function formatEventDateTime(value: string | null): string {
return value ? formatTime(new Date(value)) : '';
}
function formatAgendaDate(dateString: string): string {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {