feature/atajos-nav-invoices
This commit is contained in:
@@ -96,7 +96,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class="w-full" data-pedimento-list-table>
|
||||
<div
|
||||
class="min-h-[360px] max-h-[calc(100svh-420px)] overflow-auto rounded-md border bg-background [&_[data-slot=table-container]]:overflow-visible [&_[data-slot=table-container]]:w-full"
|
||||
bind:this={scrollContainer}
|
||||
@@ -105,7 +105,7 @@
|
||||
<Table.Root>
|
||||
<Table.Header class="sticky top-0 z-20 border-b bg-background/95 shadow-sm backdrop-blur-md">
|
||||
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
|
||||
<Table.Row>
|
||||
<Table.Row inTabOrder={false}>
|
||||
{#each headerGroup.headers as header (header.id)}
|
||||
{@const colId = header.column.id}
|
||||
<Table.Head
|
||||
@@ -180,6 +180,7 @@
|
||||
<Table.Body>
|
||||
{#each table.getRowModel().rows as row (row.id)}
|
||||
<Table.Row
|
||||
data-pedimento-data-row
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
onclick={() => {
|
||||
if (onRowClick) {
|
||||
@@ -208,7 +209,7 @@
|
||||
{/each}
|
||||
</Table.Row>
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Row inTabOrder={false}>
|
||||
<Table.Cell colspan={columns.length} class="h-24 text-center">
|
||||
No hay resultados.
|
||||
</Table.Cell>
|
||||
@@ -217,7 +218,7 @@
|
||||
|
||||
<!-- Loading Trigger - Se activa cuando es visible -->
|
||||
{#if hasMore}
|
||||
<Table.Row>
|
||||
<Table.Row inTabOrder={false}>
|
||||
<Table.Cell colspan={columns.length} class="h-20 text-center">
|
||||
<div bind:this={loadingTrigger}>
|
||||
{#if loading}
|
||||
|
||||
@@ -27,7 +27,7 @@ export const obtenerAtajosListaFacturas = (acciones: {
|
||||
}): ShortcutDef[] => [
|
||||
{ key: 'Alt+V', description: 'Ver Temporales', action: acciones.irTemporal },
|
||||
{ key: 'Alt+F', description: 'Ver Definitivas', action: acciones.irDefinitiva },
|
||||
{ key: 'Alt+N', description: 'Ver Nacionales', action: acciones.irNacional },
|
||||
{ key: 'Alt+Q', description: 'Ver Nacionales', action: acciones.irNacional },
|
||||
{ key: 'Alt+Z', description: 'Ver Cambio Régimen', action: acciones.irCambioRegimen },
|
||||
{ key: 'Alt+L', description: 'Ver Exportaciones', action: acciones.irExportacion },
|
||||
{ key: 'Alt+Y', description: 'Ver Reparaciones', action: acciones.irReparacion },
|
||||
|
||||
@@ -5,6 +5,8 @@ export const obtenerAtajosListaPedimento = (acciones: {
|
||||
manejarActualizar: () => void;
|
||||
manejarEditar: () => void;
|
||||
manejarEliminar: () => void;
|
||||
irATabla: () => void;
|
||||
irAAcciones: () => void;
|
||||
}): ShortcutDef[] => [
|
||||
{
|
||||
key: 'Alt+Shift+N',
|
||||
@@ -25,5 +27,17 @@ export const obtenerAtajosListaPedimento = (acciones: {
|
||||
key: 'Alt+Shift+D',
|
||||
description: 'Eliminar Seleccionado',
|
||||
action: acciones.manejarEliminar
|
||||
},
|
||||
{
|
||||
key: 'Alt+Shift+T',
|
||||
description: 'Ir a tabla de pedimentos',
|
||||
action: acciones.irATabla,
|
||||
skipDefaultFocusAfter: true
|
||||
},
|
||||
{
|
||||
key: 'Alt+Shift+A',
|
||||
description: 'Ir a acciones (barra inferior)',
|
||||
action: acciones.irAAcciones,
|
||||
skipDefaultFocusAfter: true
|
||||
}
|
||||
];
|
||||
|
||||
@@ -230,13 +230,52 @@ let filters = $state({
|
||||
}
|
||||
|
||||
// Keyboard Shortcuts
|
||||
/** Teclado: foco en la primera fila de datos de la tabla */
|
||||
function focusFirstPedimentoTableRow() {
|
||||
if (!browser) return;
|
||||
const row = document.querySelector<HTMLElement>(
|
||||
'[data-pedimento-list-table] tbody tr[data-pedimento-data-row][tabindex="0"]'
|
||||
);
|
||||
if (row) {
|
||||
row.focus();
|
||||
setTimeout(() => row.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 50);
|
||||
return;
|
||||
}
|
||||
toast.info('No hay filas en la tabla');
|
||||
}
|
||||
|
||||
/** Teclado: foco en el primer control habilitado de la barra de acciones fija */
|
||||
function focusPedimentoListFooterActions() {
|
||||
if (!browser) return;
|
||||
const footer = document.getElementById('pedimento-list-footer');
|
||||
if (!footer) return;
|
||||
const candidates = footer.querySelectorAll<HTMLElement>(
|
||||
'button, a[href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
for (const el of candidates) {
|
||||
if (el.offsetParent === null && el.getClientRects().length === 0) continue;
|
||||
if (el.hasAttribute('disabled')) continue;
|
||||
if ((el as HTMLButtonElement).disabled) continue;
|
||||
el.focus();
|
||||
setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 50);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
footer.focus();
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
useShortcuts(
|
||||
'Pedimentos',
|
||||
obtenerAtajosListaPedimento({
|
||||
manejarCrear: handleCreateClick,
|
||||
manejarActualizar: reloadData,
|
||||
manejarEditar: handleEditSelected,
|
||||
manejarEliminar: handleDelete
|
||||
manejarEliminar: handleDelete,
|
||||
irATabla: focusFirstPedimentoTableRow,
|
||||
irAAcciones: focusPedimentoListFooterActions
|
||||
})
|
||||
);
|
||||
|
||||
@@ -535,6 +574,7 @@ let filters = $state({
|
||||
|
||||
<!-- Footer fijo con botones de acción -->
|
||||
<div
|
||||
id="pedimento-list-footer"
|
||||
class="fixed right-0 bottom-0 left-0 z-[5] ml-[calc(var(--sidebar-width))] border-t bg-background/95 shadow-lg backdrop-blur group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] supports-[backdrop-filter]:bg-background/80"
|
||||
>
|
||||
<div class="mx-auto max-w-[1400px] px-4 py-4">
|
||||
|
||||
Reference in New Issue
Block a user