Refactored the store system
This commit is contained in:
Alexis
@@ -5,7 +5,10 @@ import {
|
||||
import { useLocalStorage, useUrlSearchParams } from '@vueuse/core'
|
||||
import { defineStore, skipHydrate } from 'pinia'
|
||||
import { computed, ref, type ComputedRef, type Ref } from 'vue'
|
||||
import type { Calendar } from '~/models/CalendarConfig'
|
||||
import type { CalendarEvent } from '~/models/CalendarEvent'
|
||||
import type { CalendarMonth } from '~/models/CalendarMonth'
|
||||
import type { Category } from '~/models/Category'
|
||||
|
||||
type CalendarViewType = 'month' | 'year' | 'decade' | 'century'
|
||||
|
||||
@@ -27,7 +30,6 @@ export const useCalendar = defineStore('calendar', () => {
|
||||
|
||||
/**
|
||||
* Static calendar config
|
||||
* This shouldn't change
|
||||
*/
|
||||
const currentConfig: Ref<CalendarCurrentConfig> = ref({
|
||||
viewType: 'month'
|
||||
@@ -37,18 +39,33 @@ export const useCalendar = defineStore('calendar', () => {
|
||||
'year'
|
||||
])
|
||||
|
||||
const calendarId = ref<number>(0)
|
||||
const activeCalendar = ref<{ id: number; name: string; today: RPGDate} | null>(null)
|
||||
|
||||
function setCalendarId(data: number) {
|
||||
calendarId.value = data
|
||||
}
|
||||
/**
|
||||
* Month list (queried from API)
|
||||
*/
|
||||
const months: Ref<CalendarMonth[]> = ref<CalendarMonth[]>([])
|
||||
|
||||
function setMonths(data: CalendarMonth[]) {
|
||||
months.value = data
|
||||
async function fetchCalendar(id: number) {
|
||||
try {
|
||||
const res = await $fetch('/api/calendars/query', { query: { id, full: true } })
|
||||
|
||||
const calendarData = res.data as Calendar
|
||||
|
||||
if (!calendarData.id) return
|
||||
|
||||
activeCalendar.value = {
|
||||
id: calendarData.id,
|
||||
name: calendarData.name,
|
||||
today: calendarData.today
|
||||
}
|
||||
|
||||
months.value = calendarData.months
|
||||
|
||||
baseEvents.value = calendarData.events
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -98,7 +115,7 @@ export const useCalendar = defineStore('calendar', () => {
|
||||
*/
|
||||
function setDefaultDate(date: RPGDate) {
|
||||
defaultDay.value = date.day
|
||||
defaultMonth.value = date.month
|
||||
defaultMonth.value = date.month as number
|
||||
defaultYear.value = date.year
|
||||
}
|
||||
|
||||
@@ -160,9 +177,9 @@ export const useCalendar = defineStore('calendar', () => {
|
||||
|
||||
const currentRPGDate = computed<RPGDate>(() => {
|
||||
return {
|
||||
day: currentDate.currentDay.value,
|
||||
month: currentDate.currentMonth.value,
|
||||
year: currentDate.currentYear.value,
|
||||
day: currentDay.value,
|
||||
month: currentMonth.value,
|
||||
year: currentYear.value,
|
||||
}
|
||||
})
|
||||
|
||||
@@ -622,11 +639,280 @@ export const useCalendar = defineStore('calendar', () => {
|
||||
}
|
||||
}
|
||||
|
||||
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[]>([])
|
||||
|
||||
// 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.value.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.value })
|
||||
|
||||
/**
|
||||
* Resets the dummy event data
|
||||
*/
|
||||
function resetSkeleton() {
|
||||
eventSkeleton.value = { title: '', startDate: defaultDate.value }
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.value?.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.value?.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 {
|
||||
calendarId,
|
||||
setCalendarId,
|
||||
fetchCalendar,
|
||||
activeCalendar,
|
||||
months,
|
||||
setMonths,
|
||||
sortedMonths,
|
||||
daysPerYear,
|
||||
monthsPerYear,
|
||||
@@ -661,5 +947,27 @@ export const useCalendar = defineStore('calendar', () => {
|
||||
areDatesIdentical,
|
||||
compareDates,
|
||||
getRelativeString,
|
||||
baseEvents,
|
||||
allEvents,
|
||||
fetchCalendarEvents,
|
||||
categories,
|
||||
currentEvents,
|
||||
getRelativeEventFromDate,
|
||||
getRelativeEventFromEvent,
|
||||
cancelLatestRequest,
|
||||
isCreatingEvent,
|
||||
isUpdatingEvent,
|
||||
isDeletingEvent,
|
||||
operationInProgress,
|
||||
eventSkeleton,
|
||||
resetSkeleton,
|
||||
submitSkeleton,
|
||||
lastActiveEvent,
|
||||
updateEventFromSkeleton,
|
||||
deleteEventFromSkeleton,
|
||||
isEditEventModalOpen,
|
||||
revealEditEventModal,
|
||||
isDeleteEventModalOpen,
|
||||
revealDeleteEventModal
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user