Removed old meili pages
Renamed typesense pages for correct routes Updated initial route Fixed copy to clipboard dependency error in nuxt
This commit is contained in:
Julio Ruiz
parent
a3f5bd3512
commit
c883975e33
|
|
@ -22,10 +22,9 @@ const { total: histTotal } = storeToRefs(history)
|
||||||
const links = computed(() => {
|
const links = computed(() => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
label: $i18n.t('nav.bible_studies'),
|
label: t('nav.bible_studies'),
|
||||||
icon: 'ph:books',
|
icon: 'ph:books',
|
||||||
to: '/actividades',
|
to: '/estudios-biblicos',
|
||||||
locale: locale.value,
|
|
||||||
onSelect: () => { open.value = false }
|
onSelect: () => { open.value = false }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -34,18 +33,6 @@ const links = computed(() => {
|
||||||
to: '/conferencias',
|
to: '/conferencias',
|
||||||
onSelect: () => { open.value = false }
|
onSelect: () => { open.value = false }
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: t('nav.bible_studies_ts'),
|
|
||||||
icon: 'ph:books',
|
|
||||||
to: '/estudios-typensense',
|
|
||||||
onSelect: () => { open.value = false }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('nav.conferences_ts'),
|
|
||||||
icon: 'ph:books',
|
|
||||||
to: '/conferencias-typensense',
|
|
||||||
onSelect: () => { open.value = false }
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: t('nav.between_the_lines'),
|
label: t('nav.between_the_lines'),
|
||||||
icon: 'ph:list-magnifying-glass',
|
icon: 'ph:list-magnifying-glass',
|
||||||
|
|
@ -78,9 +65,7 @@ const links = computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<UDashboardGroup unit="rem">
|
<UDashboardGroup unit="rem">
|
||||||
|
|
||||||
<UDashboardSidebar
|
<UDashboardSidebar
|
||||||
id="default"
|
id="default"
|
||||||
v-model:open="open"
|
v-model:open="open"
|
||||||
|
|
|
||||||
|
|
@ -1,261 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
|
||||||
import { breakpointsTailwind, useDebounce } from '@vueuse/core'
|
|
||||||
import type { SearchHit } from '~/types'
|
|
||||||
import InboxActivity from '~/components/inbox/InboxActivity.vue'
|
|
||||||
import { useSettingsStore } from '~/stores/settings'
|
|
||||||
|
|
||||||
const { $i18n } = useNuxtApp();
|
|
||||||
const t = $i18n.t;
|
|
||||||
|
|
||||||
const REQUEST_TIMEOUT_MS = 15000
|
|
||||||
|
|
||||||
const settings = useSettingsStore()
|
|
||||||
|
|
||||||
// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
|
|
||||||
const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
|
|
||||||
|
|
||||||
const query = ref(q0)
|
|
||||||
const debouncedQuery = useDebounce(query, 150)
|
|
||||||
const loading = ref(false)
|
|
||||||
const loadingMore = ref(false)
|
|
||||||
const errorMsg = ref<string | null>(null)
|
|
||||||
|
|
||||||
const meili = useMeiliSearchRef()
|
|
||||||
|
|
||||||
const hits = ref<SearchHit[]>([])
|
|
||||||
const total = ref(0)
|
|
||||||
const activePage = ref(p0)
|
|
||||||
|
|
||||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / settings.pageSize)))
|
|
||||||
|
|
||||||
const hasMore = computed(() =>
|
|
||||||
settings.paginationType === 'infinite_scroll' ? hits.value.length < total.value : false
|
|
||||||
)
|
|
||||||
|
|
||||||
let searchSeq = 0
|
|
||||||
let abortController: AbortController | null = null
|
|
||||||
|
|
||||||
async function runSearch(q: string, page = 1, append = false) {
|
|
||||||
abortController?.abort()
|
|
||||||
const ac = new AbortController()
|
|
||||||
abortController = ac
|
|
||||||
|
|
||||||
const seq = ++searchSeq
|
|
||||||
if (append) loadingMore.value = true
|
|
||||||
else loading.value = true
|
|
||||||
errorMsg.value = null
|
|
||||||
|
|
||||||
const timeoutId = setTimeout(() => ac.abort(), REQUEST_TIMEOUT_MS)
|
|
||||||
|
|
||||||
const isInfinite = settings.paginationType === 'infinite_scroll'
|
|
||||||
const offset = isInfinite
|
|
||||||
? (append ? hits.value.length : 0)
|
|
||||||
: (page - 1) * settings.pageSize
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await meili.index(`activities_${$i18n.locale.value.toUpperCase()}`).search(q || '', {
|
|
||||||
attributesToRetrieve: ['*'],
|
|
||||||
showMatchesPosition: true,
|
|
||||||
limit: settings.pageSize,
|
|
||||||
offset,
|
|
||||||
sort: q ? undefined : ['isodate:desc']
|
|
||||||
}, { signal: ac.signal })
|
|
||||||
|
|
||||||
if (seq !== searchSeq) return
|
|
||||||
|
|
||||||
const newHits = (res?.hits ?? []) as SearchHit[]
|
|
||||||
hits.value = append ? hits.value.concat(newHits) : newHits
|
|
||||||
total.value = res?.estimatedTotalHits ?? hits.value.length
|
|
||||||
if (!append) activePage.value = page
|
|
||||||
} catch (err: unknown) {
|
|
||||||
const name = (err as { name?: string })?.name
|
|
||||||
if (name === 'AbortError') return
|
|
||||||
if (seq !== searchSeq) return
|
|
||||||
errorMsg.value = (err as Error)?.message || 'Error al buscar.'
|
|
||||||
if (!append) {
|
|
||||||
hits.value = []
|
|
||||||
total.value = 0
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
clearTimeout(timeoutId)
|
|
||||||
if (seq === searchSeq) {
|
|
||||||
loading.value = false
|
|
||||||
loadingMore.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadMore() {
|
|
||||||
if (settings.paginationType !== 'infinite_scroll') return
|
|
||||||
if (loadingMore.value || loading.value || !hasMore.value) return
|
|
||||||
runSearch(query.value, activePage.value, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToPage(p: number) {
|
|
||||||
activePage.value = p
|
|
||||||
hits.value = []
|
|
||||||
runSearch(query.value, p, false)
|
|
||||||
}
|
|
||||||
|
|
||||||
function retry() {
|
|
||||||
runSearch(query.value, activePage.value, false)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Selección ──────────────────────────────────────────────────────────────
|
|
||||||
const selectedActivity = ref<SearchHit | null>(null)
|
|
||||||
|
|
||||||
const isActivityPanelOpen = computed({
|
|
||||||
get() { return !!selectedActivity.value },
|
|
||||||
set(value: boolean) { if (!value) selectedActivity.value = null }
|
|
||||||
})
|
|
||||||
|
|
||||||
// ID del item seleccionado para sincronizar con la URL
|
|
||||||
const selectedId = computed(() => selectedActivity.value?._id?.toString() ?? null)
|
|
||||||
|
|
||||||
// ── Scroll ref expuesto desde InboxList ────────────────────────────────────
|
|
||||||
const inboxListRef = ref<{ listEl: HTMLElement | null } | null>(null)
|
|
||||||
const listEl = computed(() => inboxListRef.value?.listEl ?? null)
|
|
||||||
|
|
||||||
// ── Sincronización con URL ─────────────────────────────────────────────────
|
|
||||||
useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listEl })
|
|
||||||
|
|
||||||
// ── Ciclo de vida ──────────────────────────────────────────────────────────
|
|
||||||
onMounted(async () => {
|
|
||||||
await runSearch(q0, p0, false)
|
|
||||||
|
|
||||||
// Restaurar scroll
|
|
||||||
restoreScrollPosition(listEl.value, s0)
|
|
||||||
|
|
||||||
// Restaurar item seleccionado
|
|
||||||
if (sid0) {
|
|
||||||
const found = hits.value.find(h => String(h._id) === sid0)
|
|
||||||
if (found) selectedActivity.value = found
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
abortController?.abort()
|
|
||||||
})
|
|
||||||
|
|
||||||
// Query debounced: solo dispara cuando el usuario cambia la búsqueda,
|
|
||||||
// NO en la carga inicial (debouncedQuery ya arranca en q0).
|
|
||||||
watch(debouncedQuery, (q) => {
|
|
||||||
hits.value = []
|
|
||||||
total.value = 0
|
|
||||||
activePage.value = 1
|
|
||||||
runSearch(q, 1, false)
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(hits, () => {
|
|
||||||
if (!selectedActivity.value) return
|
|
||||||
const stillThere = hits.value.find(h => h._id === selectedActivity.value?._id)
|
|
||||||
if (!stillThere) selectedActivity.value = null
|
|
||||||
})
|
|
||||||
|
|
||||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
|
||||||
const isMobile = breakpoints.smaller('lg')
|
|
||||||
|
|
||||||
useDetailHistory(isActivityPanelOpen, isMobile)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<UDashboardPanel
|
|
||||||
id="activities-list"
|
|
||||||
:default-size="28"
|
|
||||||
:min-size="22"
|
|
||||||
:max-size="40"
|
|
||||||
resizable
|
|
||||||
>
|
|
||||||
<UDashboardNavbar :title="t('nav.bible_studies')">
|
|
||||||
<template #leading>
|
|
||||||
<UDashboardSidebarCollapse />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #trailing>
|
|
||||||
<UBadge :label="total" variant="subtle" />
|
|
||||||
</template>
|
|
||||||
</UDashboardNavbar>
|
|
||||||
|
|
||||||
<div class="px-4 sm:px-6 py-3 border-b border-default">
|
|
||||||
<UInput
|
|
||||||
v-model="query"
|
|
||||||
icon="i-lucide-search"
|
|
||||||
:placeholder="t('search.placeholder')"
|
|
||||||
:loading="loading"
|
|
||||||
size="md"
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
<p class="mt-1.5 flex items-center gap-1 text-[11px] text-dimmed">
|
|
||||||
<UIcon name="i-lucide-lightbulb" class="size-3" />
|
|
||||||
<span v-html="t('search.tip')" />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<UAlert
|
|
||||||
v-if="errorMsg"
|
|
||||||
:title="errorMsg"
|
|
||||||
color="error"
|
|
||||||
variant="subtle"
|
|
||||||
icon="i-lucide-triangle-alert"
|
|
||||||
class="mx-4 my-2"
|
|
||||||
:actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<InboxList
|
|
||||||
ref="inboxListRef"
|
|
||||||
v-model="selectedActivity"
|
|
||||||
:activities="hits"
|
|
||||||
:query="debouncedQuery"
|
|
||||||
:has-more="hasMore"
|
|
||||||
:loading="loading"
|
|
||||||
:loading-more="loadingMore"
|
|
||||||
:show-end-message="settings.paginationType === 'infinite_scroll'"
|
|
||||||
collection="activities"
|
|
||||||
@load-more="loadMore"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
|
|
||||||
class="px-4 py-3 border-t border-default flex justify-center shrink-0"
|
|
||||||
>
|
|
||||||
<UPagination
|
|
||||||
:page="activePage"
|
|
||||||
:total="total"
|
|
||||||
:items-per-page="settings.pageSize"
|
|
||||||
size="sm"
|
|
||||||
@update:page="goToPage"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</UDashboardPanel>
|
|
||||||
|
|
||||||
<InboxActivity
|
|
||||||
v-if="selectedActivity"
|
|
||||||
:activity="selectedActivity"
|
|
||||||
collection="activities"
|
|
||||||
:query="debouncedQuery"
|
|
||||||
@close="selectedActivity = null"
|
|
||||||
/>
|
|
||||||
<div v-else class="hidden lg:flex flex-1 items-center justify-center">
|
|
||||||
<div class="flex flex-col items-center gap-2 text-dimmed">
|
|
||||||
<UIcon name="i-lucide-search" class="size-16" />
|
|
||||||
<p class="text-sm">
|
|
||||||
{{ query ? t('search.listselect') : t('search.emptytext') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ClientOnly>
|
|
||||||
<USlideover v-if="isMobile" v-model:open="isActivityPanelOpen">
|
|
||||||
<template #content>
|
|
||||||
<InboxActivity
|
|
||||||
v-if="selectedActivity"
|
|
||||||
:activity="selectedActivity"
|
|
||||||
collection="activities"
|
|
||||||
:query="debouncedQuery"
|
|
||||||
@close="selectedActivity = null"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</USlideover>
|
|
||||||
</ClientOnly>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,787 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
|
||||||
import { breakpointsTailwind, useDebounce } from '@vueuse/core'
|
|
||||||
import EstudiosTypensenseDetail from '~/components/estudiosTypensense/EstudiosTypensenseDetail.vue'
|
|
||||||
import { useSettingsStore } from '~/stores/settings'
|
|
||||||
|
|
||||||
const PARAGRAPHS_COLLECTION = 'paragraphs'
|
|
||||||
const DOCUMENTS_COLLECTION = 'documents'
|
|
||||||
const QUERY_BY = 'text'
|
|
||||||
const FAVORITES_COLLECTION = 'conferences-ts'
|
|
||||||
|
|
||||||
const { $i18n } = useNuxtApp()
|
|
||||||
const t = $i18n.t
|
|
||||||
const { locale } = useI18n()
|
|
||||||
|
|
||||||
const filterBy = computed(() => `locale:=${locale.value} && type:=conferences`)
|
|
||||||
const REQUEST_TIMEOUT_MS = 15000
|
|
||||||
|
|
||||||
const settings = useSettingsStore()
|
|
||||||
|
|
||||||
// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
|
|
||||||
const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
|
|
||||||
|
|
||||||
const query = ref(q0)
|
|
||||||
const debouncedQuery = useDebounce(query, 150)
|
|
||||||
const loading = ref(false)
|
|
||||||
const loadingMore = ref(false)
|
|
||||||
const errorMsg = ref<string | null>(null)
|
|
||||||
|
|
||||||
// ---- Types ----------------------------------------------------------------
|
|
||||||
|
|
||||||
interface ParagraphDoc {
|
|
||||||
id?: string
|
|
||||||
document_id: string
|
|
||||||
text: string
|
|
||||||
number: number
|
|
||||||
locale: string
|
|
||||||
type: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DocMeta {
|
|
||||||
id: string
|
|
||||||
title: string
|
|
||||||
date?: string
|
|
||||||
timestamp?: number
|
|
||||||
place?: string
|
|
||||||
city?: string
|
|
||||||
state?: string
|
|
||||||
country?: string
|
|
||||||
type?: string
|
|
||||||
slug?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DocumentDoc extends DocMeta {
|
|
||||||
code: string
|
|
||||||
locale: string
|
|
||||||
files?: {
|
|
||||||
youtube?: string
|
|
||||||
video?: string
|
|
||||||
audio?: string
|
|
||||||
booklet?: string
|
|
||||||
simple?: string
|
|
||||||
}
|
|
||||||
body?: string
|
|
||||||
[key: string]: unknown
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TypesenseHighlight {
|
|
||||||
field?: string
|
|
||||||
snippet?: string
|
|
||||||
value?: string
|
|
||||||
matched_tokens?: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TypesenseParagraphHit {
|
|
||||||
document: ParagraphDoc
|
|
||||||
highlights?: TypesenseHighlight[]
|
|
||||||
highlight?: Record<string, { snippet?: string, value?: string }>
|
|
||||||
text_match?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TypesenseGroupedHit {
|
|
||||||
group_key: string[]
|
|
||||||
hits: TypesenseParagraphHit[]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TypesenseSearchResponse {
|
|
||||||
found: number
|
|
||||||
grouped_hits?: TypesenseGroupedHit[]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SearchGroup {
|
|
||||||
docId: string
|
|
||||||
firstHit: TypesenseParagraphHit
|
|
||||||
allHits: TypesenseParagraphHit[]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface BrowseItem {
|
|
||||||
docId: string
|
|
||||||
meta: DocMeta
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DisplayGroup {
|
|
||||||
docId: string
|
|
||||||
meta: DocMeta | undefined
|
|
||||||
firstHit: TypesenseParagraphHit | null
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---- State ----------------------------------------------------------------
|
|
||||||
|
|
||||||
// Modo búsqueda (con query): grupos devueltos por Typesense
|
|
||||||
const groupedHits = ref<SearchGroup[]>([])
|
|
||||||
const total = ref(0)
|
|
||||||
const currentPage = ref(1)
|
|
||||||
|
|
||||||
const hasMore = computed(() =>
|
|
||||||
settings.paginationType === 'infinite_scroll' ? groupedHits.value.length < total.value : false
|
|
||||||
)
|
|
||||||
|
|
||||||
// Progressive display (sólo en scroll infinito)
|
|
||||||
const visibleGroupCount = ref(10)
|
|
||||||
|
|
||||||
const visibleGroups = computed(() =>
|
|
||||||
settings.paginationType === 'infinite_scroll'
|
|
||||||
? groupedHits.value.slice(0, visibleGroupCount.value)
|
|
||||||
: groupedHits.value
|
|
||||||
)
|
|
||||||
|
|
||||||
const hasMoreVisible = computed(() =>
|
|
||||||
settings.paginationType === 'infinite_scroll' &&
|
|
||||||
visibleGroupCount.value < groupedHits.value.length
|
|
||||||
)
|
|
||||||
|
|
||||||
// Modo exploración (sin query): documentos ordenados por fecha
|
|
||||||
const browseItems = ref<BrowseItem[]>([])
|
|
||||||
const browseTotal = ref(0)
|
|
||||||
const browsePage = ref(1)
|
|
||||||
|
|
||||||
const hasMoreBrowse = computed(() =>
|
|
||||||
settings.paginationType === 'infinite_scroll'
|
|
||||||
? browseItems.value.length < browseTotal.value
|
|
||||||
: false
|
|
||||||
)
|
|
||||||
|
|
||||||
// Grupo unificado para el template
|
|
||||||
const displayGroups = computed((): DisplayGroup[] => {
|
|
||||||
if (!debouncedQuery.value.trim()) {
|
|
||||||
return browseItems.value.map(item => ({
|
|
||||||
docId: item.docId,
|
|
||||||
meta: item.meta,
|
|
||||||
firstHit: null
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
return visibleGroups.value.map(g => ({
|
|
||||||
docId: g.docId,
|
|
||||||
meta: docCache.value[g.docId],
|
|
||||||
firstHit: g.firstHit
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Paginación activa (compartida entre browse y search)
|
|
||||||
const activePage = ref(p0)
|
|
||||||
|
|
||||||
const displayTotal = computed(() =>
|
|
||||||
debouncedQuery.value.trim() ? total.value : browseTotal.value
|
|
||||||
)
|
|
||||||
|
|
||||||
const totalPages = computed(() =>
|
|
||||||
Math.max(1, Math.ceil(displayTotal.value / settings.pageSize))
|
|
||||||
)
|
|
||||||
|
|
||||||
// Cache de metadatos por document_id (sólo modo búsqueda)
|
|
||||||
const docCache = ref<Record<string, DocMeta>>({})
|
|
||||||
|
|
||||||
const { documentsApi } = useTypesenseApi()
|
|
||||||
|
|
||||||
// ---- Batch fetch de metadatos de documentos -------------------------------
|
|
||||||
|
|
||||||
async function fetchDocumentMeta(docIds: string[]) {
|
|
||||||
const unique = docIds.filter(id => id && !(id in docCache.value))
|
|
||||||
console.log('Fetching metadata for documents', unique)
|
|
||||||
try {
|
|
||||||
const res = await documentsApi.multiSearch({
|
|
||||||
multiSearchParameters: {},
|
|
||||||
multiSearchSearchesParameter: {
|
|
||||||
searches: [{
|
|
||||||
collection: DOCUMENTS_COLLECTION,
|
|
||||||
q: '*',
|
|
||||||
queryBy: 'title',
|
|
||||||
filterBy: `id:=[${unique.join(',')}]`,
|
|
||||||
includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug',
|
|
||||||
perPage: unique.length,
|
|
||||||
page: 1
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocMeta }> })?.hits ?? []
|
|
||||||
for (const hit of docHits) {
|
|
||||||
if (hit.document.id) {
|
|
||||||
docCache.value[hit.document.id] = hit.document
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching document metadata', err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---- Búsqueda de párrafos (con query) -------------------------------------
|
|
||||||
|
|
||||||
let searchSeq = 0
|
|
||||||
let timeoutId: ReturnType<typeof setTimeout> | null = null
|
|
||||||
|
|
||||||
async function runSearch(q: string, page = 1, append = false) {
|
|
||||||
const seq = ++searchSeq
|
|
||||||
if (append) loadingMore.value = true
|
|
||||||
else loading.value = true
|
|
||||||
errorMsg.value = null
|
|
||||||
|
|
||||||
if (timeoutId) clearTimeout(timeoutId)
|
|
||||||
timeoutId = setTimeout(() => {
|
|
||||||
if (seq === searchSeq) {
|
|
||||||
loading.value = false
|
|
||||||
loadingMore.value = false
|
|
||||||
errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
|
|
||||||
}
|
|
||||||
}, REQUEST_TIMEOUT_MS)
|
|
||||||
|
|
||||||
const isInfinite = settings.paginationType === 'infinite_scroll'
|
|
||||||
const typePage = isInfinite ? (append ? currentPage.value + 1 : 1) : page
|
|
||||||
|
|
||||||
try {
|
|
||||||
const multi = await documentsApi.multiSearch({
|
|
||||||
multiSearchParameters: {},
|
|
||||||
multiSearchSearchesParameter: {
|
|
||||||
searches: [{
|
|
||||||
collection: PARAGRAPHS_COLLECTION,
|
|
||||||
q: q || '*',
|
|
||||||
queryBy: QUERY_BY,
|
|
||||||
filterBy: filterBy.value,
|
|
||||||
perPage: settings.pageSize,
|
|
||||||
page: typePage,
|
|
||||||
highlightFullFields: QUERY_BY,
|
|
||||||
highlightFields: QUERY_BY,
|
|
||||||
highlightStartTag: '<mark class="search-match">',
|
|
||||||
highlightEndTag: '</mark>',
|
|
||||||
highlightAffixNumTokens: 30,
|
|
||||||
groupBy: 'document_id'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if (seq !== searchSeq) return
|
|
||||||
|
|
||||||
const res = (multi?.results?.[0] ?? {}) as TypesenseSearchResponse
|
|
||||||
const rawGroups = res?.groupedHits ?? []
|
|
||||||
|
|
||||||
console.log('Raw groups', rawGroups)
|
|
||||||
const newGroups: SearchGroup[] = rawGroups.map(g => ({
|
|
||||||
docId: g.groupKey[0]!,
|
|
||||||
firstHit: g.hits[0]!,
|
|
||||||
allHits: g.hits
|
|
||||||
}))
|
|
||||||
|
|
||||||
if (!append) docCache.value = {}
|
|
||||||
const newDocIds = newGroups.map(g => g.docId).filter(Boolean)
|
|
||||||
await fetchDocumentMeta(newDocIds)
|
|
||||||
|
|
||||||
if (seq !== searchSeq) return
|
|
||||||
|
|
||||||
groupedHits.value = append ? groupedHits.value.concat(newGroups) : newGroups
|
|
||||||
total.value = res?.found ?? groupedHits.value.length
|
|
||||||
currentPage.value = typePage
|
|
||||||
if (!append) activePage.value = page
|
|
||||||
} catch (err: unknown) {
|
|
||||||
if (seq !== searchSeq) return
|
|
||||||
console.error('Typesense error', err)
|
|
||||||
errorMsg.value = (err as Error)?.message || 'Error al buscar.'
|
|
||||||
if (!append) {
|
|
||||||
groupedHits.value = []
|
|
||||||
total.value = 0
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
if (seq === searchSeq) {
|
|
||||||
if (timeoutId) clearTimeout(timeoutId)
|
|
||||||
loading.value = false
|
|
||||||
loadingMore.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---- Exploración por fecha (sin query) ------------------------------------
|
|
||||||
|
|
||||||
async function runBrowse(page = 1, append = false) {
|
|
||||||
const seq = ++searchSeq
|
|
||||||
if (append) loadingMore.value = true
|
|
||||||
else loading.value = true
|
|
||||||
errorMsg.value = null
|
|
||||||
|
|
||||||
if (timeoutId) clearTimeout(timeoutId)
|
|
||||||
timeoutId = setTimeout(() => {
|
|
||||||
if (seq === searchSeq) {
|
|
||||||
loading.value = false
|
|
||||||
loadingMore.value = false
|
|
||||||
errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
|
|
||||||
}
|
|
||||||
}, REQUEST_TIMEOUT_MS)
|
|
||||||
|
|
||||||
const isInfinite = settings.paginationType === 'infinite_scroll'
|
|
||||||
const typePage = isInfinite ? (append ? browsePage.value + 1 : 1) : page
|
|
||||||
|
|
||||||
try {
|
|
||||||
const multi = await documentsApi.multiSearch({
|
|
||||||
multiSearchParameters: {},
|
|
||||||
multiSearchSearchesParameter: {
|
|
||||||
searches: [{
|
|
||||||
collection: DOCUMENTS_COLLECTION,
|
|
||||||
q: '*',
|
|
||||||
queryBy: 'title',
|
|
||||||
filterBy: filterBy.value,
|
|
||||||
sortBy: 'timestamp:desc',
|
|
||||||
perPage: settings.pageSize,
|
|
||||||
page: typePage,
|
|
||||||
includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if (seq !== searchSeq) return
|
|
||||||
|
|
||||||
const result = (multi?.results?.[0] as { found?: number, hits?: Array<{ document: DocMeta }> } | undefined)
|
|
||||||
const newItems = (result?.hits ?? []).map(h => ({
|
|
||||||
docId: h.document.id!,
|
|
||||||
meta: h.document
|
|
||||||
}))
|
|
||||||
|
|
||||||
browseItems.value = append ? browseItems.value.concat(newItems) : newItems
|
|
||||||
browseTotal.value = result?.found ?? browseItems.value.length
|
|
||||||
browsePage.value = typePage
|
|
||||||
if (!append) activePage.value = page
|
|
||||||
} catch (err: unknown) {
|
|
||||||
if (seq !== searchSeq) return
|
|
||||||
console.error('Typesense error', err)
|
|
||||||
errorMsg.value = (err as Error)?.message || 'Error al buscar.'
|
|
||||||
if (!append) {
|
|
||||||
browseItems.value = []
|
|
||||||
browseTotal.value = 0
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
if (seq === searchSeq) {
|
|
||||||
if (timeoutId) clearTimeout(timeoutId)
|
|
||||||
loading.value = false
|
|
||||||
loadingMore.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadMore() {
|
|
||||||
if (settings.paginationType !== 'infinite_scroll') return
|
|
||||||
if (loadingMore.value || loading.value || !hasMore.value) return
|
|
||||||
runSearch(query.value, currentPage.value, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToPage(p: number) {
|
|
||||||
activePage.value = p
|
|
||||||
if (!debouncedQuery.value.trim()) {
|
|
||||||
browseItems.value = []
|
|
||||||
runBrowse(p, false)
|
|
||||||
} else {
|
|
||||||
groupedHits.value = []
|
|
||||||
runSearch(query.value, p, false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const listContainer = ref<HTMLElement | null>(null)
|
|
||||||
|
|
||||||
function onListScroll() {
|
|
||||||
if (settings.paginationType !== 'infinite_scroll') return
|
|
||||||
const el = listContainer.value
|
|
||||||
if (!el) return
|
|
||||||
if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
|
|
||||||
if (!debouncedQuery.value.trim()) {
|
|
||||||
if (hasMoreBrowse.value && !loadingMore.value && !loading.value) {
|
|
||||||
runBrowse(browsePage.value, true)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (hasMoreVisible.value) {
|
|
||||||
visibleGroupCount.value += 10
|
|
||||||
} else if (hasMore.value && !loadingMore.value && !loading.value) {
|
|
||||||
loadMore()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function retry() {
|
|
||||||
if (!query.value.trim()) {
|
|
||||||
runBrowse(activePage.value, false)
|
|
||||||
} else {
|
|
||||||
runSearch(query.value, activePage.value, false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onBeforeUnmount(() => { if (timeoutId) clearTimeout(timeoutId) })
|
|
||||||
|
|
||||||
watch(debouncedQuery, (q) => {
|
|
||||||
activePage.value = 1
|
|
||||||
if (!q.trim()) {
|
|
||||||
groupedHits.value = []
|
|
||||||
total.value = 0
|
|
||||||
currentPage.value = 1
|
|
||||||
visibleGroupCount.value = 10
|
|
||||||
browseItems.value = []
|
|
||||||
browseTotal.value = 0
|
|
||||||
browsePage.value = 1
|
|
||||||
runBrowse(1, false)
|
|
||||||
} else {
|
|
||||||
browseItems.value = []
|
|
||||||
browseTotal.value = 0
|
|
||||||
browsePage.value = 1
|
|
||||||
groupedHits.value = []
|
|
||||||
total.value = 0
|
|
||||||
currentPage.value = 1
|
|
||||||
visibleGroupCount.value = 10
|
|
||||||
runSearch(q, 1, false)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// ---- Selección y carga del detalle ----------------------------------------
|
|
||||||
|
|
||||||
const selectedDocId = ref<string | null>(null)
|
|
||||||
const selectedDocument = ref<DocumentDoc | null>(null)
|
|
||||||
const documentLoading = ref(false)
|
|
||||||
const selectedParagraphs = ref<TypesenseParagraphHit[]>([])
|
|
||||||
const paragraphsLoading = ref(false)
|
|
||||||
|
|
||||||
const selectedHit = ref<TypesenseParagraphHit | null>(null)
|
|
||||||
const selectedMatchingHits = ref<TypesenseParagraphHit[]>([])
|
|
||||||
|
|
||||||
async function fetchFullDocument(docId: string) {
|
|
||||||
documentLoading.value = true
|
|
||||||
selectedDocument.value = null
|
|
||||||
try {
|
|
||||||
const res = await documentsApi.multiSearch({
|
|
||||||
multiSearchParameters: {},
|
|
||||||
multiSearchSearchesParameter: {
|
|
||||||
searches: [{
|
|
||||||
collection: DOCUMENTS_COLLECTION,
|
|
||||||
q: '*',
|
|
||||||
queryBy: 'title',
|
|
||||||
filterBy: `id:=${docId}`,
|
|
||||||
perPage: 1,
|
|
||||||
page: 1
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocumentDoc }> })?.hits ?? []
|
|
||||||
selectedDocument.value = docHits[0]?.document ?? null
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching document', err)
|
|
||||||
selectedDocument.value = null
|
|
||||||
} finally {
|
|
||||||
documentLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchDocumentParagraphs(docId: string) {
|
|
||||||
paragraphsLoading.value = true
|
|
||||||
selectedParagraphs.value = []
|
|
||||||
const PER_PAGE = 250
|
|
||||||
let page = 1
|
|
||||||
let totalParagraphs = 0
|
|
||||||
const all: Array<{ document: ParagraphDoc }> = []
|
|
||||||
try {
|
|
||||||
do {
|
|
||||||
const res = await documentsApi.multiSearch({
|
|
||||||
multiSearchParameters: {},
|
|
||||||
multiSearchSearchesParameter: {
|
|
||||||
searches: [{
|
|
||||||
collection: PARAGRAPHS_COLLECTION,
|
|
||||||
q: '*',
|
|
||||||
queryBy: '',
|
|
||||||
filterBy: `document_id:=${docId} && ${filterBy.value}`,
|
|
||||||
perPage: PER_PAGE,
|
|
||||||
page,
|
|
||||||
sortBy: 'number:asc'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const result = (res?.results?.[0] as { found?: number, hits?: Array<{ document: ParagraphDoc }> } | undefined)
|
|
||||||
if (!result) break
|
|
||||||
if (page === 1) totalParagraphs = result.found ?? 0
|
|
||||||
all.push(...(result.hits ?? []))
|
|
||||||
page++
|
|
||||||
} while (all.length < totalParagraphs)
|
|
||||||
selectedParagraphs.value = all.map(h => ({ document: h.document }))
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching paragraphs', err)
|
|
||||||
selectedParagraphs.value = []
|
|
||||||
} finally {
|
|
||||||
paragraphsLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function selectGroup(group: DisplayGroup) {
|
|
||||||
selectedDocId.value = group.docId
|
|
||||||
selectedHit.value = group.firstHit
|
|
||||||
const searchGroup = groupedHits.value.find(g => g.docId === group.docId)
|
|
||||||
selectedMatchingHits.value = searchGroup?.allHits ?? []
|
|
||||||
fetchFullDocument(group.docId)
|
|
||||||
fetchDocumentParagraphs(group.docId)
|
|
||||||
}
|
|
||||||
|
|
||||||
const isPanelOpen = computed({
|
|
||||||
get() { return !!selectedDocId.value },
|
|
||||||
set(v: boolean) {
|
|
||||||
if (!v) {
|
|
||||||
selectedDocId.value = null
|
|
||||||
selectedDocument.value = null
|
|
||||||
selectedParagraphs.value = []
|
|
||||||
selectedHit.value = null
|
|
||||||
selectedMatchingHits.value = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(groupedHits, () => {
|
|
||||||
if (!selectedDocId.value || !debouncedQuery.value.trim()) return
|
|
||||||
const still = groupedHits.value.find(g => g.docId === selectedDocId.value)
|
|
||||||
if (!still) {
|
|
||||||
selectedDocId.value = null
|
|
||||||
selectedDocument.value = null
|
|
||||||
selectedParagraphs.value = []
|
|
||||||
selectedHit.value = null
|
|
||||||
selectedMatchingHits.value = []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// ID del documento seleccionado para sincronizar con la URL
|
|
||||||
const selectedId = computed(() => selectedDocId.value)
|
|
||||||
|
|
||||||
// ── Sincronización con URL ─────────────────────────────────────────────────
|
|
||||||
useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listContainer })
|
|
||||||
|
|
||||||
// ── Ciclo de vida ──────────────────────────────────────────────────────────
|
|
||||||
onMounted(async () => {
|
|
||||||
// Carga inicial: browse si no hay query, search si hay query
|
|
||||||
if (q0.trim()) {
|
|
||||||
await runSearch(q0, p0, false)
|
|
||||||
} else {
|
|
||||||
await runBrowse(p0, false)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Restaurar scroll
|
|
||||||
restoreScrollPosition(listContainer.value, s0)
|
|
||||||
|
|
||||||
// Restaurar documento seleccionado
|
|
||||||
if (sid0) {
|
|
||||||
const group = displayGroups.value.find(g => g.docId === sid0)
|
|
||||||
if (group) {
|
|
||||||
selectGroup(group)
|
|
||||||
} else {
|
|
||||||
selectedDocId.value = sid0
|
|
||||||
fetchFullDocument(sid0)
|
|
||||||
fetchDocumentParagraphs(sid0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
|
||||||
const isMobile = breakpoints.smaller('lg')
|
|
||||||
|
|
||||||
useDetailHistory(isPanelOpen, isMobile)
|
|
||||||
|
|
||||||
// ---- Helpers de presentación ----------------------------------------------
|
|
||||||
|
|
||||||
function highlightedFor(hit: TypesenseParagraphHit, field: string): string | null {
|
|
||||||
const fromArr = hit.highlights?.find(h => h.field === field)
|
|
||||||
if (fromArr?.snippet) return fromArr.snippet
|
|
||||||
if (fromArr?.value) return fromArr.value
|
|
||||||
const fromObj = hit.highlight?.[field]
|
|
||||||
if (fromObj?.snippet) return fromObj.snippet
|
|
||||||
if (fromObj?.value) return fromObj.value
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function metaDate(meta: DocMeta | undefined): string {
|
|
||||||
if (!meta) return ''
|
|
||||||
const ts = meta.timestamp || (meta.date ? Math.floor(new Date(meta.date).getTime() / 1000) : null)
|
|
||||||
if (!ts) return meta.date || ''
|
|
||||||
return formatDate(ts)
|
|
||||||
}
|
|
||||||
|
|
||||||
function metaLocation(meta: DocMeta | undefined): string {
|
|
||||||
if (!meta) return ''
|
|
||||||
return formatLocation({
|
|
||||||
id: meta.id,
|
|
||||||
date: meta.timestamp ?? 0,
|
|
||||||
slug: meta.slug ?? '',
|
|
||||||
type: meta.type ?? '',
|
|
||||||
place: meta.place ?? '',
|
|
||||||
city: meta.city ?? '',
|
|
||||||
state: meta.state ?? '',
|
|
||||||
country: meta.country ?? '',
|
|
||||||
thumbnail: ''
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<UDashboardPanel
|
|
||||||
id="conferencias-ts-list"
|
|
||||||
:default-size="32"
|
|
||||||
:min-size="24"
|
|
||||||
:max-size="45"
|
|
||||||
resizable
|
|
||||||
>
|
|
||||||
<UDashboardNavbar :title="t('nav.conferences_ts')">
|
|
||||||
<template #leading>
|
|
||||||
<UDashboardSidebarCollapse />
|
|
||||||
</template>
|
|
||||||
<template #trailing>
|
|
||||||
<UBadge :label="displayTotal" variant="subtle" />
|
|
||||||
</template>
|
|
||||||
</UDashboardNavbar>
|
|
||||||
|
|
||||||
<div class="px-4 sm:px-6 py-3 border-b border-default">
|
|
||||||
<UInput
|
|
||||||
v-model="query"
|
|
||||||
icon="i-lucide-search"
|
|
||||||
:placeholder="t('search.placeholder')"
|
|
||||||
:loading="loading"
|
|
||||||
size="md"
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<UAlert
|
|
||||||
v-if="errorMsg"
|
|
||||||
:title="errorMsg"
|
|
||||||
color="error"
|
|
||||||
variant="subtle"
|
|
||||||
icon="i-lucide-triangle-alert"
|
|
||||||
class="mx-4 my-2"
|
|
||||||
:actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div ref="listContainer" class="overflow-y-auto divide-y divide-default flex-1" @scroll="onListScroll">
|
|
||||||
<div
|
|
||||||
v-if="loading && !displayGroups.length"
|
|
||||||
class="flex items-center justify-center gap-2 py-16 text-sm text-muted"
|
|
||||||
>
|
|
||||||
<UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
|
|
||||||
Buscando...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-else-if="!displayGroups.length"
|
|
||||||
class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-sm"
|
|
||||||
>
|
|
||||||
<UIcon name="i-lucide-inbox" class="size-10" />
|
|
||||||
<p>{{ query ? `Sin coincidencias para "${query}"` : 'Sin resultados' }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="group in displayGroups"
|
|
||||||
:key="group.docId"
|
|
||||||
class="p-4 sm:px-6 text-sm cursor-pointer border-b-2 transition-colors"
|
|
||||||
:class="[
|
|
||||||
selectedDocId === group.docId
|
|
||||||
? 'border-carpablue bg-carpablue/10'
|
|
||||||
: 'border-gray-200 hover:border-carpablue hover:bg-carpablue/5'
|
|
||||||
]"
|
|
||||||
@click="selectGroup(group)"
|
|
||||||
>
|
|
||||||
<div class="mb-1">
|
|
||||||
<p class="text-sm font-semibold line-clamp-2 text-highlighted">
|
|
||||||
{{ group.meta?.title || group.docId }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-xs mb-2 text-muted">
|
|
||||||
<span
|
|
||||||
v-if="metaDate(group.meta)"
|
|
||||||
class="flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<UIcon name="ph:calendar" class="size-4 text-carpablue" />
|
|
||||||
{{ metaDate(group.meta) }}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="metaLocation(group.meta)"
|
|
||||||
class="flex items-center gap-1 truncate"
|
|
||||||
>
|
|
||||||
<UIcon name="ph:map-pin" class="size-4 text-carpablue shrink-0" />
|
|
||||||
<span class="truncate">{{ metaLocation(group.meta) }}</span>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Snippet con highlight: solo en modo búsqueda -->
|
|
||||||
<div
|
|
||||||
v-if="group.firstHit"
|
|
||||||
class="snippet-html text-sm text-dimmed"
|
|
||||||
v-html="highlightedFor(group.firstHit, 'text') || group.firstHit.document.text"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Infinite scroll: cargando más -->
|
|
||||||
<div
|
|
||||||
v-if="settings.paginationType === 'infinite_scroll' && loadingMore"
|
|
||||||
class="flex items-center justify-center gap-2 py-4 text-sm text-muted"
|
|
||||||
>
|
|
||||||
<UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
|
|
||||||
Cargando más...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-else-if="settings.paginationType === 'infinite_scroll' && displayGroups.length && !hasMoreBrowse && !hasMoreVisible && !hasMore && !loading"
|
|
||||||
class="py-3 text-center text-xs text-dimmed"
|
|
||||||
>
|
|
||||||
No hay más resultados
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Paginación numerada -->
|
|
||||||
<div
|
|
||||||
v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
|
|
||||||
class="px-4 py-3 border-t border-default flex justify-center shrink-0"
|
|
||||||
>
|
|
||||||
<UPagination
|
|
||||||
:page="activePage"
|
|
||||||
:total="displayTotal"
|
|
||||||
:items-per-page="settings.pageSize"
|
|
||||||
size="sm"
|
|
||||||
@update:page="goToPage"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</UDashboardPanel>
|
|
||||||
|
|
||||||
<!-- Panel de detalle (escritorio) -->
|
|
||||||
<EstudiosTypensenseDetail
|
|
||||||
v-if="selectedDocId && !isMobile"
|
|
||||||
:document="selectedDocument"
|
|
||||||
:document-loading="documentLoading"
|
|
||||||
:paragraphs="selectedParagraphs"
|
|
||||||
:paragraphs-loading="paragraphsLoading"
|
|
||||||
:collection="FAVORITES_COLLECTION"
|
|
||||||
:query="debouncedQuery"
|
|
||||||
:selected-hit="selectedHit"
|
|
||||||
:selected-matching-hits="selectedMatchingHits"
|
|
||||||
@close="isPanelOpen = false"
|
|
||||||
/>
|
|
||||||
<div v-else-if="!isMobile" class="hidden lg:flex flex-1 items-center justify-center">
|
|
||||||
<div class="flex flex-col items-center gap-2 text-dimmed">
|
|
||||||
<UIcon name="i-lucide-search" class="size-16" />
|
|
||||||
<p class="text-sm">Selecciona una conferencia para ver el detalle</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Panel de detalle (móvil) -->
|
|
||||||
<ClientOnly>
|
|
||||||
<USlideover v-if="isMobile" v-model:open="isPanelOpen">
|
|
||||||
<template #content>
|
|
||||||
<EstudiosTypensenseDetail
|
|
||||||
v-if="selectedDocId"
|
|
||||||
:document="selectedDocument"
|
|
||||||
:document-loading="documentLoading"
|
|
||||||
:paragraphs="selectedParagraphs"
|
|
||||||
:paragraphs-loading="paragraphsLoading"
|
|
||||||
:collection="FAVORITES_COLLECTION"
|
|
||||||
:query="debouncedQuery"
|
|
||||||
:selected-hit="selectedHit"
|
|
||||||
:selected-matching-hits="selectedMatchingHits"
|
|
||||||
@close="isPanelOpen = false"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</USlideover>
|
|
||||||
</ClientOnly>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.snippet-html :deep(p) {
|
|
||||||
display: inline;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.snippet-html :deep(br) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,18 +1,24 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
||||||
import { breakpointsTailwind, useDebounce } from '@vueuse/core'
|
import { breakpointsTailwind, useDebounce } from '@vueuse/core'
|
||||||
import type { SearchHit } from '~/types'
|
import EstudiosTypensenseDetail from '~/components/estudiosTypensense/EstudiosTypensenseDetail.vue'
|
||||||
import InboxActivity from '~/components/inbox/InboxActivity.vue'
|
|
||||||
import { useSettingsStore } from '~/stores/settings'
|
import { useSettingsStore } from '~/stores/settings'
|
||||||
|
|
||||||
const { $i18n } = useNuxtApp();
|
const PARAGRAPHS_COLLECTION = 'paragraphs'
|
||||||
const t = $i18n.t;
|
const DOCUMENTS_COLLECTION = 'documents'
|
||||||
|
const QUERY_BY = 'text'
|
||||||
|
const FAVORITES_COLLECTION = 'conferences-ts'
|
||||||
|
|
||||||
|
const { $i18n } = useNuxtApp()
|
||||||
|
const t = $i18n.t
|
||||||
|
const { locale } = useI18n()
|
||||||
|
|
||||||
|
const filterBy = computed(() => `locale:=${locale.value} && type:=conferences`)
|
||||||
const REQUEST_TIMEOUT_MS = 15000
|
const REQUEST_TIMEOUT_MS = 15000
|
||||||
|
|
||||||
const settings = useSettingsStore()
|
const settings = useSettingsStore()
|
||||||
|
|
||||||
// ── Restore state from URL before creating refs ────────────────────────────
|
// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
|
||||||
const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
|
const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
|
||||||
|
|
||||||
const query = ref(q0)
|
const query = ref(q0)
|
||||||
|
|
@ -21,66 +27,327 @@ const loading = ref(false)
|
||||||
const loadingMore = ref(false)
|
const loadingMore = ref(false)
|
||||||
const errorMsg = ref<string | null>(null)
|
const errorMsg = ref<string | null>(null)
|
||||||
|
|
||||||
const meili = useMeiliSearchRef()
|
// ---- Types ----------------------------------------------------------------
|
||||||
|
|
||||||
const hits = ref<SearchHit[]>([])
|
interface ParagraphDoc {
|
||||||
|
id?: string
|
||||||
|
document_id: string
|
||||||
|
text: string
|
||||||
|
number: number
|
||||||
|
locale: string
|
||||||
|
type: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DocMeta {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
date?: string
|
||||||
|
timestamp?: number
|
||||||
|
place?: string
|
||||||
|
city?: string
|
||||||
|
state?: string
|
||||||
|
country?: string
|
||||||
|
type?: string
|
||||||
|
slug?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DocumentDoc extends DocMeta {
|
||||||
|
code: string
|
||||||
|
locale: string
|
||||||
|
files?: {
|
||||||
|
youtube?: string
|
||||||
|
video?: string
|
||||||
|
audio?: string
|
||||||
|
booklet?: string
|
||||||
|
simple?: string
|
||||||
|
}
|
||||||
|
body?: string
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TypesenseHighlight {
|
||||||
|
field?: string
|
||||||
|
snippet?: string
|
||||||
|
value?: string
|
||||||
|
matched_tokens?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TypesenseParagraphHit {
|
||||||
|
document: ParagraphDoc
|
||||||
|
highlights?: TypesenseHighlight[]
|
||||||
|
highlight?: Record<string, { snippet?: string, value?: string }>
|
||||||
|
text_match?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TypesenseGroupedHit {
|
||||||
|
group_key: string[]
|
||||||
|
hits: TypesenseParagraphHit[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TypesenseSearchResponse {
|
||||||
|
found: number
|
||||||
|
grouped_hits?: TypesenseGroupedHit[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SearchGroup {
|
||||||
|
docId: string
|
||||||
|
firstHit: TypesenseParagraphHit
|
||||||
|
allHits: TypesenseParagraphHit[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BrowseItem {
|
||||||
|
docId: string
|
||||||
|
meta: DocMeta
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DisplayGroup {
|
||||||
|
docId: string
|
||||||
|
meta: DocMeta | undefined
|
||||||
|
firstHit: TypesenseParagraphHit | null
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- State ----------------------------------------------------------------
|
||||||
|
|
||||||
|
// Modo búsqueda (con query): grupos devueltos por Typesense
|
||||||
|
const groupedHits = ref<SearchGroup[]>([])
|
||||||
const total = ref(0)
|
const total = ref(0)
|
||||||
const activePage = ref(p0)
|
const currentPage = ref(1)
|
||||||
|
|
||||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / settings.pageSize)))
|
|
||||||
|
|
||||||
const hasMore = computed(() =>
|
const hasMore = computed(() =>
|
||||||
settings.paginationType === 'infinite_scroll' ? hits.value.length < total.value : false
|
settings.paginationType === 'infinite_scroll' ? groupedHits.value.length < total.value : false
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// Progressive display (sólo en scroll infinito)
|
||||||
|
const visibleGroupCount = ref(10)
|
||||||
|
|
||||||
|
const visibleGroups = computed(() =>
|
||||||
|
settings.paginationType === 'infinite_scroll'
|
||||||
|
? groupedHits.value.slice(0, visibleGroupCount.value)
|
||||||
|
: groupedHits.value
|
||||||
|
)
|
||||||
|
|
||||||
|
const hasMoreVisible = computed(() =>
|
||||||
|
settings.paginationType === 'infinite_scroll' &&
|
||||||
|
visibleGroupCount.value < groupedHits.value.length
|
||||||
|
)
|
||||||
|
|
||||||
|
// Modo exploración (sin query): documentos ordenados por fecha
|
||||||
|
const browseItems = ref<BrowseItem[]>([])
|
||||||
|
const browseTotal = ref(0)
|
||||||
|
const browsePage = ref(1)
|
||||||
|
|
||||||
|
const hasMoreBrowse = computed(() =>
|
||||||
|
settings.paginationType === 'infinite_scroll'
|
||||||
|
? browseItems.value.length < browseTotal.value
|
||||||
|
: false
|
||||||
|
)
|
||||||
|
|
||||||
|
// Grupo unificado para el template
|
||||||
|
const displayGroups = computed((): DisplayGroup[] => {
|
||||||
|
if (!debouncedQuery.value.trim()) {
|
||||||
|
return browseItems.value.map(item => ({
|
||||||
|
docId: item.docId,
|
||||||
|
meta: item.meta,
|
||||||
|
firstHit: null
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
return visibleGroups.value.map(g => ({
|
||||||
|
docId: g.docId,
|
||||||
|
meta: docCache.value[g.docId],
|
||||||
|
firstHit: g.firstHit
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// Paginación activa (compartida entre browse y search)
|
||||||
|
const activePage = ref(p0)
|
||||||
|
|
||||||
|
const displayTotal = computed(() =>
|
||||||
|
debouncedQuery.value.trim() ? total.value : browseTotal.value
|
||||||
|
)
|
||||||
|
|
||||||
|
const totalPages = computed(() =>
|
||||||
|
Math.max(1, Math.ceil(displayTotal.value / settings.pageSize))
|
||||||
|
)
|
||||||
|
|
||||||
|
// Cache de metadatos por document_id (sólo modo búsqueda)
|
||||||
|
const docCache = ref<Record<string, DocMeta>>({})
|
||||||
|
|
||||||
|
const { documentsApi } = useTypesenseApi()
|
||||||
|
|
||||||
|
// ---- Batch fetch de metadatos de documentos -------------------------------
|
||||||
|
|
||||||
|
async function fetchDocumentMeta(docIds: string[]) {
|
||||||
|
const unique = docIds.filter(id => id && !(id in docCache.value))
|
||||||
|
console.log('Fetching metadata for documents', unique)
|
||||||
|
try {
|
||||||
|
const res = await documentsApi.multiSearch({
|
||||||
|
multiSearchParameters: {},
|
||||||
|
multiSearchSearchesParameter: {
|
||||||
|
searches: [{
|
||||||
|
collection: DOCUMENTS_COLLECTION,
|
||||||
|
q: '*',
|
||||||
|
queryBy: 'title',
|
||||||
|
filterBy: `id:=[${unique.join(',')}]`,
|
||||||
|
includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug',
|
||||||
|
perPage: unique.length,
|
||||||
|
page: 1
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocMeta }> })?.hits ?? []
|
||||||
|
for (const hit of docHits) {
|
||||||
|
if (hit.document.id) {
|
||||||
|
docCache.value[hit.document.id] = hit.document
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching document metadata', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Búsqueda de párrafos (con query) -------------------------------------
|
||||||
|
|
||||||
let searchSeq = 0
|
let searchSeq = 0
|
||||||
let abortController: AbortController | null = null
|
let timeoutId: ReturnType<typeof setTimeout> | null = null
|
||||||
|
|
||||||
async function runSearch(q: string, page = 1, append = false) {
|
async function runSearch(q: string, page = 1, append = false) {
|
||||||
abortController?.abort()
|
|
||||||
const ac = new AbortController()
|
|
||||||
abortController = ac
|
|
||||||
|
|
||||||
const seq = ++searchSeq
|
const seq = ++searchSeq
|
||||||
if (append) loadingMore.value = true
|
if (append) loadingMore.value = true
|
||||||
else loading.value = true
|
else loading.value = true
|
||||||
errorMsg.value = null
|
errorMsg.value = null
|
||||||
|
|
||||||
const timeoutId = setTimeout(() => ac.abort(), REQUEST_TIMEOUT_MS)
|
if (timeoutId) clearTimeout(timeoutId)
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
if (seq === searchSeq) {
|
||||||
|
loading.value = false
|
||||||
|
loadingMore.value = false
|
||||||
|
errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
|
||||||
|
}
|
||||||
|
}, REQUEST_TIMEOUT_MS)
|
||||||
|
|
||||||
const isInfinite = settings.paginationType === 'infinite_scroll'
|
const isInfinite = settings.paginationType === 'infinite_scroll'
|
||||||
const offset = isInfinite
|
const typePage = isInfinite ? (append ? currentPage.value + 1 : 1) : page
|
||||||
? (append ? hits.value.length : 0)
|
|
||||||
: (page - 1) * settings.pageSize
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await meili.index(`conferences_${$i18n.locale.value.toUpperCase()}`).search(q || '', {
|
const multi = await documentsApi.multiSearch({
|
||||||
attributesToRetrieve: ['*'],
|
multiSearchParameters: {},
|
||||||
showMatchesPosition: true,
|
multiSearchSearchesParameter: {
|
||||||
limit: settings.pageSize,
|
searches: [{
|
||||||
offset,
|
collection: PARAGRAPHS_COLLECTION,
|
||||||
sort: q ? undefined : ['isodate:desc']
|
q: q || '*',
|
||||||
}, { signal: ac.signal })
|
queryBy: QUERY_BY,
|
||||||
|
filterBy: filterBy.value,
|
||||||
|
perPage: settings.pageSize,
|
||||||
|
page: typePage,
|
||||||
|
highlightFullFields: QUERY_BY,
|
||||||
|
highlightFields: QUERY_BY,
|
||||||
|
highlightStartTag: '<mark class="search-match">',
|
||||||
|
highlightEndTag: '</mark>',
|
||||||
|
highlightAffixNumTokens: 30,
|
||||||
|
groupBy: 'document_id'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
if (seq !== searchSeq) return
|
if (seq !== searchSeq) return
|
||||||
|
|
||||||
const newHits = (res?.hits ?? []) as SearchHit[]
|
const res = (multi?.results?.[0] ?? {}) as TypesenseSearchResponse
|
||||||
hits.value = append ? hits.value.concat(newHits) : newHits
|
const rawGroups = res?.groupedHits ?? []
|
||||||
total.value = res?.estimatedTotalHits ?? hits.value.length
|
|
||||||
|
console.log('Raw groups', rawGroups)
|
||||||
|
const newGroups: SearchGroup[] = rawGroups.map(g => ({
|
||||||
|
docId: g.groupKey[0]!,
|
||||||
|
firstHit: g.hits[0]!,
|
||||||
|
allHits: g.hits
|
||||||
|
}))
|
||||||
|
|
||||||
|
if (!append) docCache.value = {}
|
||||||
|
const newDocIds = newGroups.map(g => g.docId).filter(Boolean)
|
||||||
|
await fetchDocumentMeta(newDocIds)
|
||||||
|
|
||||||
|
if (seq !== searchSeq) return
|
||||||
|
|
||||||
|
groupedHits.value = append ? groupedHits.value.concat(newGroups) : newGroups
|
||||||
|
total.value = res?.found ?? groupedHits.value.length
|
||||||
|
currentPage.value = typePage
|
||||||
if (!append) activePage.value = page
|
if (!append) activePage.value = page
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
const name = (err as { name?: string })?.name
|
|
||||||
if (name === 'AbortError') return
|
|
||||||
if (seq !== searchSeq) return
|
if (seq !== searchSeq) return
|
||||||
console.error('Meilisearch error', err)
|
console.error('Typesense error', err)
|
||||||
errorMsg.value = (err as Error)?.message || 'Error al buscar.'
|
errorMsg.value = (err as Error)?.message || 'Error al buscar.'
|
||||||
if (!append) {
|
if (!append) {
|
||||||
hits.value = []
|
groupedHits.value = []
|
||||||
total.value = 0
|
total.value = 0
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
clearTimeout(timeoutId)
|
|
||||||
if (seq === searchSeq) {
|
if (seq === searchSeq) {
|
||||||
|
if (timeoutId) clearTimeout(timeoutId)
|
||||||
|
loading.value = false
|
||||||
|
loadingMore.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Exploración por fecha (sin query) ------------------------------------
|
||||||
|
|
||||||
|
async function runBrowse(page = 1, append = false) {
|
||||||
|
const seq = ++searchSeq
|
||||||
|
if (append) loadingMore.value = true
|
||||||
|
else loading.value = true
|
||||||
|
errorMsg.value = null
|
||||||
|
|
||||||
|
if (timeoutId) clearTimeout(timeoutId)
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
if (seq === searchSeq) {
|
||||||
|
loading.value = false
|
||||||
|
loadingMore.value = false
|
||||||
|
errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
|
||||||
|
}
|
||||||
|
}, REQUEST_TIMEOUT_MS)
|
||||||
|
|
||||||
|
const isInfinite = settings.paginationType === 'infinite_scroll'
|
||||||
|
const typePage = isInfinite ? (append ? browsePage.value + 1 : 1) : page
|
||||||
|
|
||||||
|
try {
|
||||||
|
const multi = await documentsApi.multiSearch({
|
||||||
|
multiSearchParameters: {},
|
||||||
|
multiSearchSearchesParameter: {
|
||||||
|
searches: [{
|
||||||
|
collection: DOCUMENTS_COLLECTION,
|
||||||
|
q: '*',
|
||||||
|
queryBy: 'title',
|
||||||
|
filterBy: filterBy.value,
|
||||||
|
sortBy: 'timestamp:desc',
|
||||||
|
perPage: settings.pageSize,
|
||||||
|
page: typePage,
|
||||||
|
includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (seq !== searchSeq) return
|
||||||
|
|
||||||
|
const result = (multi?.results?.[0] as { found?: number, hits?: Array<{ document: DocMeta }> } | undefined)
|
||||||
|
const newItems = (result?.hits ?? []).map(h => ({
|
||||||
|
docId: h.document.id!,
|
||||||
|
meta: h.document
|
||||||
|
}))
|
||||||
|
|
||||||
|
browseItems.value = append ? browseItems.value.concat(newItems) : newItems
|
||||||
|
browseTotal.value = result?.found ?? browseItems.value.length
|
||||||
|
browsePage.value = typePage
|
||||||
|
if (!append) activePage.value = page
|
||||||
|
} catch (err: unknown) {
|
||||||
|
if (seq !== searchSeq) return
|
||||||
|
console.error('Typesense error', err)
|
||||||
|
errorMsg.value = (err as Error)?.message || 'Error al buscar.'
|
||||||
|
if (!append) {
|
||||||
|
browseItems.value = []
|
||||||
|
browseTotal.value = 0
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (seq === searchSeq) {
|
||||||
|
if (timeoutId) clearTimeout(timeoutId)
|
||||||
loading.value = false
|
loading.value = false
|
||||||
loadingMore.value = false
|
loadingMore.value = false
|
||||||
}
|
}
|
||||||
|
|
@ -90,91 +357,269 @@ async function runSearch(q: string, page = 1, append = false) {
|
||||||
function loadMore() {
|
function loadMore() {
|
||||||
if (settings.paginationType !== 'infinite_scroll') return
|
if (settings.paginationType !== 'infinite_scroll') return
|
||||||
if (loadingMore.value || loading.value || !hasMore.value) return
|
if (loadingMore.value || loading.value || !hasMore.value) return
|
||||||
runSearch(query.value, activePage.value, true)
|
runSearch(query.value, currentPage.value, true)
|
||||||
}
|
}
|
||||||
|
|
||||||
function goToPage(p: number) {
|
function goToPage(p: number) {
|
||||||
activePage.value = p
|
activePage.value = p
|
||||||
hits.value = []
|
if (!debouncedQuery.value.trim()) {
|
||||||
runSearch(query.value, p, false)
|
browseItems.value = []
|
||||||
|
runBrowse(p, false)
|
||||||
|
} else {
|
||||||
|
groupedHits.value = []
|
||||||
|
runSearch(query.value, p, false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const listContainer = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
function onListScroll() {
|
||||||
|
if (settings.paginationType !== 'infinite_scroll') return
|
||||||
|
const el = listContainer.value
|
||||||
|
if (!el) return
|
||||||
|
if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
|
||||||
|
if (!debouncedQuery.value.trim()) {
|
||||||
|
if (hasMoreBrowse.value && !loadingMore.value && !loading.value) {
|
||||||
|
runBrowse(browsePage.value, true)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (hasMoreVisible.value) {
|
||||||
|
visibleGroupCount.value += 10
|
||||||
|
} else if (hasMore.value && !loadingMore.value && !loading.value) {
|
||||||
|
loadMore()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function retry() {
|
function retry() {
|
||||||
runSearch(query.value, activePage.value, false)
|
if (!query.value.trim()) {
|
||||||
|
runBrowse(activePage.value, false)
|
||||||
|
} else {
|
||||||
|
runSearch(query.value, activePage.value, false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Selección ──────────────────────────────────────────────────────────────
|
onBeforeUnmount(() => { if (timeoutId) clearTimeout(timeoutId) })
|
||||||
const selected = ref<SearchHit | null>(null)
|
|
||||||
|
|
||||||
const isPanelOpen = computed({
|
watch(debouncedQuery, (q) => {
|
||||||
get() { return !!selected.value },
|
activePage.value = 1
|
||||||
set(value: boolean) { if (!value) selected.value = null }
|
if (!q.trim()) {
|
||||||
})
|
groupedHits.value = []
|
||||||
|
total.value = 0
|
||||||
// ID del item seleccionado para sincronizar con la URL
|
currentPage.value = 1
|
||||||
const selectedId = computed(() => selected.value?._id?.toString() ?? null)
|
visibleGroupCount.value = 10
|
||||||
|
browseItems.value = []
|
||||||
// ── Scroll ref expuesto desde InboxList ────────────────────────────────────
|
browseTotal.value = 0
|
||||||
const inboxListRef = ref<{ listEl: HTMLElement | null } | null>(null)
|
browsePage.value = 1
|
||||||
const listEl = computed(() => inboxListRef.value?.listEl ?? null)
|
runBrowse(1, false)
|
||||||
|
} else {
|
||||||
// ── Sincronización con URL ─────────────────────────────────────────────────
|
browseItems.value = []
|
||||||
useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listEl })
|
browseTotal.value = 0
|
||||||
|
browsePage.value = 1
|
||||||
// ── Ciclo de vida ──────────────────────────────────────────────────────────
|
groupedHits.value = []
|
||||||
onMounted(async () => {
|
total.value = 0
|
||||||
await runSearch(q0, p0, false)
|
currentPage.value = 1
|
||||||
|
visibleGroupCount.value = 10
|
||||||
// Restaurar scroll
|
runSearch(q, 1, false)
|
||||||
restoreScrollPosition(listEl.value, s0)
|
|
||||||
|
|
||||||
// Restaurar item seleccionado
|
|
||||||
if (sid0) {
|
|
||||||
const found = hits.value.find(h => String(h._id) === sid0)
|
|
||||||
if (found) selected.value = found
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
// ---- Selección y carga del detalle ----------------------------------------
|
||||||
abortController?.abort()
|
|
||||||
|
const selectedDocId = ref<string | null>(null)
|
||||||
|
const selectedDocument = ref<DocumentDoc | null>(null)
|
||||||
|
const documentLoading = ref(false)
|
||||||
|
const selectedParagraphs = ref<TypesenseParagraphHit[]>([])
|
||||||
|
const paragraphsLoading = ref(false)
|
||||||
|
|
||||||
|
const selectedHit = ref<TypesenseParagraphHit | null>(null)
|
||||||
|
const selectedMatchingHits = ref<TypesenseParagraphHit[]>([])
|
||||||
|
|
||||||
|
async function fetchFullDocument(docId: string) {
|
||||||
|
documentLoading.value = true
|
||||||
|
selectedDocument.value = null
|
||||||
|
try {
|
||||||
|
const res = await documentsApi.multiSearch({
|
||||||
|
multiSearchParameters: {},
|
||||||
|
multiSearchSearchesParameter: {
|
||||||
|
searches: [{
|
||||||
|
collection: DOCUMENTS_COLLECTION,
|
||||||
|
q: '*',
|
||||||
|
queryBy: 'title',
|
||||||
|
filterBy: `id:=${docId}`,
|
||||||
|
perPage: 1,
|
||||||
|
page: 1
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocumentDoc }> })?.hits ?? []
|
||||||
|
selectedDocument.value = docHits[0]?.document ?? null
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching document', err)
|
||||||
|
selectedDocument.value = null
|
||||||
|
} finally {
|
||||||
|
documentLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchDocumentParagraphs(docId: string) {
|
||||||
|
paragraphsLoading.value = true
|
||||||
|
selectedParagraphs.value = []
|
||||||
|
const PER_PAGE = 250
|
||||||
|
let page = 1
|
||||||
|
let totalParagraphs = 0
|
||||||
|
const all: Array<{ document: ParagraphDoc }> = []
|
||||||
|
try {
|
||||||
|
do {
|
||||||
|
const res = await documentsApi.multiSearch({
|
||||||
|
multiSearchParameters: {},
|
||||||
|
multiSearchSearchesParameter: {
|
||||||
|
searches: [{
|
||||||
|
collection: PARAGRAPHS_COLLECTION,
|
||||||
|
q: '*',
|
||||||
|
queryBy: '',
|
||||||
|
filterBy: `document_id:=${docId} && ${filterBy.value}`,
|
||||||
|
perPage: PER_PAGE,
|
||||||
|
page,
|
||||||
|
sortBy: 'number:asc'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const result = (res?.results?.[0] as { found?: number, hits?: Array<{ document: ParagraphDoc }> } | undefined)
|
||||||
|
if (!result) break
|
||||||
|
if (page === 1) totalParagraphs = result.found ?? 0
|
||||||
|
all.push(...(result.hits ?? []))
|
||||||
|
page++
|
||||||
|
} while (all.length < totalParagraphs)
|
||||||
|
selectedParagraphs.value = all.map(h => ({ document: h.document }))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching paragraphs', err)
|
||||||
|
selectedParagraphs.value = []
|
||||||
|
} finally {
|
||||||
|
paragraphsLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function selectGroup(group: DisplayGroup) {
|
||||||
|
selectedDocId.value = group.docId
|
||||||
|
selectedHit.value = group.firstHit
|
||||||
|
const searchGroup = groupedHits.value.find(g => g.docId === group.docId)
|
||||||
|
selectedMatchingHits.value = searchGroup?.allHits ?? []
|
||||||
|
fetchFullDocument(group.docId)
|
||||||
|
fetchDocumentParagraphs(group.docId)
|
||||||
|
}
|
||||||
|
|
||||||
|
const isPanelOpen = computed({
|
||||||
|
get() { return !!selectedDocId.value },
|
||||||
|
set(v: boolean) {
|
||||||
|
if (!v) {
|
||||||
|
selectedDocId.value = null
|
||||||
|
selectedDocument.value = null
|
||||||
|
selectedParagraphs.value = []
|
||||||
|
selectedHit.value = null
|
||||||
|
selectedMatchingHits.value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Query debounced: solo dispara cuando el usuario cambia la búsqueda,
|
watch(groupedHits, () => {
|
||||||
// NO en la carga inicial (debouncedQuery ya arranca en q0).
|
if (!selectedDocId.value || !debouncedQuery.value.trim()) return
|
||||||
watch(debouncedQuery, (q) => {
|
const still = groupedHits.value.find(g => g.docId === selectedDocId.value)
|
||||||
hits.value = []
|
if (!still) {
|
||||||
total.value = 0
|
selectedDocId.value = null
|
||||||
activePage.value = 1
|
selectedDocument.value = null
|
||||||
runSearch(q, 1, false)
|
selectedParagraphs.value = []
|
||||||
|
selectedHit.value = null
|
||||||
|
selectedMatchingHits.value = []
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(hits, () => {
|
// ID del documento seleccionado para sincronizar con la URL
|
||||||
if (!selected.value) return
|
const selectedId = computed(() => selectedDocId.value)
|
||||||
const stillThere = hits.value.find(h => h._id === selected.value?._id)
|
|
||||||
if (!stillThere) selected.value = null
|
// ── Sincronización con URL ─────────────────────────────────────────────────
|
||||||
|
useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listContainer })
|
||||||
|
|
||||||
|
// ── Ciclo de vida ──────────────────────────────────────────────────────────
|
||||||
|
onMounted(async () => {
|
||||||
|
// Carga inicial: browse si no hay query, search si hay query
|
||||||
|
if (q0.trim()) {
|
||||||
|
await runSearch(q0, p0, false)
|
||||||
|
} else {
|
||||||
|
await runBrowse(p0, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restaurar scroll
|
||||||
|
restoreScrollPosition(listContainer.value, s0)
|
||||||
|
|
||||||
|
// Restaurar documento seleccionado
|
||||||
|
if (sid0) {
|
||||||
|
const group = displayGroups.value.find(g => g.docId === sid0)
|
||||||
|
if (group) {
|
||||||
|
selectGroup(group)
|
||||||
|
} else {
|
||||||
|
selectedDocId.value = sid0
|
||||||
|
fetchFullDocument(sid0)
|
||||||
|
fetchDocumentParagraphs(sid0)
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||||
const isMobile = breakpoints.smaller('lg')
|
const isMobile = breakpoints.smaller('lg')
|
||||||
|
|
||||||
useDetailHistory(isPanelOpen, isMobile)
|
useDetailHistory(isPanelOpen, isMobile)
|
||||||
|
|
||||||
|
// ---- Helpers de presentación ----------------------------------------------
|
||||||
|
|
||||||
|
function highlightedFor(hit: TypesenseParagraphHit, field: string): string | null {
|
||||||
|
const fromArr = hit.highlights?.find(h => h.field === field)
|
||||||
|
if (fromArr?.snippet) return fromArr.snippet
|
||||||
|
if (fromArr?.value) return fromArr.value
|
||||||
|
const fromObj = hit.highlight?.[field]
|
||||||
|
if (fromObj?.snippet) return fromObj.snippet
|
||||||
|
if (fromObj?.value) return fromObj.value
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
function metaDate(meta: DocMeta | undefined): string {
|
||||||
|
if (!meta) return ''
|
||||||
|
const ts = meta.timestamp || (meta.date ? Math.floor(new Date(meta.date).getTime() / 1000) : null)
|
||||||
|
if (!ts) return meta.date || ''
|
||||||
|
return formatDate(ts)
|
||||||
|
}
|
||||||
|
|
||||||
|
function metaLocation(meta: DocMeta | undefined): string {
|
||||||
|
if (!meta) return ''
|
||||||
|
return formatLocation({
|
||||||
|
id: meta.id,
|
||||||
|
date: meta.timestamp ?? 0,
|
||||||
|
slug: meta.slug ?? '',
|
||||||
|
type: meta.type ?? '',
|
||||||
|
place: meta.place ?? '',
|
||||||
|
city: meta.city ?? '',
|
||||||
|
state: meta.state ?? '',
|
||||||
|
country: meta.country ?? '',
|
||||||
|
thumbnail: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<UDashboardPanel
|
<UDashboardPanel
|
||||||
id="conferences-list"
|
id="conferencias-ts-list"
|
||||||
:default-size="28"
|
:default-size="32"
|
||||||
:min-size="22"
|
:min-size="24"
|
||||||
:max-size="40"
|
:max-size="45"
|
||||||
resizable
|
resizable
|
||||||
>
|
>
|
||||||
<UDashboardNavbar :title="t('nav.conferences')">
|
<UDashboardNavbar :title="t('nav.conferences_ts')">
|
||||||
<template #leading>
|
<template #leading>
|
||||||
<UDashboardSidebarCollapse />
|
<UDashboardSidebarCollapse />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #trailing>
|
<template #trailing>
|
||||||
<UBadge :label="total" variant="subtle" />
|
<UBadge :label="displayTotal" variant="subtle" />
|
||||||
</template>
|
</template>
|
||||||
</UDashboardNavbar>
|
</UDashboardNavbar>
|
||||||
|
|
||||||
|
|
@ -182,19 +627,11 @@ useDetailHistory(isPanelOpen, isMobile)
|
||||||
<UInput
|
<UInput
|
||||||
v-model="query"
|
v-model="query"
|
||||||
icon="i-lucide-search"
|
icon="i-lucide-search"
|
||||||
placeholder='Buscar conferencias... (usa "comillas" para frase exacta)'
|
:placeholder="t('search.placeholder')"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
size="md"
|
size="md"
|
||||||
class="w-full"
|
class="w-full"
|
||||||
/>
|
/>
|
||||||
<p class="mt-1.5 flex items-center gap-1 text-[11px] text-dimmed">
|
|
||||||
<UIcon name="i-lucide-lightbulb" class="size-3" />
|
|
||||||
<span>
|
|
||||||
Tip: envuelve en
|
|
||||||
<code class="px-1 rounded bg-elevated text-toned font-mono">"comillas"</code>
|
|
||||||
para frase exacta en ese orden.
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<UAlert
|
<UAlert
|
||||||
|
|
@ -207,26 +644,90 @@ useDetailHistory(isPanelOpen, isMobile)
|
||||||
:actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
|
:actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<InboxList
|
<div ref="listContainer" class="overflow-y-auto divide-y divide-default flex-1" @scroll="onListScroll">
|
||||||
ref="inboxListRef"
|
<div
|
||||||
v-model="selected"
|
v-if="loading && !displayGroups.length"
|
||||||
:activities="hits"
|
class="flex items-center justify-center gap-2 py-16 text-sm text-muted"
|
||||||
:query="debouncedQuery"
|
>
|
||||||
:has-more="hasMore"
|
<UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
|
||||||
:loading="loading"
|
Buscando...
|
||||||
:loading-more="loadingMore"
|
</div>
|
||||||
:show-end-message="settings.paginationType === 'infinite_scroll'"
|
|
||||||
collection="conferences"
|
|
||||||
@load-more="loadMore"
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-else-if="!displayGroups.length"
|
||||||
|
class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-sm"
|
||||||
|
>
|
||||||
|
<UIcon name="i-lucide-inbox" class="size-10" />
|
||||||
|
<p>{{ query ? `Sin coincidencias para "${query}"` : 'Sin resultados' }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="group in displayGroups"
|
||||||
|
:key="group.docId"
|
||||||
|
class="p-4 sm:px-6 text-sm cursor-pointer border-b-2 transition-colors"
|
||||||
|
:class="[
|
||||||
|
selectedDocId === group.docId
|
||||||
|
? 'border-carpablue bg-carpablue/10'
|
||||||
|
: 'border-gray-200 hover:border-carpablue hover:bg-carpablue/5'
|
||||||
|
]"
|
||||||
|
@click="selectGroup(group)"
|
||||||
|
>
|
||||||
|
<div class="mb-1">
|
||||||
|
<p class="text-sm font-semibold line-clamp-2 text-highlighted">
|
||||||
|
{{ group.meta?.title || group.docId }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-xs mb-2 text-muted">
|
||||||
|
<span
|
||||||
|
v-if="metaDate(group.meta)"
|
||||||
|
class="flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<UIcon name="ph:calendar" class="size-4 text-carpablue" />
|
||||||
|
{{ metaDate(group.meta) }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="metaLocation(group.meta)"
|
||||||
|
class="flex items-center gap-1 truncate"
|
||||||
|
>
|
||||||
|
<UIcon name="ph:map-pin" class="size-4 text-carpablue shrink-0" />
|
||||||
|
<span class="truncate">{{ metaLocation(group.meta) }}</span>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Snippet con highlight: solo en modo búsqueda -->
|
||||||
|
<div
|
||||||
|
v-if="group.firstHit"
|
||||||
|
class="snippet-html text-sm text-dimmed"
|
||||||
|
v-html="highlightedFor(group.firstHit, 'text') || group.firstHit.document.text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Infinite scroll: cargando más -->
|
||||||
|
<div
|
||||||
|
v-if="settings.paginationType === 'infinite_scroll' && loadingMore"
|
||||||
|
class="flex items-center justify-center gap-2 py-4 text-sm text-muted"
|
||||||
|
>
|
||||||
|
<UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
|
||||||
|
Cargando más...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-else-if="settings.paginationType === 'infinite_scroll' && displayGroups.length && !hasMoreBrowse && !hasMoreVisible && !hasMore && !loading"
|
||||||
|
class="py-3 text-center text-xs text-dimmed"
|
||||||
|
>
|
||||||
|
No hay más resultados
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Paginación numerada -->
|
||||||
<div
|
<div
|
||||||
v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
|
v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
|
||||||
class="px-4 py-3 border-t border-default flex justify-center shrink-0"
|
class="px-4 py-3 border-t border-default flex justify-center shrink-0"
|
||||||
>
|
>
|
||||||
<UPagination
|
<UPagination
|
||||||
:page="activePage"
|
:page="activePage"
|
||||||
:total="total"
|
:total="displayTotal"
|
||||||
:items-per-page="settings.pageSize"
|
:items-per-page="settings.pageSize"
|
||||||
size="sm"
|
size="sm"
|
||||||
@update:page="goToPage"
|
@update:page="goToPage"
|
||||||
|
|
@ -234,33 +735,53 @@ useDetailHistory(isPanelOpen, isMobile)
|
||||||
</div>
|
</div>
|
||||||
</UDashboardPanel>
|
</UDashboardPanel>
|
||||||
|
|
||||||
<InboxActivity
|
<!-- Panel de detalle (escritorio) -->
|
||||||
v-if="selected"
|
<EstudiosTypensenseDetail
|
||||||
:activity="selected"
|
v-if="selectedDocId && !isMobile"
|
||||||
collection="conferences"
|
:document="selectedDocument"
|
||||||
|
:document-loading="documentLoading"
|
||||||
|
:paragraphs="selectedParagraphs"
|
||||||
|
:paragraphs-loading="paragraphsLoading"
|
||||||
|
:collection="FAVORITES_COLLECTION"
|
||||||
:query="debouncedQuery"
|
:query="debouncedQuery"
|
||||||
@close="selected = null"
|
:selected-hit="selectedHit"
|
||||||
|
:selected-matching-hits="selectedMatchingHits"
|
||||||
|
@close="isPanelOpen = false"
|
||||||
/>
|
/>
|
||||||
<div v-else class="hidden lg:flex flex-1 items-center justify-center">
|
<div v-else-if="!isMobile" class="hidden lg:flex flex-1 items-center justify-center">
|
||||||
<div class="flex flex-col items-center gap-2 text-dimmed">
|
<div class="flex flex-col items-center gap-2 text-dimmed">
|
||||||
<UIcon name="i-lucide-search" class="size-16" />
|
<UIcon name="i-lucide-search" class="size-16" />
|
||||||
<p class="text-sm">
|
<p class="text-sm">Selecciona una conferencia para ver el detalle</p>
|
||||||
{{ query ? 'Selecciona una coincidencia para ver el detalle' : 'Escribe arriba para buscar' }}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Panel de detalle (móvil) -->
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
<USlideover v-if="isMobile" v-model:open="isPanelOpen">
|
<USlideover v-if="isMobile" v-model:open="isPanelOpen">
|
||||||
<template #content>
|
<template #content>
|
||||||
<InboxActivity
|
<EstudiosTypensenseDetail
|
||||||
v-if="selected"
|
v-if="selectedDocId"
|
||||||
:activity="selected"
|
:document="selectedDocument"
|
||||||
collection="conferences"
|
:document-loading="documentLoading"
|
||||||
|
:paragraphs="selectedParagraphs"
|
||||||
|
:paragraphs-loading="paragraphsLoading"
|
||||||
|
:collection="FAVORITES_COLLECTION"
|
||||||
:query="debouncedQuery"
|
:query="debouncedQuery"
|
||||||
@close="selected = null"
|
:selected-hit="selectedHit"
|
||||||
|
:selected-matching-hits="selectedMatchingHits"
|
||||||
|
@close="isPanelOpen = false"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</USlideover>
|
</USlideover>
|
||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.snippet-html :deep(p) {
|
||||||
|
display: inline;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.snippet-html :deep(br) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// Home redirects straight to the search experience.
|
// Home redirects straight to the search experience.
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: () => navigateTo('/actividades', { redirectCode: 302 })
|
middleware: () => navigateTo('/estudios-biblicos', { redirectCode: 302 })
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
const toast = useToast()
|
|
||||||
|
|
||||||
/* Copy to Clipboard */
|
/* Copy to Clipboard */
|
||||||
export async function copyToClipboard(textToCopy: string, type: string) {
|
export async function copyToClipboard(textToCopy: string, type: string) {
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText(textToCopy)
|
await navigator.clipboard.writeText(textToCopy)
|
||||||
toast.add({
|
toast.add({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue