Fixed errors caused by new event model

This commit is contained in:
Alexis
2024-05-17 17:03:56 +02:00
parent 67f5a270af
commit 5dd06ea3f8
3 changed files with 66 additions and 70 deletions

View File

@@ -2,9 +2,7 @@
import { ref } from 'vue' import { ref } from 'vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { areDatesIdentical, type RPGDate } from '@/models/Date' import { areDatesIdentical, type RPGDate } from '@/models/Date'
import type { CalendarEvent } from '~/models/CalendarEvent' import type { CalendarEvent } from '~/models/CalendarEvent'
import CalendarEventDetails from './CalendarEventDetails.vue'
const props = defineProps<{ const props = defineProps<{
event: CalendarEvent event: CalendarEvent
@@ -32,24 +30,24 @@ function handleClosePopover() {
:class=" :class="
cn({ cn({
'text-white bg-slate-600 hover:bg-slate-700': !event.category, 'text-white bg-slate-600 hover:bg-slate-700': !event.category,
'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance', 'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
'text-white bg-stone-500 hover:bg-stone-700': event.category === 'mort', 'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe', 'text-white bg-orange-600 hover:bg-orange-700': event.category?.name === 'catastrophe',
'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe naturelle', 'text-white bg-pink-600 hover:bg-pink-700': event.category?.name === 'catastrophe naturelle',
'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation', 'text-white bg-sky-600 hover:bg-sky-700': event.category?.name === 'législation',
'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion', 'text-white bg-purple-600 hover:bg-purple-700': event.category?.name === 'religion',
'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs', 'text-white bg-emerald-600 hover:bg-emerald-700': event.category?.name === 'joueurs',
'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration', 'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category?.name === 'inauguration',
'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention', 'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category?.name === 'invention',
'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science', 'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category?.name === 'science',
'text-slate-900 bg-white hover:bg-yellow-200': event.category === 'bénédiction', 'text-slate-900 bg-white hover:bg-yellow-200': event.category?.name === 'bénédiction',
'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category === 'découverte', 'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category?.name === 'découverte',
'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category === 'exploration', 'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category?.name === 'exploration',
'text-white bg-amber-600 hover:bg-amber-700': event.category === 'construction', 'text-white bg-amber-600 hover:bg-amber-700': event.category?.name === 'construction',
'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category === 'arcanologie', 'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category?.name === 'arcanologie',
'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité', 'text-white bg-rose-600 hover:bg-rose-700': event.category?.name === 'criminalité',
'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale', 'text-white bg-stone-600 hover:bg-stone-700': event.category?.name === 'scandale',
'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce', 'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category?.name === 'commerce',
'rounded-r-none': isStartEvent, 'rounded-r-none': isStartEvent,
'rounded-l-none': isEndEvent 'rounded-l-none': isEndEvent
}) })

View File

@@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getRelativeString, type RPGDate } from '@/models/Date' import { getRelativeString, type RPGDate } from '@/models/Date'
import type { CalendarEvent } from '@/models/Events' import type { CalendarEvent } from '@/models/CalendarEvent'
import { useCalendar } from '@/stores/CalendarStore' import { useCalendar } from '@/stores/CalendarStore'
import { useCalendarEvents } from '@/stores/EventStore' import { useCalendarEvents } from '@/stores/EventStore'
@@ -58,24 +58,24 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
:hide-when-detached="true" :hide-when-detached="true"
:class="{ :class="{
'border-slate-800': !event.category, 'border-slate-800': !event.category,
'border-lime-800': event.category === 'naissance', 'border-lime-800': event.category?.name === 'naissance',
'border-stone-600': event.category === 'mort', 'border-stone-600': event.category?.name === 'mort',
'border-orange-800': event.category === 'catastrophe', 'border-orange-800': event.category?.name === 'catastrophe',
'border-pink-800': event.category === 'catastrophe naturelle', 'border-pink-800': event.category?.name === 'catastrophe naturelle',
'border-sky-800': event.category === 'législation', 'border-sky-800': event.category?.name === 'législation',
'border-purple-800': event.category === 'religion', 'border-purple-800': event.category?.name === 'religion',
'border-emerald-800': event.category === 'joueurs', 'border-emerald-800': event.category?.name === 'joueurs',
'border-amber-800': event.category === 'inauguration', 'border-amber-800': event.category?.name === 'inauguration',
'border-green-800': event.category === 'invention', 'border-green-800': event.category?.name === 'invention',
'border-cyan-800': event.category === 'science', 'border-cyan-800': event.category?.name === 'science',
'border-slate-600': event.category === 'bénédiction', 'border-slate-600': event.category?.name === 'bénédiction',
'border-purple-700': event.category === 'découverte', 'border-purple-700': event.category?.name === 'découverte',
'border-indigo-700': event.category === 'exploration', 'border-indigo-700': event.category?.name === 'exploration',
'border-amber-700': event.category === 'construction', 'border-amber-700': event.category?.name === 'construction',
'border-violet-700': event.category === 'arcanologie', 'border-violet-700': event.category?.name === 'arcanologie',
'border-rose-800': event.category === 'criminalité', 'border-rose-800': event.category?.name === 'criminalité',
'border-stone-700': event.category === 'scandale', 'border-stone-700': event.category?.name === 'scandale',
'border-yellow-600': event.category === 'commerce' 'border-yellow-600': event.category?.name === 'commerce'
}" }"
> >
<div class="grid gap-1"> <div class="grid gap-1">
@@ -110,7 +110,7 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
<ul class="flex gap-1"> <ul class="flex gap-1">
<li v-if="event.category"> <li v-if="event.category">
<UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary"> <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
{{ event.category }} {{ event.category?.name }}
</UiBadge> </UiBadge>
</li> </li>

View File

@@ -1,10 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getRelativeString, type RPGDate } from '@/models/Date' import { getRelativeString, type RPGDate } from '@/models/Date'
import type { CalendarEvent } from '@/models/Events' import type { CalendarEvent } from '@/models/CalendarEvent'
import { useCalendar } from '@/stores/CalendarStore' import { useCalendar } from '@/stores/CalendarStore'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { PhArrowSquareOut, PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue' import { PhArrowSquareOut, PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
const props = defineProps<{ const props = defineProps<{
@@ -24,28 +22,28 @@ const dateDuration: string | null = props.event.endDate
</script> </script>
<template> <template>
<button <Uibutton
class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors" class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
:class="{ :class="{
'text-white bg-slate-600 hover:bg-slate-700': !event.category, 'text-white bg-slate-600 hover:bg-slate-700': !event.category,
'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance', 'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
'text-white bg-stone-500 hover:bg-stone-700': event.category === 'mort', 'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe', 'text-white bg-orange-600 hover:bg-orange-700': event.category?.name === 'catastrophe',
'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe naturelle', 'text-white bg-pink-600 hover:bg-pink-700': event.category?.name === 'catastrophe naturelle',
'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation', 'text-white bg-sky-600 hover:bg-sky-700': event.category?.name === 'législation',
'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion', 'text-white bg-purple-600 hover:bg-purple-700': event.category?.name === 'religion',
'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs', 'text-white bg-emerald-600 hover:bg-emerald-700': event.category?.name === 'joueurs',
'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration', 'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category?.name === 'inauguration',
'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention', 'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category?.name === 'invention',
'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science', 'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category?.name === 'science',
'text-slate-900 bg-white hover:bg-yellow-200': event.category === 'bénédiction', 'text-slate-900 bg-white hover:bg-yellow-200': event.category?.name === 'bénédiction',
'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category === 'découverte', 'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category?.name === 'découverte',
'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category === 'exploration', 'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category?.name === 'exploration',
'text-white bg-amber-600 hover:bg-amber-700': event.category === 'construction', 'text-white bg-amber-600 hover:bg-amber-700': event.category?.name === 'construction',
'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category === 'arcanologie', 'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category?.name === 'arcanologie',
'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité', 'text-white bg-rose-600 hover:bg-rose-700': event.category?.name === 'criminalité',
'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale', 'text-white bg-stone-600 hover:bg-stone-700': event.category?.name === 'scandale',
'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce' 'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category?.name === 'commerce'
}" }"
@click="$emit('query:date-jump', event.startDate)" @click="$emit('query:date-jump', event.startDate)"
> >
@@ -54,12 +52,12 @@ const dateDuration: string | null = props.event.endDate
{{ event.title }} {{ event.title }}
</h2> </h2>
<div v-if="event.wiki"> <div v-if="event.wiki">
<Button variant="link" size="xs" as-child class="text-inherit"> <UiButton variant="link" size="xs" as-child class="text-inherit">
<a :href="event.wiki" target="_blank"> <a :href="event.wiki" target="_blank">
Wiki Wiki
<PhArrowSquareOut size="16" weight="fill" /> <PhArrowSquareOut size="16" weight="fill" />
</a> </a>
</Button> </UiButton>
</div> </div>
</div> </div>
@@ -91,15 +89,15 @@ const dateDuration: string | null = props.event.endDate
<div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4"> <div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
<ul class="flex gap-1"> <ul class="flex gap-1">
<li v-if="event.category"> <li v-if="event.category">
<Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary"> <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
{{ event.category }} {{ event.category?.name }}
</Badge> </UiBadge>
</li> </li>
<li v-for="cat in event.secondaryCategories" :key="cat"> <li v-for="cat in event.secondaryCategories" :key="cat">
<Badge class="mix-blend-luminosity bg-gray-600" variant="secondary"> <UiBadge class="mix-blend-luminosity bg-gray-600" variant="secondary">
{{ cat }} {{ cat }}
</Badge> </UiBadge>
</li> </li>
</ul> </ul>
</div> </div>
@@ -110,5 +108,5 @@ const dateDuration: string | null = props.event.endDate
{{ event.description }} {{ event.description }}
</span> </span>
</div> </div>
</button> </Uibutton>
</template> </template>