311 lines
9.2 KiB
TypeScript
311 lines
9.2 KiB
TypeScript
import type { CalendarEvent } from "@/models/CalendarEvent"
|
|
import type { RPGDate } from "@/models/Date"
|
|
import { defineStore } from "pinia"
|
|
import { ref, watch, type Ref } from "vue"
|
|
import type { Category } from "~/models/Category"
|
|
import { useCalendar } from "./CalendarStore"
|
|
|
|
export const useCalendarEvents = defineStore("calendar-events", () => {
|
|
const { activeCalendar, defaultDate, currentConfig, convertDateToDays, compareDates } = useCalendar()
|
|
const { currentRPGDate } = storeToRefs(useCalendar())
|
|
|
|
const baseEvents = ref<CalendarEvent[]>([])
|
|
|
|
async function fetchCalendarEvents(calendarId: number) {
|
|
try {
|
|
const res = await $fetch("/api/calendars/events/query", { query: { calendarId } })
|
|
|
|
const eventData = res.data as CalendarEvent[]
|
|
|
|
if (!eventData.length) return
|
|
|
|
baseEvents.value = eventData
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
const categories = ref<Category[]>([])
|
|
|
|
function setCategories(data: Category[]) {
|
|
categories.value = data
|
|
}
|
|
|
|
// Order base events by dates
|
|
const allEvents = computed(() => baseEvents.value.sort((a, b) => {
|
|
return compareDates(a.startDate, b.startDate, "desc")
|
|
}))
|
|
|
|
// Gets all current event in its default state
|
|
const currentEvents: Ref<CalendarEvent[]> = ref([])
|
|
|
|
// Watch for currentDate or events' list changes
|
|
// This is deep because we're watching an array, and changes need to trigger and mutations like .push and .splice
|
|
watch([currentRPGDate, allEvents], () => {
|
|
currentEvents.value = computeCurrentEvents()
|
|
}, { deep: true, immediate: true })
|
|
|
|
/**
|
|
* Determines if the event can appear in the front end
|
|
*
|
|
* This function takes into consideration the viewType of the calendar config
|
|
*
|
|
* @param event The event to analyze
|
|
* @returns Whether the event should appear in the current view
|
|
*/
|
|
function shouldEventBeDisplayed(event: CalendarEvent): boolean {
|
|
const isEventOnCurrentScreen =
|
|
(event.startDate.year === currentRPGDate.value.day &&
|
|
event.startDate.month === currentRPGDate.value.month) ||
|
|
(event.endDate &&
|
|
event.endDate.year === currentRPGDate.value.year &&
|
|
event.endDate.month === currentRPGDate.value.month)
|
|
|
|
switch (currentConfig.viewType) {
|
|
case "month":
|
|
return isEventOnCurrentScreen!
|
|
|
|
case "year":
|
|
return event.startDate.year === currentRPGDate.value.year
|
|
|
|
case "decade":
|
|
return (
|
|
event.startDate.year >= currentRPGDate.value.year &&
|
|
event.startDate.year <= currentRPGDate.value.year + 10
|
|
)
|
|
|
|
case "century":
|
|
return (
|
|
event.startDate.year >= currentRPGDate.value.year &&
|
|
event.startDate.year <= currentRPGDate.value.year + 100
|
|
)
|
|
|
|
default:
|
|
return false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fetches all the current events for the current view
|
|
*
|
|
* @returns A list of events that can appear in the current view
|
|
*/
|
|
function computeCurrentEvents(): CalendarEvent[] {
|
|
return allEvents.value.filter((event) => shouldEventBeDisplayed(event))
|
|
}
|
|
|
|
/**
|
|
* From a base event, gets the next or previous one in the timeline
|
|
*
|
|
* @param event The event at a given position in the data
|
|
* @param position Whether we should get the next or previous event
|
|
* @returns The next event in chronological order
|
|
*/
|
|
function getRelativeEventFromEvent(
|
|
event: CalendarEvent,
|
|
position: "next" | "prev" = "next",
|
|
initialIsEnd: boolean = false
|
|
): { event: CalendarEvent; targetDate: RPGDate } {
|
|
let dateToParse: RPGDate // Day value of the date that the user interacted with
|
|
|
|
if (initialIsEnd && event.endDate) {
|
|
dateToParse = event.endDate
|
|
} else {
|
|
dateToParse = event.startDate
|
|
}
|
|
|
|
return getRelativeEventFromDate(dateToParse, position)
|
|
}
|
|
|
|
/**
|
|
* From a date, gets the next or previous event in the timeline
|
|
*
|
|
* @param date The starting date from which to get the next event
|
|
* @param position Whether we should get the next or previous event
|
|
* @returns The next event in chronological order
|
|
*/
|
|
function getRelativeEventFromDate(
|
|
date: RPGDate,
|
|
position: "next" | "prev" = "next"
|
|
): { event: CalendarEvent; targetDate: RPGDate } {
|
|
const pivotValue = convertDateToDays(date)
|
|
let t: { eventData: CalendarEvent; distance: number; targetKey: "startDate" | "endDate" }[] = []
|
|
|
|
// Loop over all event once to convert the structure to a usable one
|
|
for (let i = 0; i < allEvents.value.length; i++) {
|
|
const e: CalendarEvent = allEvents.value[i]
|
|
|
|
// Estimate distance from pivot
|
|
const startDateDays: number = convertDateToDays(e.startDate)
|
|
const startDistance: number = startDateDays - pivotValue
|
|
|
|
// Push startDate to comparator array
|
|
t.push({
|
|
eventData: e,
|
|
distance: startDistance,
|
|
targetKey: "startDate"
|
|
})
|
|
|
|
// Check the same things for endDate
|
|
if (e.endDate) {
|
|
const endDateDays: number = convertDateToDays(e.endDate)
|
|
const endDistance: number = endDateDays - pivotValue
|
|
|
|
// Push optional endDate to comparator array
|
|
t.push({
|
|
eventData: e,
|
|
distance: endDistance,
|
|
targetKey: "endDate"
|
|
})
|
|
}
|
|
}
|
|
|
|
// Based on the direction, either ignore negative distance (past) or positive distance (future)
|
|
t = t.filter((i) => {
|
|
return position === "next" ? i.distance > 0 : i.distance < 0
|
|
})
|
|
|
|
if (!t.length) {
|
|
throw new Error(
|
|
"Aucun évènement suivant ou précédent trouvé ; Peut-être l'évènement se situe au début ou à la fin du calendrier ?"
|
|
)
|
|
}
|
|
|
|
// Get event with remaining minimum distance
|
|
const closestEvent = t.reduce((a, b) => {
|
|
return Math.abs(b.distance) < Math.abs(a.distance) ? b : a
|
|
})
|
|
|
|
return {
|
|
event: closestEvent.eventData,
|
|
targetDate: closestEvent.eventData[closestEvent.targetKey]!
|
|
}
|
|
}
|
|
|
|
/**
|
|
* State for event modal edition
|
|
*/
|
|
const isEditEventModalOpen: Ref<boolean> = ref<boolean>(false)
|
|
|
|
function revealEditEventModal() {
|
|
isEditEventModalOpen.value = true
|
|
}
|
|
|
|
/**
|
|
* State for event modal edition
|
|
*/
|
|
const isDeleteEventModalOpen: Ref<boolean> = ref<boolean>(false)
|
|
|
|
function revealDeleteEventModal() {
|
|
isDeleteEventModalOpen.value = true
|
|
}
|
|
|
|
/**
|
|
* EVENT CREATION FUNCTIONS
|
|
*/
|
|
const lastActiveEvent = ref<CalendarEvent | null>()
|
|
const isCreatingEvent = ref<boolean>(false)
|
|
const isUpdatingEvent = ref<boolean>(false)
|
|
const isDeletingEvent = ref<boolean>(false)
|
|
const operationInProgress = computed(() => isCreatingEvent.value || isUpdatingEvent.value || isDeletingEvent.value)
|
|
let abortController: AbortController | null = null
|
|
|
|
/**
|
|
* Dummy event to hold creation data
|
|
*/
|
|
const eventSkeleton: Ref<CalendarEvent> = ref<CalendarEvent>({ title: "", startDate: defaultDate })
|
|
|
|
/**
|
|
* Resets the dummy event data
|
|
*/
|
|
function resetSkeleton() {
|
|
eventSkeleton.value = { title: "", startDate: defaultDate }
|
|
}
|
|
|
|
/**
|
|
* Submits the skeleton event and creates a real event from its data
|
|
*
|
|
* We assume it's been sanitized by the caller
|
|
*/
|
|
async function submitSkeleton() {
|
|
abortController = new AbortController()
|
|
isCreatingEvent.value = true
|
|
|
|
try {
|
|
const res = await $fetch("/api/calendars/events/create", { method: "POST", body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal })
|
|
|
|
baseEvents.value.push(res)
|
|
} catch (err) {
|
|
console.log(err)
|
|
} finally {
|
|
abortController = null
|
|
isCreatingEvent.value = false
|
|
}
|
|
}
|
|
|
|
async function updateEventFromSkeleton() {
|
|
abortController = new AbortController()
|
|
isUpdatingEvent.value = true
|
|
|
|
try {
|
|
const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: "PATCH", body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal })
|
|
|
|
const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
|
|
baseEvents.value[eventIndex] = res
|
|
} catch (err) {
|
|
console.log(err)
|
|
} finally {
|
|
abortController = null
|
|
isUpdatingEvent.value = false
|
|
}
|
|
}
|
|
|
|
async function deleteEventFromSkeleton() {
|
|
abortController = new AbortController()
|
|
isDeletingEvent.value = true
|
|
|
|
try {
|
|
await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: "DELETE", signal: abortController.signal })
|
|
|
|
const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
|
|
baseEvents.value.splice(eventIndex, 1)
|
|
} catch (err) {
|
|
console.log(err)
|
|
} finally {
|
|
abortController = null
|
|
isDeletingEvent.value = false
|
|
}
|
|
}
|
|
|
|
function cancelLatestRequest() {
|
|
if (abortController) {
|
|
abortController.abort()
|
|
}
|
|
}
|
|
|
|
return {
|
|
allEvents,
|
|
fetchCalendarEvents,
|
|
categories,
|
|
setCategories,
|
|
currentEvents,
|
|
getRelativeEventFromDate,
|
|
getRelativeEventFromEvent,
|
|
cancelLatestRequest,
|
|
isCreatingEvent,
|
|
isUpdatingEvent,
|
|
isDeletingEvent,
|
|
operationInProgress,
|
|
eventSkeleton,
|
|
resetSkeleton,
|
|
submitSkeleton,
|
|
lastActiveEvent,
|
|
updateEventFromSkeleton,
|
|
deleteEventFromSkeleton,
|
|
isEditEventModalOpen,
|
|
revealEditEventModal,
|
|
isDeleteEventModalOpen,
|
|
revealDeleteEventModal
|
|
}
|
|
})
|