Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added relative string to search list

Browse Source
This commit is contained in:
Alexis
2024-04-09 17:18:52 +02:00
parent 1b18023587
commit b98190a5ea
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/calendar/search/lists/SearchList.vue
View File

@@ -1,11 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { isCharacter, type Character } from '@/models/Characters' import { isCharacter, type Character } from '@/models/Characters'
import { compareDates, type LeimDate, type LeimDateOrder } from '@/models/Date' import { compareDates, getRelativeString, 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 } from '@phosphor-icons/vue'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
@@ -20,7 +21,7 @@ const props = defineProps<{
const emit = defineEmits(['jumpedToDate']) const emit = defineEmits(['jumpedToDate'])
const { getFormattedDateTitle, jumpToDate } = useCalendar() const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
function handleJumpToDate(date?: LeimDate) { function handleJumpToDate(date?: LeimDate) {
if (!date) return if (!date) return
@@ -64,7 +65,7 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
<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 <button
v-if="isCalendarEvent(r)" v-if="isCalendarEvent(r)"
class="block w-full text-left p-2 rounded-sm" class="relative block w-full text-left p-2 rounded-sm"
:class="{ :class="{
'text-white bg-slate-600 hover:bg-slate-700': !r.category, '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-lime-600 hover:bg-lime-700': r.category === 'naissance',
@@ -85,11 +86,15 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
{{ r.title }} {{ r.title }}
</div> </div>
<div> <div class="mb-1 space-y-1">
<span class="opacity-75 italic">{{ getFormattedDateTitle(r.date, true) }}</span> <p class="opacity-75 font-semibold">{{ 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>
<div v-if="r.category || r.secondaryCategories"> <div v-if="r.category || r.secondaryCategories" class="absolute top-2 right-2">
<ul class="flex gap-1"> <ul class="flex gap-1">
<li v-if="r.category"> <li v-if="r.category">
<Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary"> <Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">