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

refactor: code clean up

Browse Source 
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-07-06 21:09:07 -04:00
parent dea5a61811
commit df531908f3
19 changed files with 594 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CalendarView.vue
+56 -72
View File
@@ -1,3 +1,59 @@
<script setup lang="ts">
import { ref } from 'vue';
import MonthView from './MonthView.vue';
import DaysView from './DaysView.vue';
import AgendaView from './AgendaView.vue';
import EventViewerPopup from './EventViewerPopup.vue';
import {
type AgendaViewSpan,
type DaysViewSpan
} from '@/types/spans';
import type { EntityObject } from '@ChronoManager/models/entity';
import type { CollectionObject } from '@ChronoManager/models/collection';
const props = defineProps<{
view: 'days' | 'month' | 'agenda';
currentDate: Date;
calendars: CollectionObject[];
initialDaysSpan?: DaysViewSpan;
initialAgendaViewSpan?: AgendaViewSpan;
}>();
const emit = defineEmits<{
'event-click': [event: EntityObject];
'date-click': [date: Date];
'update:current-date': [date: Date];
'update:days-span': [span: DaysViewSpan];
'update:agenda-span': [span: AgendaViewSpan];
}>();
// Popup state
const hoveredEvent = ref<EntityObject | null>(null);
const popupPosition = ref({ x: 0, y: 0 });
const showPopup = ref(false);
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
function handleEventHover(data: { event: MouseEvent; entity: EntityObject }) {
if (hideTimeout) {
clearTimeout(hideTimeout);
hideTimeout = null;
}
hoveredEvent.value = data.entity;
popupPosition.value = {
x: data.event.clientX,
y: data.event.clientY
};
showPopup.value = true;
}
function hidePopup() {
hideTimeout = setTimeout(() => {
showPopup.value = false;
hoveredEvent.value = null;
}, 200);
}
</script>
<template>
<div class="calendar-view-container">
<EventViewerPopup
@@ -40,78 +96,6 @@
</div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import MonthView from './MonthView.vue';
import DaysView from './DaysView.vue';
import AgendaView from './AgendaView.vue';
import EventViewerPopup from './EventViewerPopup.vue';
import { spanToDays, type AgendaViewSpan, type DaysViewSpan } from '@/types/spans';
import type { EntityObject } from '@ChronoManager/models/entity';
import type { CollectionObject } from '@ChronoManager/models/collection';
import type { VisibleDateRange } from '@/types';
import { daysVisibleRange, monthGridVisibleRange } from '@/utils/date.ts';
const props = defineProps<{
view: 'days' | 'month' | 'agenda';
currentDate: Date;
calendars: CollectionObject[];
initialDaysSpan?: DaysViewSpan;
initialAgendaViewSpan?: AgendaViewSpan;
}>();
const emit = defineEmits<{
'event-click': [event: EntityObject];
'date-click': [date: Date];
'update:days-span': [span: DaysViewSpan];
'update:agenda-span': [span: AgendaViewSpan];
'update:current-date': [date: Date];
'update:visible-range': [range: VisibleDateRange];
}>();
const visibleRange = computed(() => {
if (props.view === 'month') {
return monthGridVisibleRange(props.currentDate);
}
const span = props.view === 'agenda'
? props.initialAgendaViewSpan ?? '1w'
: props.initialDaysSpan ?? '7d';
return daysVisibleRange(props.currentDate, spanToDays(span));
});
watch(visibleRange, range => {
emit('update:visible-range', range);
}, { immediate: true });
// Popup state
const hoveredEvent = ref<EntityObject | null>(null);
const popupPosition = ref({ x: 0, y: 0 });
const showPopup = ref(false);
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
function handleEventHover(data: { event: MouseEvent; entity: EntityObject }) {
if (hideTimeout) {
clearTimeout(hideTimeout);
hideTimeout = null;
}
hoveredEvent.value = data.entity;
popupPosition.value = {
x: data.event.clientX,
y: data.event.clientY
};
showPopup.value = true;
}
function hidePopup() {
hideTimeout = setTimeout(() => {
showPopup.value = false;
hoveredEvent.value = null;
}, 200);
}
</script>
<style scoped>
.calendar-view-container {
height: 100%;