Refactored callouts into their own components
This commit is contained in:
Alexis
85
src/components/calendar/search/lists/CharacterCallout.vue
Normal file
85
src/components/calendar/search/lists/CharacterCallout.vue
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { Character } from '@/models/Characters'
|
||||||
|
import type { LeimDate } from '@/models/Date'
|
||||||
|
import { useCalendar } from '@/stores/CalendarStore'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
character: Character
|
||||||
|
}>()
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
(e: 'query:date-jump', payload: LeimDate): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const { getFormattedDateTitle } = useCalendar()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="block w-full text-left py-3 px-4 border-[1px] border-slate-700 rounded-sm">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<h2 class="font-bold">
|
||||||
|
{{ character.name }}
|
||||||
|
</h2>
|
||||||
|
<div v-if="character.wiki">
|
||||||
|
<Button variant="link" size="xs" as-child>
|
||||||
|
<a :href="character.wiki" target="_blank">
|
||||||
|
Wiki
|
||||||
|
<PhArrowSquareOut size="16" weight="fill" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<menu class="flex gap-2 border-[1px] border-slate-700 rounded-sm w-fit">
|
||||||
|
<li v-if="character.birth">
|
||||||
|
<TooltipProvider :delayDuration="100">
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<Button
|
||||||
|
@click="$emit('query:date-jump', character.birth!)"
|
||||||
|
variant="ghost"
|
||||||
|
size="xs"
|
||||||
|
>
|
||||||
|
<PhPlant size="16" weight="fill" />
|
||||||
|
{{ getFormattedDateTitle(character.birth, true) }}
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Date de naissance</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</li>
|
||||||
|
<span v-if="character.birth && character.death">-</span>
|
||||||
|
<li v-if="character.death">
|
||||||
|
<TooltipProvider :delayDuration="100">
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<Button
|
||||||
|
@click="$emit('query:date-jump', character.death!)"
|
||||||
|
variant="ghost"
|
||||||
|
size="xs"
|
||||||
|
>
|
||||||
|
<PhSkull size="16" weight="fill" />
|
||||||
|
{{ getFormattedDateTitle(character.death, true) }}
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Date de décès</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</li>
|
||||||
|
</menu>
|
||||||
|
|
||||||
|
<hr v-if="character.description" class="border-white opacity-25" />
|
||||||
|
|
||||||
|
<div v-if="character.description" class="text-sm">
|
||||||
|
<span class="opacity-75">
|
||||||
|
{{ character.description }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
80
src/components/calendar/search/lists/EventCallout.vue
Normal file
80
src/components/calendar/search/lists/EventCallout.vue
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { getRelativeString } from '@/models/Date'
|
||||||
|
import type { CalendarEvent } from '@/models/Events'
|
||||||
|
import { useCalendar } from '@/stores/CalendarStore'
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { PhArrowSquareOut, PhHourglassMedium } from '@phosphor-icons/vue'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
event: CalendarEvent
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const { defaultDate, getFormattedDateTitle } = useCalendar()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button
|
||||||
|
class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
|
||||||
|
:class="{
|
||||||
|
'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-stone-500 hover:bg-stone-700': event.category === 'mort',
|
||||||
|
'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe',
|
||||||
|
'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe naturelle',
|
||||||
|
'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation',
|
||||||
|
'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion',
|
||||||
|
'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs',
|
||||||
|
'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration',
|
||||||
|
'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention',
|
||||||
|
'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science',
|
||||||
|
'text-slate-900 bg-yellow-100 hover:bg-yellow-200': event.category === 'bénédiction'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="flex gap-2 items-center">
|
||||||
|
<h2 class="font-bold">
|
||||||
|
{{ event.title }}
|
||||||
|
</h2>
|
||||||
|
<div v-if="event.wiki">
|
||||||
|
<Button variant="link" size="xs" as-child class="text-inherit">
|
||||||
|
<a :href="event.wiki" target="_blank">
|
||||||
|
Wiki
|
||||||
|
<PhArrowSquareOut size="16" weight="fill" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-1 flex gap-4 items-center">
|
||||||
|
<p class="opacity-75">{{ getFormattedDateTitle(event.date, true) }}</p>
|
||||||
|
<p class="text-sm italic opacity-75 flex items-center gap-1">
|
||||||
|
<PhHourglassMedium size="16" weight="fill" />
|
||||||
|
{{ getRelativeString(defaultDate, event.date) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
|
||||||
|
<ul class="flex gap-1">
|
||||||
|
<li v-if="event.category">
|
||||||
|
<Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
|
||||||
|
{{ event.category }}
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li v-for="cat in event.secondaryCategories" :key="cat">
|
||||||
|
<Badge class="mix-blend-luminosity bg-gray-600" variant="secondary">
|
||||||
|
{{ cat }}
|
||||||
|
</Badge>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="event.description" class="text-sm">
|
||||||
|
<hr class="my-2 border-white opacity-50" />
|
||||||
|
<span class="opacity-75">
|
||||||
|
{{ event.description }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
@@ -1,15 +1,13 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { isCharacter, type Character } from '@/models/Characters'
|
import { isCharacter, type Character } from '@/models/Characters'
|
||||||
import { compareDates, getRelativeString, type LeimDate, type LeimDateOrder } from '@/models/Date'
|
import { compareDates, type LeimDate, type LeimDateOrder } from '@/models/Date'
|
||||||
import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
|
import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from '@/stores/CalendarStore'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import type { SearchMode } from '../../Search'
|
import type { SearchMode } from '../../Search'
|
||||||
|
|
||||||
import { PhHourglassMedium, PhPlant, PhSkull, PhArrowSquareOut } from '@phosphor-icons/vue'
|
import CharacterCallout from './CharacterCallout.vue'
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
import EventCallout from './EventCallout.vue'
|
||||||
import { Button } from '@/components/ui/button'
|
|
||||||
import { Badge } from '@/components/ui/badge'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
results: (Character | CalendarEvent)[]
|
results: (Character | CalendarEvent)[]
|
||||||
@@ -22,7 +20,7 @@ const props = defineProps<{
|
|||||||
|
|
||||||
const emit = defineEmits(['jumpedToDate'])
|
const emit = defineEmits(['jumpedToDate'])
|
||||||
|
|
||||||
const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
|
const { jumpToDate } = useCalendar()
|
||||||
|
|
||||||
function handleJumpToDate(date?: LeimDate) {
|
function handleJumpToDate(date?: LeimDate) {
|
||||||
if (!date) return
|
if (!date) return
|
||||||
@@ -64,133 +62,13 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
|
|||||||
<template>
|
<template>
|
||||||
<ul class="grid gap-4">
|
<ul class="grid gap-4">
|
||||||
<li v-for="r in pagedResults" :key="isCalendarEvent(r) ? r.title : r.name">
|
<li v-for="r in pagedResults" :key="isCalendarEvent(r) ? r.title : r.name">
|
||||||
<button
|
<EventCallout v-if="isCalendarEvent(r)" @click="handleJumpToDate(r.date)" :event="r" />
|
||||||
v-if="isCalendarEvent(r)"
|
|
||||||
class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
|
|
||||||
:class="{
|
|
||||||
'text-white bg-slate-600 hover:bg-slate-700': !r.category,
|
|
||||||
'text-white bg-lime-600 hover:bg-lime-700': r.category === 'naissance',
|
|
||||||
'text-white bg-stone-500 hover:bg-stone-700': r.category === 'mort',
|
|
||||||
'text-white bg-orange-600 hover:bg-orange-700': r.category === 'catastrophe',
|
|
||||||
'text-white bg-pink-600 hover:bg-pink-700': r.category === 'catastrophe naturelle',
|
|
||||||
'text-white bg-sky-600 hover:bg-sky-700': r.category === 'législation',
|
|
||||||
'text-white bg-purple-600 hover:bg-purple-700': r.category === 'religion',
|
|
||||||
'text-white bg-emerald-600 hover:bg-emerald-700': r.category === 'joueurs',
|
|
||||||
'text-slate-900 bg-amber-300 hover:bg-amber-400': r.category === 'inauguration',
|
|
||||||
'text-slate-900 bg-emerald-200 hover:bg-emerald-300': r.category === 'invention',
|
|
||||||
'text-slate-900 bg-cyan-300 hover:bg-cyan-400': r.category === 'science',
|
|
||||||
'text-slate-900 bg-yellow-100 hover:bg-yellow-200': r.category === 'bénédiction'
|
|
||||||
}"
|
|
||||||
@click="handleJumpToDate(r.date)"
|
|
||||||
>
|
|
||||||
<div class="flex gap-2 items-center">
|
|
||||||
<h2 class="font-bold">
|
|
||||||
{{ r.title }}
|
|
||||||
</h2>
|
|
||||||
<div v-if="r.wiki">
|
|
||||||
<Button variant="link" size="xs" as-child class="text-inherit">
|
|
||||||
<a :href="r.wiki" target="_blank">
|
|
||||||
Wiki
|
|
||||||
<PhArrowSquareOut size="16" weight="fill" />
|
|
||||||
</a>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-1 flex gap-4 items-center">
|
<CharacterCallout
|
||||||
<p class="opacity-75">{{ getFormattedDateTitle(r.date, true) }}</p>
|
|
||||||
<p class="text-sm italic opacity-75 flex items-center gap-1">
|
|
||||||
<PhHourglassMedium size="16" weight="fill" />
|
|
||||||
{{ getRelativeString(defaultDate, r.date) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="r.category || r.secondaryCategories" class="absolute top-3 right-4">
|
|
||||||
<ul class="flex gap-1">
|
|
||||||
<li v-if="r.category">
|
|
||||||
<Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
|
|
||||||
{{ r.category }}
|
|
||||||
</Badge>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li v-for="cat in r.secondaryCategories" :key="cat">
|
|
||||||
<Badge class="mix-blend-luminosity bg-gray-600" variant="secondary">
|
|
||||||
{{ cat }}
|
|
||||||
</Badge>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="r.description" class="text-sm">
|
|
||||||
<hr class="my-2 border-white opacity-50" />
|
|
||||||
<span class="opacity-75">
|
|
||||||
{{ r.description }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-else-if="isCharacter(r)"
|
v-else-if="isCharacter(r)"
|
||||||
class="block w-full text-left py-3 px-4 border-[1px] border-slate-700 rounded-sm"
|
:character="r"
|
||||||
>
|
@query:date-jump="handleJumpToDate"
|
||||||
<div class="grid gap-2">
|
/>
|
||||||
<div class="flex gap-2">
|
|
||||||
<h2 class="font-bold">
|
|
||||||
{{ r.name }}
|
|
||||||
</h2>
|
|
||||||
<div v-if="r.wiki">
|
|
||||||
<Button variant="link" size="xs" as-child>
|
|
||||||
<a :href="r.wiki" target="_blank">
|
|
||||||
Wiki
|
|
||||||
<PhArrowSquareOut size="16" weight="fill" />
|
|
||||||
</a>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<menu class="flex gap-2 border-[1px] border-slate-700 rounded-sm w-fit">
|
|
||||||
<li v-if="r.birth">
|
|
||||||
<TooltipProvider :delayDuration="100">
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger>
|
|
||||||
<Button @click="handleJumpToDate(r.birth)" variant="ghost" size="xs">
|
|
||||||
<PhPlant size="16" weight="fill" />
|
|
||||||
{{ getFormattedDateTitle(r.birth, true) }}
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>Date de naissance</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
</li>
|
|
||||||
<span v-if="r.birth && r.death">-</span>
|
|
||||||
<li v-if="r.death">
|
|
||||||
<TooltipProvider :delayDuration="100">
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger>
|
|
||||||
<Button @click="handleJumpToDate(r.death)" variant="ghost" size="xs">
|
|
||||||
<PhSkull size="16" weight="fill" />
|
|
||||||
{{ getFormattedDateTitle(r.death, true) }}
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>Date de décès</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
</li>
|
|
||||||
</menu>
|
|
||||||
|
|
||||||
<hr v-if="r.description" class="border-white opacity-25" />
|
|
||||||
|
|
||||||
<div v-if="r.description" class="text-sm">
|
|
||||||
<span class="opacity-75">
|
|
||||||
{{ r.description }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user