Merge branch 'development' into feature/catalog-drivers
This commit is contained in:
hreyes
@@ -38,6 +38,7 @@
|
||||
city: '',
|
||||
state: '',
|
||||
country: '',
|
||||
personal_id: '',
|
||||
tenant_id: '', // Se llenará en el submit o por defecto
|
||||
company_id: ''
|
||||
};
|
||||
@@ -62,6 +63,7 @@
|
||||
contact: initialData.contact || '',
|
||||
address: initialData.address || '',
|
||||
postal_code: initialData.postal_code || '',
|
||||
personal_id: initialData.personal_id || '',
|
||||
city: initialData.city || '',
|
||||
state: initialData.state || '',
|
||||
country: initialData.country || '',
|
||||
@@ -80,6 +82,7 @@
|
||||
contact: '',
|
||||
address: '',
|
||||
postal_code: '',
|
||||
personal_id: '',
|
||||
city: '',
|
||||
state: '',
|
||||
country: 'MEX', // Valor por defecto sugerido
|
||||
@@ -116,6 +119,48 @@
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (
|
||||
formData.license === '0' ||
|
||||
formData.license === '0000' ||
|
||||
/^0+$/.test(formData.license)
|
||||
) {
|
||||
toast.error('La Patente no puede ser 0');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (formData.tax_id && !/^[A-Z&Ñ]{3,4}\d{6}[A-Z0-9]{3}$/i.test(formData.tax_id)) {
|
||||
toast.error('El formato del RFC es inválido');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (
|
||||
formData.personal_id &&
|
||||
!/^[A-Z][AEIOUX][A-Z]{2}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])[HM](AS|BC|BS|CC|CS|CH|CL|CM|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS|NE)[B-DF-HJ-NP-TV-Z]{3}[0-9A-Z]\d$/i.test(
|
||||
formData.personal_id
|
||||
)
|
||||
) {
|
||||
toast.error('El formato de la CURP es inválido');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (
|
||||
formData.email &&
|
||||
!/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(formData.email)
|
||||
) {
|
||||
toast.error('El formato del correo electrónico es inválido');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (formData.phone && !/^[\d\s\-\+\(\)]+$/.test(formData.phone)) {
|
||||
toast.error('El teléfono contiene caracteres no válidos');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (formData.fax && !/^[\d\s\-\+\(\)]+$/.test(formData.fax)) {
|
||||
toast.error('El fax contiene caracteres no válidos');
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Inyectar company_id si no viene
|
||||
const payload = { ...formData, company_id: companyId };
|
||||
@@ -125,9 +170,14 @@
|
||||
toast.success(
|
||||
mode === 'create' ? 'Agente creado correctamente' : 'Agente actualizado correctamente'
|
||||
);
|
||||
} catch (error) {
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
toast.error('Error al guardar el agente aduanal');
|
||||
// Intentar extraer el mensaje del servidor si lo hay
|
||||
let msg = 'Error al guardar el agente aduanal';
|
||||
if (error && typeof error === 'object' && 'message' in error) {
|
||||
msg = (error as { message: string }).message || msg;
|
||||
}
|
||||
toast.error(msg);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
@@ -135,7 +185,7 @@
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Content class="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
|
||||
<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-[700px]">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>
|
||||
{mode === 'create' ? 'Nuevo Agente Aduanal' : 'Editar Agente Aduanal'}
|
||||
@@ -148,7 +198,7 @@
|
||||
|
||||
<div class="grid gap-6 py-4">
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-sm font-medium leading-none text-muted-foreground">Identificación</h4>
|
||||
<h4 class="text-sm leading-none font-medium text-muted-foreground">Identificación</h4>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="broker_key">Clave Agente *</Label>
|
||||
@@ -156,7 +206,7 @@
|
||||
id="broker_key"
|
||||
value={formData.broker_key}
|
||||
oninput={(e) => {
|
||||
const val = e.currentTarget.value.toUpperCase();
|
||||
const val = e.currentTarget.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
||||
if (val.length > 5) {
|
||||
brokerKeyError = true;
|
||||
formData.broker_key = val.slice(0, 5);
|
||||
@@ -169,10 +219,11 @@
|
||||
} else {
|
||||
brokerKeyError = false;
|
||||
formData.broker_key = val;
|
||||
e.currentTarget.value = formData.broker_key;
|
||||
}
|
||||
}}
|
||||
placeholder="Ej. 550"
|
||||
maxlength="6"
|
||||
maxlength={6}
|
||||
class={brokerKeyError ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||
disabled={mode === 'edit' || loading}
|
||||
/>
|
||||
@@ -204,7 +255,7 @@
|
||||
}
|
||||
}}
|
||||
placeholder="Ej. 3421"
|
||||
maxlength="5"
|
||||
maxlength={5}
|
||||
class={licenseError ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||
disabled={loading}
|
||||
/>
|
||||
@@ -216,7 +267,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2 col-span-2">
|
||||
<div class="col-span-2 space-y-2">
|
||||
<Label for="name">Nombre / Razón Social</Label>
|
||||
<Input
|
||||
id="name"
|
||||
@@ -229,16 +280,48 @@
|
||||
<Label for="tax_id">RFC</Label>
|
||||
<Input
|
||||
id="tax_id"
|
||||
bind:value={formData.tax_id}
|
||||
value={formData.tax_id}
|
||||
oninput={(e) => {
|
||||
formData.tax_id = e.currentTarget.value
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z0-9&Ñ]/g, '')
|
||||
.slice(0, 13);
|
||||
e.currentTarget.value = formData.tax_id;
|
||||
}}
|
||||
placeholder="RFC de la agencia"
|
||||
maxlength={13}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="personal_id">CURP</Label>
|
||||
<Input
|
||||
id="personal_id"
|
||||
value={formData.personal_id}
|
||||
oninput={(e) => {
|
||||
formData.personal_id = e.currentTarget.value
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z0-9]/g, '')
|
||||
.slice(0, 18);
|
||||
e.currentTarget.value = formData.personal_id;
|
||||
}}
|
||||
placeholder="CURP (Opcional)"
|
||||
maxlength={18}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-2 space-y-2">
|
||||
<Label for="contact">Nombre Contacto</Label>
|
||||
<Input
|
||||
id="contact"
|
||||
bind:value={formData.contact}
|
||||
value={formData.contact}
|
||||
oninput={(e) => {
|
||||
formData.contact = e.currentTarget.value.replace(
|
||||
/[^a-zA-Z0-9\sñÑáéíóúÁÉÍÓÚ\-\.,]/g,
|
||||
''
|
||||
);
|
||||
e.currentTarget.value = formData.contact;
|
||||
}}
|
||||
placeholder="Persona de contacto"
|
||||
disabled={loading}
|
||||
/>
|
||||
@@ -249,13 +332,33 @@
|
||||
<Separator />
|
||||
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-sm font-medium leading-none text-muted-foreground">Contacto</h4>
|
||||
<h4 class="text-sm leading-none font-medium text-muted-foreground">Contacto</h4>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="space-y-2 col-span-1">
|
||||
<div class="col-span-1 space-y-2">
|
||||
<Label for="phone">Teléfono</Label>
|
||||
<Input id="phone" bind:value={formData.phone} disabled={loading} />
|
||||
<Input
|
||||
id="phone"
|
||||
value={formData.phone}
|
||||
oninput={(e) => {
|
||||
formData.phone = e.currentTarget.value.replace(/[^\d\s\-\+\(\)]/g, '');
|
||||
e.currentTarget.value = formData.phone;
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2 col-span-2">
|
||||
<div class="col-span-1 space-y-2">
|
||||
<Label for="fax">Fax</Label>
|
||||
<Input
|
||||
id="fax"
|
||||
value={formData.fax}
|
||||
oninput={(e) => {
|
||||
formData.fax = e.currentTarget.value.replace(/[^\d\s\-\+\(\)]/g, '');
|
||||
e.currentTarget.value = formData.fax;
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-1 space-y-2">
|
||||
<Label for="email">Correo Electrónico</Label>
|
||||
<Input id="email" type="email" bind:value={formData.email} disabled={loading} />
|
||||
</div>
|
||||
@@ -265,7 +368,7 @@
|
||||
<Separator />
|
||||
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-sm font-medium leading-none text-muted-foreground">Dirección Fiscal</h4>
|
||||
<h4 class="text-sm leading-none font-medium text-muted-foreground">Dirección Fiscal</h4>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="address">Calle y Número</Label>
|
||||
@@ -275,9 +378,16 @@
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="postal_code">C.P.</Label>
|
||||
<Input id="postal_code" bind:value={formData.postal_code} disabled={loading} oninput={(e) => { formData.postal_code = e.currentTarget.value.replace(/[^a-zA-Z0-9]/g, ''); }} />
|
||||
<Input
|
||||
id="postal_code"
|
||||
bind:value={formData.postal_code}
|
||||
disabled={loading}
|
||||
oninput={(e) => {
|
||||
formData.postal_code = e.currentTarget.value.replace(/[^a-zA-Z0-9]/g, '');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2 col-span-2">
|
||||
<div class="col-span-2 space-y-2">
|
||||
<Label for="city">Ciudad</Label>
|
||||
<Input id="city" bind:value={formData.city} disabled={loading} />
|
||||
</div>
|
||||
|
||||
@@ -79,6 +79,41 @@
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
// Validaciones Básicas
|
||||
if (formData.license === '0' || formData.license === '0000' || /^0+$/.test(formData.license)) {
|
||||
error = 'La Patente no puede ser 0';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (formData.tax_id && !/^[A-Z&Ñ]{3,4}\d{6}[A-Z0-9]{3}$/i.test(formData.tax_id)) {
|
||||
error = 'El formato del RFC es inválido';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (
|
||||
formData.personal_id &&
|
||||
!/^[A-Z][AEIOUX][A-Z]{2}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])[HM](AS|BC|BS|CC|CS|CH|CL|CM|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS|NE)[B-DF-HJ-NP-TV-Z]{3}[0-9A-Z]\d$/i.test(
|
||||
formData.personal_id
|
||||
)
|
||||
) {
|
||||
error = 'El formato de la CURP es inválido';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (
|
||||
formData.email &&
|
||||
!/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(formData.email)
|
||||
) {
|
||||
error = 'El formato del correo electrónico es inválido';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (formData.phone && !/^[\d\s\-\+\(\)]+$/.test(formData.phone)) {
|
||||
error = 'El teléfono contiene caracteres no válidos';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload: CreateCustomsBrokerData = {
|
||||
broker_key: broker.broker_key, // La clave no se edita
|
||||
@@ -138,7 +173,7 @@
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open onOpenChange={handleOpenChange}>
|
||||
<Dialog.Content class="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
|
||||
<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-[700px]">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Editar Agente Aduanal</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
@@ -218,7 +253,7 @@
|
||||
}
|
||||
}}
|
||||
placeholder="Número de patente"
|
||||
maxlength="5"
|
||||
maxlength={5}
|
||||
class={licenseError ? 'border-red-500 focus-visible:ring-red-500' : ''}
|
||||
disabled={loading}
|
||||
/>
|
||||
@@ -251,7 +286,11 @@
|
||||
<Label for="edit-phone">Teléfono</Label>
|
||||
<Input
|
||||
id="edit-phone"
|
||||
bind:value={formData.phone}
|
||||
value={formData.phone}
|
||||
oninput={(e) => {
|
||||
formData.phone = e.currentTarget.value.replace(/[^\d\s\-\+\(\)]/g, '');
|
||||
e.currentTarget.value = formData.phone;
|
||||
}}
|
||||
placeholder="Número telefónico"
|
||||
maxlength={30}
|
||||
disabled={loading}
|
||||
@@ -262,7 +301,11 @@
|
||||
<Label for="edit-fax">Fax</Label>
|
||||
<Input
|
||||
id="edit-fax"
|
||||
bind:value={formData.fax}
|
||||
value={formData.fax}
|
||||
oninput={(e) => {
|
||||
formData.fax = e.currentTarget.value.replace(/[^\d\s\-\+\(\)]/g, '');
|
||||
e.currentTarget.value = formData.fax;
|
||||
}}
|
||||
placeholder="Número de fax"
|
||||
maxlength={30}
|
||||
disabled={loading}
|
||||
@@ -286,7 +329,14 @@
|
||||
<Label for="edit-contact">Contacto</Label>
|
||||
<Input
|
||||
id="edit-contact"
|
||||
bind:value={formData.contact}
|
||||
value={formData.contact}
|
||||
oninput={(e) => {
|
||||
formData.contact = e.currentTarget.value.replace(
|
||||
/[^a-zA-Z0-9\sñÑáéíóúÁÉÍÓÚ\-\.,]/g,
|
||||
''
|
||||
);
|
||||
e.currentTarget.value = formData.contact;
|
||||
}}
|
||||
placeholder="Nombre del contacto"
|
||||
maxlength={80}
|
||||
disabled={loading}
|
||||
@@ -318,7 +368,9 @@
|
||||
placeholder="C.P."
|
||||
maxlength={15}
|
||||
disabled={loading}
|
||||
oninput={(e) => { formData.postal_code = e.currentTarget.value.replace(/[^a-zA-Z0-9]/g, ''); }}
|
||||
oninput={(e) => {
|
||||
formData.postal_code = e.currentTarget.value.replace(/[^a-zA-Z0-9]/g, '');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -366,9 +418,16 @@
|
||||
<Label for="edit-tax_id">RFC</Label>
|
||||
<Input
|
||||
id="edit-tax_id"
|
||||
bind:value={formData.tax_id}
|
||||
value={formData.tax_id}
|
||||
oninput={(e) => {
|
||||
formData.tax_id = e.currentTarget.value
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z0-9&Ñ]/g, '')
|
||||
.slice(0, 13);
|
||||
e.currentTarget.value = formData.tax_id;
|
||||
}}
|
||||
placeholder="RFC"
|
||||
maxlength={30}
|
||||
maxlength={13}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
@@ -377,9 +436,16 @@
|
||||
<Label for="edit-personal_id">CURP</Label>
|
||||
<Input
|
||||
id="edit-personal_id"
|
||||
bind:value={formData.personal_id}
|
||||
value={formData.personal_id}
|
||||
oninput={(e) => {
|
||||
formData.personal_id = e.currentTarget.value
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z0-9]/g, '')
|
||||
.slice(0, 18);
|
||||
e.currentTarget.value = formData.personal_id;
|
||||
}}
|
||||
placeholder="CURP"
|
||||
maxlength={20}
|
||||
maxlength={18}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import type { ColumnDef } from "@tanstack/table-core";
|
||||
import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
|
||||
import { renderSnippet } from "$lib/components/ui/data-table/index.js";
|
||||
import { createRawSnippet } from "svelte";
|
||||
import DataTableActions from "./data-table-actions.svelte";
|
||||
import type { Invoice } from '$lib/api/dashboard/a76/invoices';
|
||||
import { getInvoiceTypeColor } from "$lib/utils";
|
||||
|
||||
@@ -18,29 +17,71 @@ export function createColumns(
|
||||
onSuccess?: () => void
|
||||
): ColumnDef<Invoice>[] {
|
||||
return [
|
||||
// 0. NUEVA COLUMNA: Checkbox visual (el estado real lo maneja la opacidad)
|
||||
// Checkbox visual
|
||||
{
|
||||
id: "select",
|
||||
header: ({ table }) => {
|
||||
return renderSnippet(
|
||||
createRawSnippet(() => ({
|
||||
render: () => `<div class="w-4"></div>`
|
||||
}))
|
||||
);
|
||||
const isAllSelected = table.getIsAllPageRowsSelected();
|
||||
const isSomeSelected = table.getIsSomePageRowsSelected();
|
||||
|
||||
const selectAllSnippet = createRawSnippet<[
|
||||
{ checked: boolean; indeterminate: boolean; onchange: (e: Event) => void }
|
||||
]>((getProps) => {
|
||||
const { checked, indeterminate, onchange } = getProps();
|
||||
return {
|
||||
render: () => `<div class="w-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="h-4 w-4 cursor-pointer"
|
||||
${checked ? 'checked' : ''}
|
||||
${indeterminate ? 'indeterminate="true"' : ''}
|
||||
/>
|
||||
</div>`,
|
||||
setup: (node) => {
|
||||
const input = node.querySelector('input') as HTMLInputElement;
|
||||
if (input) {
|
||||
input.indeterminate = indeterminate;
|
||||
input.addEventListener('change', onchange);
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return renderSnippet(selectAllSnippet, {
|
||||
checked: isAllSelected,
|
||||
indeterminate: isSomeSelected && !isAllSelected,
|
||||
onchange: (e: Event) => {
|
||||
table.toggleAllPageRowsSelected(!!(e.target as HTMLInputElement).checked);
|
||||
}
|
||||
});
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const isSelected = row.getIsSelected();
|
||||
|
||||
const checkboxSnippet = createRawSnippet<[{ selected: boolean }]>((getProps) => {
|
||||
const { selected } = getProps();
|
||||
const checkboxSnippet = createRawSnippet<[
|
||||
{ selected: boolean; onchange: (e: Event) => void }
|
||||
]>((getProps) => {
|
||||
const { selected, onchange } = getProps();
|
||||
return {
|
||||
render: () => `<div class="flex items-center justify-center">
|
||||
<input type="checkbox" class="h-4 w-4" ${selected ? 'checked' : ''} />
|
||||
</div>`
|
||||
<input type="checkbox" class="h-4 w-4 cursor-pointer" ${selected ? 'checked' : ''} />
|
||||
</div>`,
|
||||
setup: (node) => {
|
||||
const input = node.querySelector('input') as HTMLInputElement;
|
||||
if (input) {
|
||||
input.addEventListener('change', onchange);
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return renderSnippet(checkboxSnippet, { selected: isSelected });
|
||||
return renderSnippet(checkboxSnippet, {
|
||||
selected: isSelected,
|
||||
onchange: (e: Event) => {
|
||||
e.stopPropagation(); // Evitar que el clic en el checkbox dispare el rowClick
|
||||
row.toggleSelected(!!(e.target as HTMLInputElement).checked);
|
||||
}
|
||||
});
|
||||
},
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
@@ -298,16 +339,6 @@ export function createColumns(
|
||||
return renderSnippet(relDocSnippet, { relDoc });
|
||||
}
|
||||
},
|
||||
// 2. MODIFICAMOS AQUÍ: Pasamos onDownload al componente
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) => {
|
||||
return renderComponent(DataTableActions, {
|
||||
invoice: row.original,
|
||||
onSuccess
|
||||
});
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<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";
|
||||
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>[];
|
||||
@@ -14,8 +11,9 @@
|
||||
hasMore: boolean;
|
||||
loadMore: () => void;
|
||||
// Props para selección
|
||||
selectedId?: number | null;
|
||||
selectedIds?: number[];
|
||||
onRowClick?: (row: TData) => void;
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
let {
|
||||
@@ -24,8 +22,9 @@
|
||||
loading,
|
||||
hasMore,
|
||||
loadMore,
|
||||
selectedId = null,
|
||||
onRowClick
|
||||
selectedIds = [],
|
||||
onRowClick,
|
||||
compact = false
|
||||
}: DataTableProps<TData, TValue> = $props();
|
||||
|
||||
const table = createSvelteTable({
|
||||
@@ -37,12 +36,17 @@
|
||||
getRowId: (row: any) => row.id?.toString(), // Usar ID para identificar filas
|
||||
state: {
|
||||
get rowSelection() {
|
||||
// Mapear el ID seleccionado al formato que espera TanStack Table
|
||||
return selectedId ? { [selectedId]: true } : {};
|
||||
// Mapear los IDs seleccionados al formato que espera TanStack Table
|
||||
const selection: Record<string, boolean> = {};
|
||||
selectedIds.forEach((id) => {
|
||||
selection[id.toString()] = true;
|
||||
});
|
||||
return selection;
|
||||
}
|
||||
},
|
||||
enableRowSelection: true,
|
||||
enableMultiRowSelection: false, // Solo permitir una selección a la vez
|
||||
enableMultiRowSelection: true
|
||||
|
||||
// No necesitamos onRowSelectionChange porque controlamos el estado desde fuera
|
||||
});
|
||||
|
||||
@@ -75,7 +79,7 @@
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
|
||||
<div class="max-h-[600px] overflow-y-auto rounded-md border" bind:this={scrollContainer}>
|
||||
<Table.Root>
|
||||
<Table.Header class="bg-background">
|
||||
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
|
||||
@@ -95,17 +99,16 @@
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each table.getRowModel().rows as row (row.id)}
|
||||
<Table.Row
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
class="cursor-pointer transition-colors {row.getIsSelected() ? 'bg-gray-300 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
|
||||
<Table.Row
|
||||
data-state={row.getIsSelected() && 'selected'}
|
||||
class="cursor-pointer transition-colors {row.getIsSelected()
|
||||
? 'bg-gray-300 dark:bg-gray-600'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
|
||||
onclick={() => onRowClick && onRowClick(row.original)}
|
||||
>
|
||||
{#each row.getVisibleCells() as cell (cell.id)}
|
||||
<Table.Cell>
|
||||
<FlexRender
|
||||
content={cell.column.columnDef.cell}
|
||||
context={cell.getContext()}
|
||||
/>
|
||||
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
|
||||
</Table.Cell>
|
||||
{/each}
|
||||
</Table.Row>
|
||||
@@ -116,7 +119,7 @@
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
|
||||
|
||||
<!-- Loading Trigger - Se activa cuando es visible -->
|
||||
{#if hasMore}
|
||||
<Table.Row>
|
||||
@@ -124,13 +127,13 @@
|
||||
<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
|
||||
class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"
|
||||
></div>
|
||||
<span class="text-sm text-muted-foreground">Cargando más...</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-muted-foreground text-sm">
|
||||
Desplázate para cargar más
|
||||
</div>
|
||||
<div class="text-sm text-muted-foreground">Desplázate para cargar más</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
|
||||
@@ -1,44 +1,63 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import * as AlertDialog from "$lib/components/ui/alert-dialog";
|
||||
import { invoicesApi, type Invoice } from "$lib/api/dashboard/a76/invoices";
|
||||
import { companyStore } from "$lib/stores/company.svelte";
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as AlertDialog from '$lib/components/ui/alert-dialog';
|
||||
import { invoicesApi, type Invoice } from '$lib/api/dashboard/a76/invoices';
|
||||
import { companyStore } from '$lib/stores/company.svelte';
|
||||
import { LoaderCircle } from 'lucide-svelte';
|
||||
|
||||
interface Props {
|
||||
invoice: Invoice;
|
||||
invoice?: Invoice | null;
|
||||
invoicesToDelete?: Invoice[];
|
||||
onClose: () => void;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
let { invoice, onClose, onSuccess }: Props = $props();
|
||||
let { invoice = null, invoicesToDelete = [], onClose, onSuccess }: Props = $props();
|
||||
let open = $state(true);
|
||||
|
||||
let isMultiDelete = $derived(invoicesToDelete.length > 1);
|
||||
let isSingleDelete = $derived(invoicesToDelete.length <= 1 && invoice !== null);
|
||||
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
async function handleDelete() {
|
||||
if (!invoice || !companyStore.activeCompany) return;
|
||||
const itemsToDelete = invoicesToDelete.length > 0 ? invoicesToDelete : invoice ? [invoice] : [];
|
||||
if (itemsToDelete.length === 0 || !companyStore.activeCompany) return;
|
||||
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
const response = await invoicesApi.delete(invoice.id, companyStore.activeCompany.id);
|
||||
let successCount = 0;
|
||||
let failCount = 0;
|
||||
|
||||
if (response.error) {
|
||||
error = response.error;
|
||||
return;
|
||||
try {
|
||||
for (const item of itemsToDelete) {
|
||||
const response = await invoicesApi.delete(item.id, companyStore.activeCompany.id);
|
||||
|
||||
if (response.error) {
|
||||
failCount++;
|
||||
console.error(`Error deleting invoice ${item.id}:`, response.error);
|
||||
} else {
|
||||
successCount++;
|
||||
}
|
||||
}
|
||||
|
||||
// Éxito
|
||||
onClose();
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
if (failCount > 0) {
|
||||
error = `Se eliminaron ${successCount} facturas, pero fallaron ${failCount}. Revisa la consola para más detalles.`;
|
||||
if (successCount === 0) return; // Si todas fallaron, no cerramos
|
||||
}
|
||||
|
||||
// Si al menos una tuvo éxito (o todas), refrescamos
|
||||
if (successCount > 0) {
|
||||
onClose();
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : "Error al eliminar";
|
||||
console.error("Error deleting:", e);
|
||||
error = e instanceof Error ? e.message : 'Error al eliminar';
|
||||
console.error('Error deleting:', e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
@@ -59,9 +78,17 @@
|
||||
<AlertDialog.Header>
|
||||
<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
|
||||
<AlertDialog.Description class="space-y-2">
|
||||
<p>Esta acción no se puede deshacer. Se eliminará permanentemente esta factura:</p>
|
||||
{#if invoice}
|
||||
<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
|
||||
{#if isMultiDelete}
|
||||
<p>
|
||||
Esta acción no se puede deshacer. Se eliminarán permanentemente <strong
|
||||
>{invoicesToDelete.length}</strong
|
||||
> facturas seleccionadas.
|
||||
</p>
|
||||
{:else}
|
||||
<p>Esta acción no se puede deshacer. Se eliminará permanentemente esta factura:</p>
|
||||
{/if}
|
||||
{#if isSingleDelete && invoice}
|
||||
<div class="mt-2 space-y-2 rounded-lg bg-muted p-3">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="font-medium">ID:</span>
|
||||
<span class="font-semibold">{invoice.id}</span>
|
||||
@@ -73,8 +100,11 @@
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="font-medium">Tipo:</span>
|
||||
<span class="text-xs">
|
||||
{invoice.operation_type === 'imp' ? 'Importación' :
|
||||
invoice.operation_type === 'exp' ? 'Exportación' : 'N/A'}
|
||||
{invoice.operation_type === 'imp'
|
||||
? 'Importación'
|
||||
: invoice.operation_type === 'exp'
|
||||
? 'Exportación'
|
||||
: 'N/A'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
@@ -88,7 +118,9 @@
|
||||
</div>
|
||||
{/if}
|
||||
{#if error}
|
||||
<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
|
||||
<div
|
||||
class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -99,7 +131,7 @@
|
||||
<AlertDialog.Action
|
||||
onclick={handleDelete}
|
||||
disabled={loading}
|
||||
class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
class="text-destructive-foreground bg-destructive hover:bg-destructive/90"
|
||||
>
|
||||
{#if loading}
|
||||
<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
|
||||
|
||||
Reference in New Issue
Block a user