315 lines
10 KiB
Vue
315 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import { useFavoritesStore } from '~/stores/favorites'
|
|
import { useHistoryStore } from '~/stores/history'
|
|
import type { SearchHit } from '~/types'
|
|
|
|
interface Study {
|
|
id?: number
|
|
title?: string
|
|
date?: string
|
|
place?: string
|
|
link?: string
|
|
}
|
|
|
|
interface EntrelineaDoc {
|
|
id?: string
|
|
image?: string
|
|
link?: string
|
|
locale?: string
|
|
origin?: string
|
|
page?: number | string
|
|
text?: string
|
|
studies?: Study[]
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const props = defineProps<{
|
|
document: EntrelineaDoc
|
|
collection?: string
|
|
highlightedText?: string | null
|
|
}>()
|
|
|
|
const emits = defineEmits<{ close: [] }>()
|
|
|
|
const showStudies = ref(false)
|
|
|
|
// Volver al detalle cuando cambia el documento
|
|
watch(() => props.document?.id, () => { showStudies.value = false })
|
|
|
|
const imageUrl = computed<string | null>(() =>
|
|
getEntrelineaImageUrl(props.document?.image, 'detail')
|
|
)
|
|
|
|
const origin = computed(() => (props.document?.origin as string) || '')
|
|
|
|
const title = computed(() =>
|
|
origin.value || (props.document?.id as string) || 'Entrelínea'
|
|
)
|
|
|
|
const bodyHtml = computed<string>(() =>
|
|
props.highlightedText || props.document?.text || ''
|
|
)
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Favoritos / Historial */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
const favorites = useFavoritesStore()
|
|
const history = useHistoryStore()
|
|
const toast = useToast()
|
|
|
|
function toSearchHit(doc: EntrelineaDoc): SearchHit {
|
|
const id = doc.id || ''
|
|
return { _id: id, id, title: id || 'Entrelínea', body: doc.text, ...doc }
|
|
}
|
|
|
|
watch(
|
|
() => [props.collection, props.document?.id] as const,
|
|
([collection, id]) => {
|
|
if (!collection || !id) return
|
|
history.visit(collection, toSearchHit(props.document))
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
const isFav = computed(() => {
|
|
if (!props.collection || !props.document?.id) return false
|
|
return favorites.isFavorite(props.collection, props.document.id)
|
|
})
|
|
|
|
function onToggleFavorite() {
|
|
if (!props.collection || !props.document?.id) return
|
|
const wasFav = isFav.value
|
|
favorites.toggle(props.collection, toSearchHit(props.document))
|
|
toast.add({
|
|
title: wasFav ? 'Eliminado de tu lista' : 'Guardado en tu lista',
|
|
description: props.document.id,
|
|
icon: wasFav ? 'i-lucide-bookmark-x' : 'i-lucide-bookmark-check',
|
|
color: wasFav ? 'neutral' : 'primary',
|
|
duration: 1800
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="entrelinea-detail">
|
|
<UDashboardNavbar
|
|
:toggle="false"
|
|
:ui="{
|
|
root: 'h-auto min-h-(--ui-header-height) py-2 items-start sm:items-center',
|
|
left: 'flex-1 min-w-0 py-1',
|
|
title: 'flex items-center gap-1.5 font-semibold text-highlighted min-w-0 whitespace-normal'
|
|
}"
|
|
>
|
|
<template #leading>
|
|
<!-- En sub-pantalla de estudios: volver al detalle -->
|
|
<UButton
|
|
v-if="showStudies"
|
|
icon="i-lucide-arrow-left"
|
|
color="neutral"
|
|
variant="ghost"
|
|
class="-ms-1.5"
|
|
@click="showStudies = false"
|
|
/>
|
|
<!-- En detalle: cerrar el panel -->
|
|
<UButton
|
|
v-else
|
|
icon="i-lucide-arrow-left"
|
|
color="neutral"
|
|
variant="ghost"
|
|
class="-ms-1.5"
|
|
@click="emits('close')"
|
|
/>
|
|
</template>
|
|
|
|
<template #title>
|
|
<span
|
|
v-if="showStudies"
|
|
class="font-semibold text-sm block"
|
|
>
|
|
Estudios relacionados
|
|
<span class="text-muted font-normal">({{ document.studies?.length }})</span>
|
|
</span>
|
|
<span
|
|
v-else
|
|
class="font-semibold text-sm min-w-0 max-w-full block whitespace-normal leading-snug pr-1 [overflow-wrap:anywhere]"
|
|
:title="title"
|
|
>
|
|
{{ title }}
|
|
</span>
|
|
</template>
|
|
|
|
<template #right>
|
|
<template v-if="!showStudies">
|
|
<UTooltip
|
|
v-if="document.studies?.length"
|
|
:text="`Estudios relacionados (${document.studies.length})`"
|
|
>
|
|
<UChip
|
|
:text="document.studies.length"
|
|
color="primary"
|
|
size="sm"
|
|
:show="!!document.studies?.length"
|
|
>
|
|
<UButton
|
|
icon="i-lucide-book-open"
|
|
color="neutral"
|
|
variant="ghost"
|
|
aria-label="Estudios relacionados"
|
|
@click="showStudies = true"
|
|
/>
|
|
</UChip>
|
|
</UTooltip>
|
|
<UTooltip v-if="collection" :text="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'">
|
|
<UButton
|
|
:icon="isFav ? 'i-lucide-bookmark-check' : 'i-lucide-bookmark-plus'"
|
|
:color="isFav ? 'primary' : 'neutral'"
|
|
variant="ghost"
|
|
:aria-label="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'"
|
|
@click="onToggleFavorite"
|
|
/>
|
|
</UTooltip>
|
|
</template>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<div
|
|
v-if="!showStudies"
|
|
class="flex items-start justify-between gap-3 px-4 sm:px-6 py-2.5 border-b border-default bg-elevated/40 min-w-0 w-full"
|
|
>
|
|
<div class="flex flex-wrap items-center gap-2 min-w-0 flex-1">
|
|
<UBadge
|
|
v-if="document.locale"
|
|
:label="String(document.locale).toUpperCase()"
|
|
color="neutral"
|
|
variant="subtle"
|
|
size="xs"
|
|
class="shrink-0"
|
|
/>
|
|
<span
|
|
v-if="origin && origin !== document.id"
|
|
class="inline-flex items-start rounded-md bg-primary/10 text-primary text-xs font-medium px-2 py-0.5 min-w-0 max-w-full whitespace-normal leading-snug [overflow-wrap:anywhere]"
|
|
:title="origin"
|
|
>
|
|
{{ origin }}
|
|
</span>
|
|
<span v-if="document.page != null" class="text-xs text-muted flex items-center gap-1 shrink-0">
|
|
<UIcon name="i-lucide-file-text" class="size-3" />
|
|
Pág. {{ document.page }}
|
|
</span>
|
|
<span
|
|
v-if="document.id && document.id !== origin"
|
|
class="text-xs text-dimmed font-mono truncate max-w-[160px] shrink-0"
|
|
:title="String(document.id)"
|
|
>
|
|
{{ document.id }}
|
|
</span>
|
|
</div>
|
|
<UButton
|
|
v-if="document.link"
|
|
:to="document.link"
|
|
target="_blank"
|
|
icon="i-lucide-external-link"
|
|
label="Ver en sitio"
|
|
color="primary"
|
|
variant="soft"
|
|
size="xs"
|
|
class="shrink-0"
|
|
/>
|
|
</div>
|
|
|
|
<!-- ------------------------------------------------------------------ -->
|
|
<!-- VISTA PRINCIPAL: imagen + texto + accesos -->
|
|
<!-- ------------------------------------------------------------------ -->
|
|
<div v-if="!showStudies" class="flex-1 overflow-y-auto">
|
|
<div class="p-4 sm:p-6 pb-10 flex flex-col gap-6">
|
|
|
|
<!-- Imagen -->
|
|
<div
|
|
v-if="imageUrl"
|
|
class="rounded-xl overflow-hidden border border-default shadow-sm bg-elevated flex items-center justify-center"
|
|
>
|
|
<img :src="imageUrl" :alt="title" loading="lazy" class="max-w-full h-auto">
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="rounded-xl border border-dashed border-default p-8 text-center text-xs text-dimmed"
|
|
>
|
|
<UIcon name="i-lucide-image-off" class="size-6 mb-1 mx-auto" />
|
|
<p>Sin imagen disponible</p>
|
|
</div>
|
|
|
|
<!-- Texto -->
|
|
<div v-if="bodyHtml" class="rounded-xl border border-default bg-white dark:bg-neutral-900 shadow-sm p-4 sm:p-6">
|
|
<article
|
|
class="prose prose-sm max-w-none dark:prose-invert leading-relaxed"
|
|
v-html="bodyHtml"
|
|
/>
|
|
</div>
|
|
<p v-else class="text-sm text-muted">
|
|
No hay entrelínea para esta coincidencia.
|
|
</p>
|
|
|
|
<!-- Link al sitio -->
|
|
<a
|
|
v-if="document.link"
|
|
:href="document.link"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="flex items-center gap-3 rounded-xl border border-primary/30 bg-primary/5 hover:bg-primary/10 transition-colors px-4 py-3 group"
|
|
>
|
|
<UIcon name="i-lucide-external-link" class="size-5 text-primary shrink-0" />
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm font-medium text-primary">Ver en el sitio</p>
|
|
<p class="text-xs text-muted truncate">{{ document.link }}</p>
|
|
</div>
|
|
<UIcon name="i-lucide-chevron-right" class="size-4 text-primary/60 shrink-0 group-hover:translate-x-0.5 transition-transform" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ------------------------------------------------------------------ -->
|
|
<!-- SUB-PANTALLA: lista de estudios relacionados -->
|
|
<!-- ------------------------------------------------------------------ -->
|
|
<div v-else class="flex-1 overflow-y-auto divide-y divide-default">
|
|
<a
|
|
v-for="study in document.studies"
|
|
:key="study.id"
|
|
:href="study.link"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
:title="study.title"
|
|
class="flex items-center gap-3 px-4 sm:px-6 py-3.5 hover:bg-primary/5 transition-colors group"
|
|
>
|
|
<div class="flex flex-col justify-center shrink-0 w-14 text-center">
|
|
<template v-if="study.date">
|
|
<span class="text-base font-bold text-highlighted tabular-nums leading-none">
|
|
{{ new Date(study.date + 'T00:00:00').getUTCDate() }}
|
|
</span>
|
|
<span class="text-[10px] uppercase tracking-wide text-muted leading-tight mt-0.5">
|
|
{{ new Date(study.date + 'T00:00:00').toLocaleDateString('es', { month: 'short', timeZone: 'UTC' }) }}
|
|
{{ new Date(study.date + 'T00:00:00').getUTCFullYear() }}
|
|
</span>
|
|
</template>
|
|
<UIcon v-else name="i-lucide-calendar-x" class="size-4 text-dimmed mx-auto" />
|
|
</div>
|
|
|
|
<div class="w-px self-stretch bg-default shrink-0" />
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-highlighted leading-snug group-hover:text-primary transition-colors line-clamp-2">
|
|
{{ study.title }}
|
|
</p>
|
|
<p v-if="study.place" class="text-xs text-muted truncate mt-0.5">
|
|
{{ study.place }}
|
|
</p>
|
|
</div>
|
|
|
|
<UIcon name="i-lucide-arrow-up-right" class="size-4 text-muted shrink-0 group-hover:text-primary transition-colors" />
|
|
</a>
|
|
</div>
|
|
|
|
</UDashboardPanel>
|
|
</template>
|