broke up the mega monolith that is the calendar file
This commit is contained in:
28
ui/src/composables/useCalendarEvents.ts
Normal file
28
ui/src/composables/useCalendarEvents.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { getMonthCalendarEvents } from "@/api/calendar";
|
||||
import type { CalendarEventShort } from "@shared/types/calendar";
|
||||
|
||||
export function useCalendarEvents(selectedMonth, selectedYear) {
|
||||
const events = ref([]);
|
||||
|
||||
function toCalEvent(e: CalendarEventShort) {
|
||||
return {
|
||||
id: e.id.toString(),
|
||||
title: e.name,
|
||||
start: new Date(e.start),
|
||||
end: e.end ? new Date(e.end) : undefined,
|
||||
extendedProps: { color: e.color },
|
||||
};
|
||||
}
|
||||
|
||||
async function loadEvents() {
|
||||
const date = new Date(selectedYear.value, selectedMonth.value, 1);
|
||||
const monthEvents = await getMonthCalendarEvents(date);
|
||||
events.value = monthEvents.map(toCalEvent);
|
||||
}
|
||||
|
||||
watch([selectedMonth, selectedYear], loadEvents);
|
||||
onMounted(loadEvents);
|
||||
|
||||
return { events, loadEvents };
|
||||
}
|
||||
33
ui/src/composables/useCalendarNavigation.ts
Normal file
33
ui/src/composables/useCalendarNavigation.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { ref } from "vue";
|
||||
|
||||
export function useCalendarNavigation(calendarApiGetter: () => any) {
|
||||
const selectedMonth = ref(new Date().getMonth());
|
||||
const selectedYear = ref(new Date().getFullYear());
|
||||
|
||||
const years = Array.from({ length: 41 }, (_, i) => selectedYear.value - 20 + i);
|
||||
|
||||
function goPrev() { calendarApiGetter()?.prev(); }
|
||||
function goNext() { calendarApiGetter()?.next(); }
|
||||
function goToday() { calendarApiGetter()?.today(); }
|
||||
|
||||
function onDatesSet() {
|
||||
const d = calendarApiGetter()?.getDate() ?? new Date();
|
||||
selectedMonth.value = d.getMonth();
|
||||
selectedYear.value = d.getFullYear();
|
||||
}
|
||||
|
||||
function goToSelectedDate() {
|
||||
calendarApiGetter()?.gotoDate(new Date(selectedYear.value, selectedMonth.value, 1));
|
||||
}
|
||||
|
||||
return {
|
||||
selectedMonth,
|
||||
selectedYear,
|
||||
years,
|
||||
goPrev,
|
||||
goNext,
|
||||
goToday,
|
||||
onDatesSet,
|
||||
goToSelectedDate,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user