89 lines
3.1 KiB
JavaScript
89 lines
3.1 KiB
JavaScript
// components/SearchResults.js
|
|
import { h, each } from "../sigpro.js";
|
|
import { Button, Table, Loading } from "sigpro-ui";
|
|
|
|
export const SearchResults = ({ results, loading, error, onSelect }) => {
|
|
const columns = [
|
|
{ label: 'Código', key: 'CodigoPoliza', class: 'font-mono text-xs' },
|
|
{ label: 'Mediador', key: 'CodigoMediador', class: 'text-xs' },
|
|
{ label: 'Nombre', key: 'Nombre', class: 'font-medium text-xs' },
|
|
{ label: 'Apellidos', key: 'Apellidos', class: 'text-xs' },
|
|
{ label: 'Documento', key: 'Documento', class: 'text-xs' },
|
|
{ label: 'Riesgo', key: 'Riesgo', class: 'text-xs' },
|
|
{ label: 'Ramo', key: 'Ramo', class: 'text-xs' },
|
|
{ label: 'Localidad', key: 'Localidad', class: 'text-xs' },
|
|
{
|
|
label: '',
|
|
key: 'action',
|
|
class: 'w-0 p-0',
|
|
render: (item) => Button({
|
|
class: 'btn btn-ghost btn-xs',
|
|
onclick: (e) => {
|
|
e.stopPropagation();
|
|
onSelect?.(item);
|
|
}
|
|
}, 'Seleccionar')
|
|
}
|
|
];
|
|
|
|
return h('div', { class: 'p-3 space-y-2' }, [
|
|
// Estado de carga
|
|
() => loading() ? h('div', { class: 'flex justify-center items-center py-6' }, [
|
|
Loading({ class: 'loading-md' }),
|
|
h('span', { class: 'ml-2 text-sm opacity-70' }, 'Buscando...')
|
|
]) : null,
|
|
|
|
// Error
|
|
() => !loading() && error() ? h('div', { class: 'alert alert-error py-2 px-3 text-sm' }, [
|
|
h('span', { class: 'icon-[lucide--alert-circle]' }),
|
|
h('span', {}, error())
|
|
]) : null,
|
|
|
|
// Contador de resultados
|
|
() => !loading() && !error() && results().length > 0 ?
|
|
h('div', { class: 'text-xs opacity-60 px-1' },
|
|
`${results().length} resultado${results().length !== 1 ? 's' : ''} encontrado${results().length !== 1 ? 's' : ''}`
|
|
)
|
|
: null,
|
|
|
|
// Tabla de resultados
|
|
() => !loading() && !error() && results().length > 0 ?
|
|
h('div', { class: 'overflow-x-auto w-full' }, [
|
|
h('table', { class: 'table table-xs table-zebra table-pin-rows w-full' }, [
|
|
h('thead', {}, [
|
|
h('tr', {}, columns.map(col =>
|
|
h('th', { class: col.class || '' }, col.label)
|
|
))
|
|
]),
|
|
h('tbody', {},
|
|
each(results, (item) =>
|
|
h('tr', {
|
|
class: 'hover cursor-pointer',
|
|
onclick: () => onSelect?.(item)
|
|
}, columns.map(col =>
|
|
h('td', { class: col.class || '' },
|
|
col.render ? col.render(item) : (item[col.key] || '')
|
|
)
|
|
))
|
|
)
|
|
)
|
|
])
|
|
])
|
|
: null,
|
|
|
|
// Sin resultados
|
|
() => !loading() && !error() && results().length === 0 ?
|
|
h('div', { class: 'text-center py-6 text-base-content/50' }, [
|
|
h('span', { class: 'icon-[lucide--search-x] text-2xl mb-2 block' }),
|
|
h('span', { class: 'text-sm' }, 'No se encontraron resultados')
|
|
])
|
|
: null,
|
|
|
|
// Estado inicial (menos de 3 caracteres)
|
|
() => !loading() && !error() && results().length === 0 ?
|
|
h('div', { class: 'text-center py-4 text-base-content/40 text-xs' },
|
|
'Escribe al menos 3 caracteres para buscar'
|
|
)
|
|
: null
|
|
]);
|
|
}; |