ADUANASOFT/plantillas-proyectos
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'fix/table-pedimentos' (#72) from fix/table-pedimentos into development

Browse Source 
Reviewed-on: ADUANASOFT/anexo76#72
This commit is contained in:
acazares
2026-01-22 23:31:37 +00:00
parent 6d1e561204 18559025b1
commit 63380d5497
7 changed files with 198 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/lib/components/dashboard/pedimentos/columns.ts
View File

@@ -1,9 +1,15 @@
import type { ColumnDef } from "@tanstack/table-core";
import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
import { createRawSnippet } from "svelte";
import DataTableActions from "./data-table-actions.svelte";
import type { Pedimento } from "$lib/api/dashboard/a76/pedimentos";
// Extender el tipo ColumnMeta para incluir className
declare module "@tanstack/table-core" {
interface ColumnMeta<TData extends unknown, TValue> {
className?: string;
}
}
/**
* Formatea un número como moneda
*/
@@ -86,6 +92,33 @@ function getStatusColor(status?: string | null): string {
export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
return [
{
id: "select",
header: ({ table }) => {
return renderSnippet(
createRawSnippet(() => ({
render: () => `<div class="w-4"></div>`
}))
);
},
cell: ({ row }) => {
const isSelected = row.getIsSelected();
const checkboxSnippet = createRawSnippet<[{ selected: boolean }]>((getProps) => {
const { selected } = getProps();
return {
render: () => `<div class="flex items-center justify-center">
<input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer" ${selected ? 'checked' : ''} />
</div>`
};
});
return renderSnippet(checkboxSnippet, { selected: isSelected });
},
size: 40,
enableSorting: false,
enableHiding: false
},
{
accessorKey: "id",
header: "ID",
@@ -120,6 +153,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_type",
header: "Tipo",
meta: { className: "hidden md:table-cell" },
cell: ({ row }) => {
const typeSnippet = createRawSnippet<[{ type?: string | null }]>((getType) => {
const { type } = getType();
@@ -134,6 +168,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_code",
header: "Clave",
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const codeSnippet = createRawSnippet<[{ code?: string | null }]>((getCode) => {
const { code } = getCode();
@@ -148,6 +183,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "regime",
header: "Régimen",
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const regimeSnippet = createRawSnippet<[{ regime?: string | null }]>((getRegime) => {
const { regime } = getRegime();
@@ -162,6 +198,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_dates.start_date",
header: "Fecha Inicio",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();
@@ -176,6 +213,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_dates.end_date",
header: "Fecha Final",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();
@@ -190,6 +228,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_dates.payment_date",
header: "Fecha de Pago",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();
@@ -201,9 +240,10 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
return renderSnippet(dateSnippet, { date: formatDate(row.original.pedimento_dates?.payment_date) });
}
},
{
/*{
accessorKey: "pedimento_config_update_rectification.pediment_rectifed_18",
header: "Pedimento 18",
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const ped18Snippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
const { value } = getValue();
@@ -214,10 +254,11 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(ped18Snippet, { value: row.original.pedimento_config_update_rectification?.pediment_rectifed_18 });
}
},
{
},*/
/*{
accessorKey: "pedimento_config_update_rectification.r1",
header: "Pedimento R1",
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const r1Snippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
const { value } = getValue();
@@ -228,10 +269,11 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(r1Snippet, { value: row.original.pedimento_config_update_rectification?.r1 });
}
},
},*/
{
accessorKey: "pedimento_validation.electronic_signature",
header: "Acuse Electrónico",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const ackSnippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
const { value } = getValue();
@@ -249,6 +291,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_payments.total_contributions",
header: "¿Se pagó el impuesto?",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const paidSnippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
const { value } = getValue();
@@ -266,6 +309,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "client_id",
header: "Cliente",
meta: { className: "hidden md:table-cell" },
cell: ({ row }) => {
const clientSnippet = createRawSnippet<[{ clientId?: number | null }]>((getClient) => {
const { clientId } = getClient();
@@ -309,6 +353,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(headerSnippet, {});
},
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const valueSnippet = createRawSnippet<[{ value: string }]>((getValue) => {
const { value } = getValue();
@@ -330,6 +375,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(headerSnippet, {});
},
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const priceSnippet = createRawSnippet<[{ price: string }]>((getPrice) => {
const { price } = getPrice();
@@ -351,6 +397,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(headerSnippet, {});
},
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const weightSnippet = createRawSnippet<[{ weight: string }]>((getWeight) => {
const { weight } = getWeight();
@@ -365,6 +412,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "created_at",
header: "Fecha de Creación",
meta: { className: "hidden 2xl:table-cell" },
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();
@@ -375,13 +423,8 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(dateSnippet, { date: formatDate(row.original.created_at) });
}
},
{
id: "actions",
cell: ({ row }) => {
return renderComponent(DataTableActions, { item: row.original, onSuccess });
}
}
// Columna de acciones eliminada - ahora usamos botones en el footer
];
}

50
frontend/src/lib/components/dashboard/pedimentos/data-table.svelte
View File

@@ -2,10 +2,13 @@
import { onMount } from 'svelte';
import {
type ColumnDef,
getCoreRowModel
getCoreRowModel,
type RowSelectionState
} from "@tanstack/table-core";
import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
import * as Table from "$lib/components/ui/table/index.js";
import { Button } from "$lib/components/ui/button";
import { Edit } from "lucide-svelte";
type DataTableProps<TData, TValue> = {
columns: ColumnDef<TData, TValue>[];
@@ -13,6 +16,8 @@
loading: boolean;
hasMore: boolean;
loadMore: () => void;
selectedId?: number | null;
onRowClick?: (row: TData) => void;
};
let {
@@ -20,7 +25,9 @@
columns,
loading,
hasMore,
loadMore
loadMore,
selectedId = null,
onRowClick
}: DataTableProps<TData, TValue> = $props();
const table = createSvelteTable({
@@ -28,12 +35,28 @@
return data;
},
columns,
getCoreRowModel: getCoreRowModel()
getCoreRowModel: getCoreRowModel(),
getRowId: (row: any) => row.id?.toString(),
state: {
get rowSelection() {
return selectedId ? { [selectedId]: true } : {};
}
},
enableRowSelection: true,
enableMultiRowSelection: false
});
let scrollContainer = $state<HTMLDivElement>();
let loadingTrigger = $state<HTMLDivElement>();
// Función para manejar doble clic en una fila
function handleRowDoubleClick(row: any) {
const pedimento = row.original;
if (pedimento?.id) {
window.location.href = `/dashboard/pedimentos/edit/${pedimento.id}`;
}
}
// Intersection Observer para detectar cuando el usuario llega al final
onMount(() => {
const observer = new IntersectionObserver(
@@ -60,13 +83,13 @@
</script>
<div class="w-full">
<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
<Table.Root>
<Table.Header class="bg-background">
<div class="rounded-md border max-h-[600px] overflow-auto" bind:this={scrollContainer}>
<Table.Root class="w-full">
<Table.Header class="bg-background sticky top-0 z-10">
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
<Table.Row>
{#each headerGroup.headers as header (header.id)}
<Table.Head>
<Table.Head class="whitespace-nowrap {header.column.columnDef.meta?.className || ''}">
{#if !header.isPlaceholder}
<FlexRender
content={header.column.columnDef.header}
@@ -80,9 +103,18 @@
</Table.Header>
<Table.Body>
{#each table.getRowModel().rows as row (row.id)}
<Table.Row data-state={row.getIsSelected() && "selected"}>
<Table.Row
data-state={row.getIsSelected() && "selected"}
onclick={() => {
if (onRowClick) {
onRowClick(row.original);
}
}}
ondblclick={() => handleRowDoubleClick(row)}
class="cursor-pointer hover:bg-muted/50 transition-colors {row.getIsSelected() ? 'bg-primary/10' : ''}"
>
{#each row.getVisibleCells() as cell (cell.id)}
<Table.Cell>
<Table.Cell class="whitespace-nowrap {cell.column.columnDef.meta?.className || ''}">
<FlexRender
content={cell.column.columnDef.cell}
context={cell.getContext()}