Base nuxt move after refactoring until no warnings
There still exists an issue with one Adobe led library ; @international-dates don't seem to compile their sourcemaps correctly. I don't think this is something I can fix however, and it may require hacks and workarounds to solve from what I've gathered
This commit is contained in:
Alexis
426
components/calendar/search/CalendarSearch.vue
Normal file
426
components/calendar/search/CalendarSearch.vue
Normal file
@@ -0,0 +1,426 @@
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
characterCategories,
|
||||
isCharacter,
|
||||
type Character,
|
||||
type CharacterCategory
|
||||
} from '@/models/Characters'
|
||||
import type { LeimDateOrder } from '@/models/Date'
|
||||
import {
|
||||
calendarEventCategories,
|
||||
isCalendarEvent,
|
||||
type CalendarEvent,
|
||||
type CalendarEventCategory
|
||||
} from '@/models/Events'
|
||||
import { useCharacters } from '@/stores/CharacterStore'
|
||||
import { useCalendarEvents } from '@/stores/EventStore'
|
||||
import { capitalize } from '@/utils/Strings'
|
||||
import { useMagicKeys, useScroll, useStorage, whenever } from '@vueuse/core'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { searchUnifier, type SearchMode } from '../SearchMode'
|
||||
|
||||
import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from '@phosphor-icons/vue'
|
||||
import {
|
||||
ComboboxAnchor,
|
||||
ComboboxInput,
|
||||
ComboboxPortal,
|
||||
ComboboxRoot,
|
||||
VisuallyHidden
|
||||
} from 'radix-vue'
|
||||
|
||||
import SearchList from './lists/SearchList.vue'
|
||||
|
||||
const { characters } = useCharacters()
|
||||
const { allEvents } = useCalendarEvents()
|
||||
|
||||
const modalOpen = defineModel({ default: false })
|
||||
|
||||
const searchQuery = ref<string>('')
|
||||
// const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
|
||||
|
||||
const selectedEntity = useStorage('se', 'events' as SearchMode)
|
||||
|
||||
// Order
|
||||
const selectedOrder = ref<LeimDateOrder>('asc')
|
||||
function setOrderAsc() {
|
||||
selectedOrder.value = 'asc'
|
||||
resetPage()
|
||||
}
|
||||
|
||||
function setOrderDesc() {
|
||||
selectedOrder.value = 'desc'
|
||||
resetPage()
|
||||
}
|
||||
|
||||
// Limit
|
||||
const currentPage = ref<number>(1)
|
||||
const itemsPerPage: number = 20
|
||||
const startOfList = computed<number>(() => (currentPage.value - 1) * itemsPerPage)
|
||||
const endOfList = computed<number>(() => startOfList.value + itemsPerPage)
|
||||
|
||||
/**
|
||||
* Resets the pagination
|
||||
*/
|
||||
function resetPage() {
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const searchResults = computed<(Character | CalendarEvent)[]>(() => {
|
||||
let results: (Character | CalendarEvent)[] = []
|
||||
let dataToFilter: Character[] | CalendarEvent[] | (Character | CalendarEvent)[]
|
||||
const shouldFilterCategories = selectedCategories.value.length > 0
|
||||
|
||||
// Assign data to loop over and filter
|
||||
// They are assigned this way for readability
|
||||
if (selectedEntity.value === 'events') {
|
||||
dataToFilter = allEvents
|
||||
} else if (selectedEntity.value === 'characters') {
|
||||
dataToFilter = characters
|
||||
} else {
|
||||
dataToFilter = [...allEvents, ...characters]
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO: Refactor the categories logic, basically extract the return out of the ifs, like above
|
||||
*/
|
||||
results = dataToFilter.filter((item) => {
|
||||
// Filter calendar events
|
||||
if (isCalendarEvent(item)) {
|
||||
const queryString = new String(searchQuery.value)
|
||||
.replace(searchUnifier, '')
|
||||
.toLocaleLowerCase()
|
||||
|
||||
const hitTitle = item.title
|
||||
.replace(searchUnifier, '')
|
||||
.toLocaleLowerCase()
|
||||
.includes(queryString)
|
||||
const hitDesc = item.description
|
||||
?.replace(searchUnifier, '')
|
||||
.toLocaleLowerCase()
|
||||
.includes(queryString)
|
||||
|
||||
if (!shouldFilterCategories) {
|
||||
return hitTitle || hitDesc
|
||||
}
|
||||
|
||||
// Handle categories logic
|
||||
let hitCategories: boolean = false
|
||||
const allCategories: CalendarEventCategory[] = []
|
||||
|
||||
if (item.category) {
|
||||
allCategories.push(item.category)
|
||||
}
|
||||
|
||||
if (item.secondaryCategories && item.secondaryCategories?.length > 0) {
|
||||
allCategories.push(...item.secondaryCategories)
|
||||
}
|
||||
|
||||
hitCategories = selectedCategories.value.every((selectedCat) => {
|
||||
return allCategories.includes(selectedCat as CalendarEventCategory)
|
||||
})
|
||||
|
||||
return (hitTitle || hitDesc) && hitCategories
|
||||
}
|
||||
|
||||
// Filter characters
|
||||
if (isCharacter(item)) {
|
||||
const queryString = new String(searchQuery.value)
|
||||
.replace(searchUnifier, '')
|
||||
.toLocaleLowerCase()
|
||||
|
||||
const hitTitle = item.name
|
||||
.replace(searchUnifier, '')
|
||||
.toLocaleLowerCase()
|
||||
.includes(queryString)
|
||||
|
||||
if (!shouldFilterCategories) {
|
||||
return hitTitle
|
||||
}
|
||||
|
||||
// Handle categories logic
|
||||
let hitCategories: boolean = false
|
||||
const allCategories: CharacterCategory[] = []
|
||||
|
||||
if (item.category) {
|
||||
allCategories.push(item.category)
|
||||
}
|
||||
|
||||
if (item.secondaryCategories && item.secondaryCategories?.length > 0) {
|
||||
allCategories.push(...item.secondaryCategories)
|
||||
}
|
||||
|
||||
hitCategories = selectedCategories.value.every((selectedCat) => {
|
||||
return allCategories.includes(selectedCat as CharacterCategory)
|
||||
})
|
||||
|
||||
return hitTitle && hitCategories
|
||||
}
|
||||
})
|
||||
|
||||
return results
|
||||
})
|
||||
|
||||
/**
|
||||
* Removes the search query, resets the pagination and removes all selected categories
|
||||
*/
|
||||
function resetSearch() {
|
||||
searchQuery.value = ''
|
||||
resetPage()
|
||||
selectedCategories.value = []
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the search Uidialog
|
||||
*/
|
||||
function openUiDialog() {
|
||||
modalOpen.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes the search Uidialog
|
||||
*/
|
||||
function closeUiDialog() {
|
||||
modalOpen.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Switches the selectedEntity
|
||||
*/
|
||||
function handleEntitySwitch() {
|
||||
resetPage()
|
||||
selectedCategories.value = []
|
||||
}
|
||||
|
||||
// Key combos to deploy modal
|
||||
const keys = useMagicKeys()
|
||||
|
||||
whenever(keys.control_period, () => {
|
||||
openUiDialog()
|
||||
})
|
||||
|
||||
const searchResultsRef = ref<HTMLElement | null>(null)
|
||||
const { y: searchResultsY } = useScroll(searchResultsRef)
|
||||
|
||||
watch(currentPage, () => {
|
||||
searchResultsY.value = 0
|
||||
})
|
||||
|
||||
// Compute categories based on current selectedEntity
|
||||
const currentCategories = computed(() => {
|
||||
if (selectedEntity.value === 'characters') {
|
||||
return [...characterCategories]
|
||||
} else {
|
||||
return [...calendarEventCategories]
|
||||
}
|
||||
})
|
||||
|
||||
const selectedCategories = ref<(CharacterCategory | CalendarEventCategory)[]>([])
|
||||
const categoryFilterOpened = ref<boolean>(false)
|
||||
const searchCategory = ref<string>('')
|
||||
|
||||
const filteredCategories = computed(() =>
|
||||
currentCategories.value.filter((i) => !selectedCategories.value.includes(i))
|
||||
)
|
||||
|
||||
/**
|
||||
* Handles the category selections from the TagInput component
|
||||
*
|
||||
* @param e Radix Change Event
|
||||
*/
|
||||
function handleCategorySelect(e: (CharacterCategory | CalendarEventCategory)) {
|
||||
if (typeof e === 'string') {
|
||||
searchCategory.value = ''
|
||||
selectedCategories.value.push(e)
|
||||
}
|
||||
|
||||
if (filteredCategories.value.length === 0) {
|
||||
categoryFilterOpened.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiDialog v-model:open="modalOpen" @update:open="resetSearch()">
|
||||
<UiDialogContent
|
||||
class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
|
||||
:class="{
|
||||
'bottom-16': searchResults.length > 0
|
||||
}"
|
||||
>
|
||||
<VisuallyHidden>
|
||||
<UiDialogTitle> Recherche avancée </UiDialogTitle>
|
||||
</VisuallyHidden>
|
||||
<VisuallyHidden>
|
||||
<UiDialogDescription>
|
||||
Rechercher les données disponibles sur le calendrier
|
||||
</UiDialogDescription>
|
||||
</VisuallyHidden>
|
||||
|
||||
<!-- UiDialog header -->
|
||||
<div id="searchForm" class="grid gap-3">
|
||||
<div class="relative w-full h-fit">
|
||||
<UiInput
|
||||
id="search"
|
||||
v-model:model-value="searchQuery"
|
||||
type="text"
|
||||
placeholder="Rechercher le calendrier"
|
||||
class="pl-10 py-6 text-lg"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<span class="absolute start-1 inset-y-0 flex items-center justify-center px-2 opacity-50">
|
||||
<PhMagnifyingGlass size="20" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<UiToggleGroup
|
||||
v-model="selectedEntity"
|
||||
type="single"
|
||||
class="justify-start"
|
||||
@update:model-value="handleEntitySwitch()"
|
||||
>
|
||||
<UiToggleGroupItem value="events" aria-label="Uniquement les évènements">
|
||||
Évènements
|
||||
</UiToggleGroupItem>
|
||||
<UiToggleGroupItem value="characters" aria-label="Uniquement les personnages">
|
||||
Personnages
|
||||
</UiToggleGroupItem>
|
||||
</UiToggleGroup>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<UiTagsInput class="px-0 gap-0 w-72" :model-value="selectedCategories">
|
||||
<div class="flex gap-2 flex-wrap items-center px-3">
|
||||
<UiTagsInputItem v-for="item in selectedCategories" :key="item" :value="item">
|
||||
<UiTagsInputItemText class="capitalize" />
|
||||
<UiTagsInputItemDelete />
|
||||
</UiTagsInputItem>
|
||||
</div>
|
||||
|
||||
<ComboboxRoot
|
||||
v-model="selectedCategories"
|
||||
v-model:open="categoryFilterOpened"
|
||||
v-model:searchTerm="searchCategory"
|
||||
class="w-full"
|
||||
>
|
||||
<ComboboxAnchor as-child>
|
||||
<ComboboxInput placeholder="Catégories" as-child>
|
||||
<UiTagsInputInput
|
||||
class="w-full px-3"
|
||||
:class="selectedCategories.length > 0 ? 'mt-2' : ''"
|
||||
@keydown.enter.prevent
|
||||
/>
|
||||
</ComboboxInput>
|
||||
</ComboboxAnchor>
|
||||
|
||||
<ComboboxPortal :to="'#searchForm'">
|
||||
<UiCommandList
|
||||
position="popper"
|
||||
class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50"
|
||||
:dismissable="true"
|
||||
>
|
||||
<UiCommandEmpty />
|
||||
<UiCommandGroup>
|
||||
<UiCommandItem
|
||||
v-for="cat in filteredCategories"
|
||||
:key="cat"
|
||||
:value="cat"
|
||||
@select.prevent="handleCategorySelect(cat)"
|
||||
>
|
||||
{{ capitalize(cat) }}
|
||||
</UiCommandItem>
|
||||
</UiCommandGroup>
|
||||
</UiCommandList>
|
||||
</ComboboxPortal>
|
||||
</ComboboxRoot>
|
||||
</UiTagsInput>
|
||||
|
||||
<UiTooltipProvider :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<UiButton
|
||||
:variant="selectedOrder === 'desc' ? 'secondary' : 'outline'"
|
||||
size="icon"
|
||||
@click="setOrderDesc()"
|
||||
>
|
||||
<PhClockCounterClockwise size="18" />
|
||||
</UiButton>
|
||||
</UiTooltipTrigger>
|
||||
<UiTooltipContent>
|
||||
<p>Plus ancien</p>
|
||||
</UiTooltipContent>
|
||||
</UiTooltip>
|
||||
</UiTooltipProvider>
|
||||
|
||||
<UiTooltipProvider :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<UiButton
|
||||
:variant="selectedOrder === 'asc' ? 'secondary' : 'outline'"
|
||||
size="icon"
|
||||
@click="setOrderAsc()"
|
||||
>
|
||||
<PhClockClockwise size="18" />
|
||||
</UiButton>
|
||||
</UiTooltipTrigger>
|
||||
<UiTooltipContent>
|
||||
<p>Plus récent</p>
|
||||
</UiTooltipContent>
|
||||
</UiTooltip>
|
||||
</UiTooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr >
|
||||
|
||||
<div v-if="searchResults.length > 0" ref="searchResultsRef" class="grow overflow-y-auto">
|
||||
<SearchList
|
||||
:results="searchResults"
|
||||
:current-entity="selectedEntity"
|
||||
:order="selectedOrder"
|
||||
:start-at="startOfList"
|
||||
:end-at="endOfList"
|
||||
@jumped-to-date="closeUiDialog()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<UiPagination
|
||||
v-model:page="currentPage"
|
||||
:total="searchResults.length"
|
||||
:items-per-page="itemsPerPage"
|
||||
:sibling-count="2"
|
||||
show-edges
|
||||
:default-page="1"
|
||||
>
|
||||
<UiPaginationList v-slot="{ items }" class="flex items-center gap-1">
|
||||
<UiPaginationFirst />
|
||||
<UiPaginationPrev />
|
||||
|
||||
<template v-for="(item, index) in items">
|
||||
<UiPaginationListItem
|
||||
v-if="item.type === 'page'"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
as-child
|
||||
>
|
||||
<UiButton
|
||||
class="w-10 h-10 p-0"
|
||||
:variant="item.value === currentPage ? 'default' : 'outline'"
|
||||
>
|
||||
{{ item.value }}
|
||||
</UiButton>
|
||||
</UiPaginationListItem>
|
||||
<UiPaginationEllipsis v-else :key="item.type" :index="index" />
|
||||
</template>
|
||||
|
||||
<UiPaginationNext />
|
||||
<UiPaginationLast />
|
||||
</UiPaginationList>
|
||||
</UiPagination>
|
||||
</div>
|
||||
</UiDialogContent>
|
||||
</UiDialog>
|
||||
</template>
|
||||
89
components/calendar/search/lists/CharacterCallout.vue
Normal file
89
components/calendar/search/lists/CharacterCallout.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Character } from '@/models/Characters'
|
||||
import type { LeimDate } from '@/models/Date'
|
||||
import { useCalendar } from '@/stores/CalendarStore'
|
||||
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { PhArrowSquareOut, PhPlant, PhSkull } from '@phosphor-icons/vue'
|
||||
|
||||
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 :delay-duration="100">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
@click="$emit('query:date-jump', character.birth!)"
|
||||
>
|
||||
<PhPlant size="16" weight="fill" />
|
||||
{{ getFormattedDateTitle(character.birth, true) }}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent :side="'bottom'" :align="'end'" :align-offset="20">
|
||||
<p>Date de naissance</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</li>
|
||||
<span v-if="character.birth && character.death">-</span>
|
||||
<li v-if="character.death">
|
||||
<TooltipProvider :delay-duration="100">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
@click="$emit('query:date-jump', character.death!)"
|
||||
>
|
||||
<PhSkull size="16" weight="fill" />
|
||||
{{ getFormattedDateTitle(character.death, true) }}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent :side="'bottom'" :align="'start'" :align-offset="20">
|
||||
<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>
|
||||
114
components/calendar/search/lists/EventCallout.vue
Normal file
114
components/calendar/search/lists/EventCallout.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script lang="ts" setup>
|
||||
import { getRelativeString, type LeimDate } 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, PhAlarm } from '@phosphor-icons/vue'
|
||||
|
||||
const props = defineProps<{
|
||||
event: CalendarEvent
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'query:date-jump', payload: LeimDate): void
|
||||
}>()
|
||||
|
||||
const { defaultDate, getFormattedDateTitle } = useCalendar()
|
||||
|
||||
const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
|
||||
const dateDuration: string | null = props.event.endDate
|
||||
? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
|
||||
: null
|
||||
</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-white hover:bg-yellow-200': event.category === 'bénédiction',
|
||||
'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category === 'découverte',
|
||||
'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category === 'exploration',
|
||||
'text-white bg-amber-600 hover:bg-amber-700': event.category === 'construction',
|
||||
'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category === 'arcanologie',
|
||||
'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité',
|
||||
'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale',
|
||||
'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce'
|
||||
}"
|
||||
@click="$emit('query:date-jump', event.startDate)"
|
||||
>
|
||||
<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">
|
||||
<template v-if="!event.endDate">
|
||||
<p class="col-span-2 font-semibold text-sm opacity-75">
|
||||
{{ getFormattedDateTitle(event.startDate, true) }}
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="col-span-2 font-semibold text-sm opacity-75">
|
||||
Du {{ getFormattedDateTitle(event.startDate, true) }} au
|
||||
{{ getFormattedDateTitle(event.endDate, true) }}
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="mb-1 flex gap-x-2 items-center">
|
||||
<p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
|
||||
<PhAlarm size="16" weight="fill" /> {{ dateDifference }}
|
||||
</p>
|
||||
<template v-if="dateDuration">
|
||||
<p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
|
||||
<PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
|
||||
</p>
|
||||
</template>
|
||||
</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>
|
||||
74
components/calendar/search/lists/SearchList.vue
Normal file
74
components/calendar/search/lists/SearchList.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<script lang="ts" setup>
|
||||
import { isCharacter, type Character } from '@/models/Characters'
|
||||
import { compareDates, type LeimDate, type LeimDateOrder } from '@/models/Date'
|
||||
import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
|
||||
import { useCalendar } from '@/stores/CalendarStore'
|
||||
import { computed } from 'vue'
|
||||
import type { SearchMode } from '../../SearchMode'
|
||||
|
||||
import CharacterCallout from './CharacterCallout.vue'
|
||||
import EventCallout from './EventCallout.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
results: (Character | CalendarEvent)[]
|
||||
currentEntity: SearchMode
|
||||
order: LeimDateOrder
|
||||
startAt: number
|
||||
endAt: number
|
||||
limit?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['jumpedToDate'])
|
||||
|
||||
const { jumpToDate } = useCalendar()
|
||||
|
||||
function handleJumpToDate(date?: LeimDate) {
|
||||
if (!date) return
|
||||
|
||||
jumpToDate(date)
|
||||
emit('jumpedToDate')
|
||||
}
|
||||
|
||||
// Initial sorting of the results
|
||||
const sortedResults = computed(() => {
|
||||
return [...props.results].sort((a, b) => {
|
||||
let firstDate: LeimDate
|
||||
let secondDate: LeimDate
|
||||
|
||||
if (isCalendarEvent(a)) {
|
||||
firstDate = a.startDate
|
||||
} else if (isCharacter(a) && a.birth) {
|
||||
firstDate = a.birth
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
|
||||
if (isCalendarEvent(b)) {
|
||||
secondDate = b.startDate
|
||||
} else if (isCharacter(b) && b.birth) {
|
||||
secondDate = b.birth
|
||||
} else {
|
||||
return -1
|
||||
}
|
||||
|
||||
return compareDates(firstDate, secondDate, props.order)
|
||||
})
|
||||
})
|
||||
|
||||
// Page the sorted results
|
||||
const pagedResults = computed(() => sortedResults.value.slice(props.startAt, props.endAt))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="grid gap-4">
|
||||
<li v-for="r in pagedResults" :key="isCalendarEvent(r) ? r.title : r.name">
|
||||
<EventCallout v-if="isCalendarEvent(r)" :event="r" @query:date-jump="handleJumpToDate" />
|
||||
|
||||
<CharacterCallout
|
||||
v-else-if="isCharacter(r)"
|
||||
:character="r"
|
||||
@query:date-jump="handleJumpToDate"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
Reference in New Issue
Block a user