feat: Implement create/edit dialog for pedimentos management
- Added create-edit-dialog component for creating and editing pedimentos. - Integrated dialog with data table actions for editing existing pedimentos. - Implemented infinite scroll functionality in the data table for loading more pedimentos. - Enhanced server-side loading of pedimentos with authentication checks. - Added filtering options for pedimentos based on status, client ID, and year. - Improved error handling and user feedback for actions like creating, editing, and deleting pedimentos.
This commit is contained in:
234
frontend/src/lib/components/dashboard/pedimentos/columns.ts
Normal file
234
frontend/src/lib/components/dashboard/pedimentos/columns.ts
Normal file
@@ -0,0 +1,234 @@
|
||||
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";
|
||||
|
||||
export type Pedimento = {
|
||||
id: number;
|
||||
tenant_id: number;
|
||||
year?: string | null;
|
||||
customs_office?: string | null;
|
||||
license?: string | null;
|
||||
pedimento_number?: string | null;
|
||||
client_id?: number | null;
|
||||
operation_type?: number | null;
|
||||
pedimento_type?: number | null;
|
||||
pedimento_key?: string | null;
|
||||
regime?: string | null;
|
||||
status?: string | null;
|
||||
usd_value?: number | null;
|
||||
paid_price?: number | null;
|
||||
gross_weight?: number | null;
|
||||
exchange_rate?: number | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Formatea un número como moneda
|
||||
*/
|
||||
function formatCurrency(value?: number | null): string {
|
||||
if (value === null || value === undefined) return '-';
|
||||
return new Intl.NumberFormat('es-MX', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatea un número con separadores de miles
|
||||
*/
|
||||
function formatNumber(value?: number | null, decimals = 2): string {
|
||||
if (value === null || value === undefined) return '-';
|
||||
return new Intl.NumberFormat('es-MX', {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatea una fecha
|
||||
*/
|
||||
function formatDate(date?: string | null): string {
|
||||
if (!date) return '-';
|
||||
return new Date(date).toLocaleDateString('es-MX', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtiene el color del badge según el status
|
||||
*/
|
||||
function getStatusColor(status?: string | null): string {
|
||||
if (!status) return 'bg-gray-100 text-gray-800';
|
||||
|
||||
const statusLower = status.toLowerCase();
|
||||
if (statusLower.includes('activo') || statusLower.includes('completado')) {
|
||||
return 'bg-green-100 text-green-800';
|
||||
} else if (statusLower.includes('pendiente') || statusLower.includes('proceso')) {
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
} else if (statusLower.includes('cancelado') || statusLower.includes('rechazado')) {
|
||||
return 'bg-red-100 text-red-800';
|
||||
}
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
}
|
||||
|
||||
export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
|
||||
return [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "ID",
|
||||
cell: ({ row }) => {
|
||||
const idSnippet = createRawSnippet<[{ id: number }]>((getId) => {
|
||||
const { id } = getId();
|
||||
return {
|
||||
render: () =>
|
||||
`<div class="font-medium">#${id}</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(idSnippet, { id: row.original.id });
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "pedimento_number",
|
||||
header: "Número de Pedimento",
|
||||
cell: ({ row }) => {
|
||||
const pedimento = row.original;
|
||||
const fullNumber = `${pedimento.year || ''}${pedimento.customs_office || ''}${pedimento.license || ''}${pedimento.pedimento_number || ''}`;
|
||||
|
||||
const numberSnippet = createRawSnippet<[{ number: string }]>((getNumber) => {
|
||||
const { number } = getNumber();
|
||||
return {
|
||||
render: () =>
|
||||
`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${number || 'N/A'}</code>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(numberSnippet, { number: fullNumber });
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "client_id",
|
||||
header: "Cliente",
|
||||
cell: ({ row }) => {
|
||||
const clientSnippet = createRawSnippet<[{ clientId?: number | null }]>((getClient) => {
|
||||
const { clientId } = getClient();
|
||||
return {
|
||||
render: () =>
|
||||
`<div>${clientId ? `Cliente #${clientId}` : '-'}</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(clientSnippet, { clientId: row.original.client_id });
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Estado",
|
||||
cell: ({ row }) => {
|
||||
const status = row.original.status;
|
||||
const colorClass = getStatusColor(status);
|
||||
|
||||
const statusSnippet = createRawSnippet<[{ status?: string | null; colorClass: string }]>((getStatus) => {
|
||||
const { status, colorClass } = getStatus();
|
||||
return {
|
||||
render: () =>
|
||||
`<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${colorClass}">
|
||||
${status || 'N/A'}
|
||||
</span>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(statusSnippet, { status, colorClass });
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "usd_value",
|
||||
header: () => {
|
||||
const headerSnippet = createRawSnippet(() => {
|
||||
return {
|
||||
render: () => `<div class="text-right">Valor USD</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(headerSnippet, {});
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const valueSnippet = createRawSnippet<[{ value: string }]>((getValue) => {
|
||||
const { value } = getValue();
|
||||
return {
|
||||
render: () =>
|
||||
`<div class="text-right font-medium">${value}</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(valueSnippet, { value: formatCurrency(row.original.usd_value) });
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "paid_price",
|
||||
header: () => {
|
||||
const headerSnippet = createRawSnippet(() => {
|
||||
return {
|
||||
render: () => `<div class="text-right">Precio Pagado</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(headerSnippet, {});
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const priceSnippet = createRawSnippet<[{ price: string }]>((getPrice) => {
|
||||
const { price } = getPrice();
|
||||
return {
|
||||
render: () =>
|
||||
`<div class="text-right font-medium">${price}</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(priceSnippet, { price: formatCurrency(row.original.paid_price) });
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "gross_weight",
|
||||
header: () => {
|
||||
const headerSnippet = createRawSnippet(() => {
|
||||
return {
|
||||
render: () => `<div class="text-right">Peso Bruto</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(headerSnippet, {});
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const weightSnippet = createRawSnippet<[{ weight: string }]>((getWeight) => {
|
||||
const { weight } = getWeight();
|
||||
return {
|
||||
render: () =>
|
||||
`<div class="text-right">${weight}</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(weightSnippet, { weight: formatNumber(row.original.gross_weight, 3) });
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "created_at",
|
||||
header: "Fecha de Creación",
|
||||
cell: ({ row }) => {
|
||||
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
|
||||
const { date } = getDate();
|
||||
return {
|
||||
render: () =>
|
||||
`<div class="text-sm text-muted-foreground">${date}</div>`
|
||||
};
|
||||
});
|
||||
return renderSnippet(dateSnippet, { date: formatDate(row.original.created_at) });
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) => {
|
||||
return renderComponent(DataTableActions, { item: row.original, onSuccess });
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
// Mantener compatibilidad hacia atrás
|
||||
export const columns = createColumns();
|
||||
@@ -0,0 +1,425 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import * as Dialog from "$lib/components/ui/dialog";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { Label } from "$lib/components/ui/label";
|
||||
import { pedimentosApi, type Pedimento, type CreatePedimentoData, type UpdatePedimentoData } from "$lib/api/dashboard/a76/pedimentos";
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
item = $bindable<Pedimento | null>(null),
|
||||
onSuccess
|
||||
}: {
|
||||
open: boolean;
|
||||
item?: Pedimento | null;
|
||||
onSuccess?: () => void;
|
||||
} = $props();
|
||||
|
||||
let formData = $state({
|
||||
year: "",
|
||||
customs_office: "",
|
||||
license: "",
|
||||
pedimento_number: "",
|
||||
client_id: null as number | null,
|
||||
operation_type: null as number | null,
|
||||
pedimento_type: null as number | null,
|
||||
pedimento_key: "",
|
||||
regime: "",
|
||||
status: "",
|
||||
usd_value: null as number | null,
|
||||
paid_price: null as number | null,
|
||||
gross_weight: null as number | null,
|
||||
exchange_rate: null as number | null
|
||||
});
|
||||
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
// Actualizar formData cuando item cambia
|
||||
$effect(() => {
|
||||
if (item) {
|
||||
formData = {
|
||||
year: item.year || "",
|
||||
customs_office: item.customs_office || "",
|
||||
license: item.license || "",
|
||||
pedimento_number: item.pedimento_number || "",
|
||||
client_id: item.client_id ?? null,
|
||||
operation_type: item.operation_type ?? null,
|
||||
pedimento_type: item.pedimento_type ?? null,
|
||||
pedimento_key: item.pedimento_key || "",
|
||||
regime: item.regime || "",
|
||||
status: item.status || "",
|
||||
usd_value: item.usd_value ?? null,
|
||||
paid_price: item.paid_price ?? null,
|
||||
gross_weight: item.gross_weight ?? null,
|
||||
exchange_rate: item.exchange_rate ?? null
|
||||
};
|
||||
} else {
|
||||
formData = {
|
||||
year: "",
|
||||
customs_office: "",
|
||||
license: "",
|
||||
pedimento_number: "",
|
||||
client_id: null,
|
||||
operation_type: null,
|
||||
pedimento_type: null,
|
||||
pedimento_key: "",
|
||||
regime: "",
|
||||
status: "",
|
||||
usd_value: null,
|
||||
paid_price: null,
|
||||
gross_weight: null,
|
||||
exchange_rate: null
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const isEditing = $derived(!!item);
|
||||
|
||||
// Estados comunes
|
||||
const statusOptions = [
|
||||
{ value: "Activo", label: "Activo" },
|
||||
{ value: "Pendiente", label: "Pendiente" },
|
||||
{ value: "En Proceso", label: "En Proceso" },
|
||||
{ value: "Completado", label: "Completado" },
|
||||
{ value: "Cancelado", label: "Cancelado" }
|
||||
];
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
let response;
|
||||
if (isEditing && item) {
|
||||
const payload: UpdatePedimentoData = {
|
||||
year: formData.year || null,
|
||||
customs_office: formData.customs_office || null,
|
||||
license: formData.license || null,
|
||||
pedimento_number: formData.pedimento_number || null,
|
||||
client_id: formData.client_id,
|
||||
operation_type: formData.operation_type,
|
||||
pedimento_type: formData.pedimento_type,
|
||||
pedimento_key: formData.pedimento_key || null,
|
||||
regime: formData.regime || null,
|
||||
status: formData.status || null,
|
||||
usd_value: formData.usd_value,
|
||||
paid_price: formData.paid_price,
|
||||
gross_weight: formData.gross_weight,
|
||||
exchange_rate: formData.exchange_rate
|
||||
};
|
||||
response = await pedimentosApi.update(item.id, payload);
|
||||
} else {
|
||||
const payload: CreatePedimentoData = {
|
||||
year: formData.year || null,
|
||||
customs_office: formData.customs_office || null,
|
||||
license: formData.license || null,
|
||||
pedimento_number: formData.pedimento_number || null,
|
||||
client_id: formData.client_id,
|
||||
operation_type: formData.operation_type,
|
||||
pedimento_type: formData.pedimento_type,
|
||||
pedimento_key: formData.pedimento_key || null,
|
||||
regime: formData.regime || null,
|
||||
status: formData.status || null,
|
||||
usd_value: formData.usd_value,
|
||||
paid_price: formData.paid_price,
|
||||
gross_weight: formData.gross_weight,
|
||||
exchange_rate: formData.exchange_rate
|
||||
};
|
||||
response = await pedimentosApi.create(payload);
|
||||
}
|
||||
|
||||
if (response.error) {
|
||||
if (response.status === 401) {
|
||||
error = 'Sesión expirada. Recargando página...';
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
} else {
|
||||
error = response.error;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Éxito
|
||||
open = false;
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : "Error al guardar";
|
||||
console.error("Error saving:", e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleOpenChange(newOpen: boolean) {
|
||||
if (!newOpen) {
|
||||
// Limpiar form al cerrar
|
||||
formData = {
|
||||
year: "",
|
||||
customs_office: "",
|
||||
license: "",
|
||||
pedimento_number: "",
|
||||
client_id: null,
|
||||
operation_type: null,
|
||||
pedimento_type: null,
|
||||
pedimento_key: "",
|
||||
regime: "",
|
||||
status: "",
|
||||
usd_value: null,
|
||||
paid_price: null,
|
||||
gross_weight: null,
|
||||
exchange_rate: null
|
||||
};
|
||||
error = null;
|
||||
}
|
||||
open = newOpen;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open onOpenChange={handleOpenChange}>
|
||||
<Dialog.Content class="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>
|
||||
{isEditing ? "Editar" : "Nuevo"} Pedimento
|
||||
</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
{isEditing
|
||||
? "Modifica los datos del pedimento."
|
||||
: "Completa los datos para crear un nuevo pedimento."}
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<form onsubmit={handleSubmit} class="space-y-4">
|
||||
{#if error}
|
||||
<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Información del Pedimento -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-medium">Información del Pedimento</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="year">Año</Label>
|
||||
<Input
|
||||
id="year"
|
||||
bind:value={formData.year}
|
||||
placeholder="22"
|
||||
maxlength={2}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="customs_office">Aduana</Label>
|
||||
<Input
|
||||
id="customs_office"
|
||||
bind:value={formData.customs_office}
|
||||
placeholder="01"
|
||||
maxlength={2}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="license">Patente</Label>
|
||||
<Input
|
||||
id="license"
|
||||
bind:value={formData.license}
|
||||
placeholder="3001"
|
||||
maxlength={4}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="pedimento_number">Número de Pedimento</Label>
|
||||
<Input
|
||||
id="pedimento_number"
|
||||
bind:value={formData.pedimento_number}
|
||||
placeholder="0001234"
|
||||
maxlength={7}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="pedimento_key">Clave de Pedimento</Label>
|
||||
<Input
|
||||
id="pedimento_key"
|
||||
bind:value={formData.pedimento_key}
|
||||
placeholder="A1"
|
||||
maxlength={2}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="regime">Régimen</Label>
|
||||
<Input
|
||||
id="regime"
|
||||
bind:value={formData.regime}
|
||||
placeholder="IMD"
|
||||
maxlength={3}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Información del Cliente y Operación -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-medium">Cliente y Operación</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="client_id">ID del Cliente</Label>
|
||||
<Input
|
||||
id="client_id"
|
||||
type="number"
|
||||
bind:value={formData.client_id}
|
||||
placeholder="123"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="status">Estado</Label>
|
||||
<select
|
||||
id="status"
|
||||
bind:value={formData.status}
|
||||
disabled={loading}
|
||||
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<option value="">Seleccionar estado</option>
|
||||
{#each statusOptions as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="operation_type">Tipo de Operación</Label>
|
||||
<Input
|
||||
id="operation_type"
|
||||
type="number"
|
||||
bind:value={formData.operation_type}
|
||||
placeholder="1"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="pedimento_type">Tipo de Pedimento</Label>
|
||||
<Input
|
||||
id="pedimento_type"
|
||||
type="number"
|
||||
bind:value={formData.pedimento_type}
|
||||
placeholder="1"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Información Financiera -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-medium">Información Financiera</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="usd_value">Valor en USD</Label>
|
||||
<Input
|
||||
id="usd_value"
|
||||
type="number"
|
||||
step="0.01"
|
||||
bind:value={formData.usd_value}
|
||||
placeholder="1000.00"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="paid_price">Precio Pagado</Label>
|
||||
<Input
|
||||
id="paid_price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
bind:value={formData.paid_price}
|
||||
placeholder="1000.00"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="exchange_rate">Tipo de Cambio</Label>
|
||||
<Input
|
||||
id="exchange_rate"
|
||||
type="number"
|
||||
step="0.00001"
|
||||
bind:value={formData.exchange_rate}
|
||||
placeholder="19.50000"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="gross_weight">Peso Bruto (kg)</Label>
|
||||
<Input
|
||||
id="gross_weight"
|
||||
type="number"
|
||||
step="0.001"
|
||||
bind:value={formData.gross_weight}
|
||||
placeholder="100.000"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog.Footer>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onclick={() => (open = false)}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{#if loading}
|
||||
<svg
|
||||
class="mr-2 h-4 w-4 animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
{/if}
|
||||
{isEditing ? "Guardar cambios" : "Crear pedimento"}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@@ -0,0 +1,179 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
|
||||
import { pedimentosApi, type Pedimento } from "$lib/api/dashboard/a76/pedimentos";
|
||||
|
||||
let {
|
||||
item,
|
||||
onSuccess
|
||||
}: {
|
||||
item: Pedimento;
|
||||
onSuccess?: () => void;
|
||||
} = $props();
|
||||
|
||||
let showEditDialog = $state(false);
|
||||
let showDeleteDialog = $state(false);
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm(`¿Estás seguro de eliminar el pedimento #${item.id}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
const response = await pedimentosApi.delete(item.id);
|
||||
|
||||
if (response.error) {
|
||||
if (response.status === 401) {
|
||||
error = 'Sesión expirada. Recargando página...';
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
} else {
|
||||
error = response.error;
|
||||
alert(`Error al eliminar: ${response.error}`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Éxito
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : "Error al eliminar";
|
||||
alert(`Error: ${error}`);
|
||||
console.error("Error deleting:", e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleEdit() {
|
||||
showEditDialog = true;
|
||||
}
|
||||
|
||||
function handleView() {
|
||||
// Navegar a la vista de detalles
|
||||
window.location.href = `/dashboard/pedimentos/${item.id}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
|
||||
<span class="sr-only">Abrir menú</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="1" />
|
||||
<circle cx="12" cy="5" r="1" />
|
||||
<circle cx="12" cy="19" r="1" />
|
||||
</svg>
|
||||
</Button>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content align="end" class="w-[160px]">
|
||||
<DropdownMenu.Label>Acciones</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item onclick={handleView}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="mr-2"
|
||||
>
|
||||
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
Ver detalles
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onclick={handleEdit}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="mr-2"
|
||||
>
|
||||
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
|
||||
<path d="m15 5 4 4" />
|
||||
</svg>
|
||||
Editar
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item onclick={handleDelete} class="text-destructive" disabled={loading}>
|
||||
{#if loading}
|
||||
<svg
|
||||
class="mr-2 h-4 w-4 animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="mr-2"
|
||||
>
|
||||
<path d="M3 6h18" />
|
||||
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
|
||||
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
|
||||
</svg>
|
||||
{/if}
|
||||
Eliminar
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
{#if showEditDialog}
|
||||
<!-- Importar dinámicamente el componente de edición cuando se necesite -->
|
||||
{#await import('./create-edit-dialog.svelte') then { default: CreateEditDialog }}
|
||||
<CreateEditDialog bind:open={showEditDialog} bind:item onSuccess={onSuccess} />
|
||||
{/await}
|
||||
{/if}
|
||||
@@ -0,0 +1,123 @@
|
||||
<script lang="ts" generics="TData, TValue">
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
type ColumnDef,
|
||||
getCoreRowModel
|
||||
} 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";
|
||||
|
||||
type DataTableProps<TData, TValue> = {
|
||||
columns: ColumnDef<TData, TValue>[];
|
||||
data: TData[];
|
||||
loading: boolean;
|
||||
hasMore: boolean;
|
||||
loadMore: () => void;
|
||||
};
|
||||
|
||||
let {
|
||||
data,
|
||||
columns,
|
||||
loading,
|
||||
hasMore,
|
||||
loadMore
|
||||
}: DataTableProps<TData, TValue> = $props();
|
||||
|
||||
const table = createSvelteTable({
|
||||
get data() {
|
||||
return data;
|
||||
},
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel()
|
||||
});
|
||||
|
||||
let scrollContainer = $state<HTMLDivElement>();
|
||||
let loadingTrigger = $state<HTMLDivElement>();
|
||||
|
||||
// Intersection Observer para detectar cuando el usuario llega al final
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const [entry] = entries;
|
||||
if (entry.isIntersecting && hasMore && !loading) {
|
||||
loadMore();
|
||||
}
|
||||
},
|
||||
{
|
||||
root: scrollContainer,
|
||||
threshold: 0.1
|
||||
}
|
||||
);
|
||||
|
||||
if (loadingTrigger) {
|
||||
observer.observe(loadingTrigger);
|
||||
}
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
|
||||
<Table.Root>
|
||||
<Table.Header class="sticky top-0 bg-background z-10">
|
||||
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
|
||||
<Table.Row>
|
||||
{#each headerGroup.headers as header (header.id)}
|
||||
<Table.Head>
|
||||
{#if !header.isPlaceholder}
|
||||
<FlexRender
|
||||
content={header.column.columnDef.header}
|
||||
context={header.getContext()}
|
||||
/>
|
||||
{/if}
|
||||
</Table.Head>
|
||||
{/each}
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each table.getRowModel().rows as row (row.id)}
|
||||
<Table.Row data-state={row.getIsSelected() && "selected"}>
|
||||
{#each row.getVisibleCells() as cell (cell.id)}
|
||||
<Table.Cell>
|
||||
<FlexRender
|
||||
content={cell.column.columnDef.cell}
|
||||
context={cell.getContext()}
|
||||
/>
|
||||
</Table.Cell>
|
||||
{/each}
|
||||
</Table.Row>
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={columns.length} class="h-24 text-center">
|
||||
No hay resultados.
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
|
||||
<!-- Loading Trigger - Se activa cuando es visible -->
|
||||
{#if hasMore}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={columns.length} class="h-20 text-center">
|
||||
<div bind:this={loadingTrigger}>
|
||||
{#if loading}
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
|
||||
<span class="text-muted-foreground text-sm">Cargando más...</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-muted-foreground text-sm">
|
||||
Desplázate para cargar más
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/if}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
</div>
|
||||
@@ -286,23 +286,23 @@ export function getSidebarData(): SidebarData {
|
||||
items: [
|
||||
{
|
||||
title: m["sidebar.pedimentos.pedimento_management"](),
|
||||
url: "#",
|
||||
url: "/dashboard/pedimentos",
|
||||
},
|
||||
{
|
||||
title: m["sidebar.pedimentos.pedimento_codes"](),
|
||||
url: "#",
|
||||
url: "/dashboard/reference_data/pedimento_codes",
|
||||
},
|
||||
{
|
||||
title: m["sidebar.pedimentos.customs_regimes"](),
|
||||
url: "#",
|
||||
url: "/dashboard/reference_data/pedimento_regimens",
|
||||
},
|
||||
{
|
||||
title: m["sidebar.pedimentos.payment_methods"](),
|
||||
url: "#",
|
||||
url: "/dashboard/reference_data/payment_methods",
|
||||
},
|
||||
{
|
||||
title: m["sidebar.pedimentos.customs_sections"](),
|
||||
url: "#",
|
||||
url: "/dashboard/reference_data/customs_sections",
|
||||
},
|
||||
{
|
||||
title: m["sidebar.pedimentos.anexo_22_app_31"](),
|
||||
|
||||
Reference in New Issue
Block a user