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

feature/delete-with-validation

Browse Source
This commit is contained in:
hreyes
2026-02-09 14:22:24 -06:00
parent 45edc56820
commit efdbb404a6
3 changed files with 45 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/api/dashboard/a76/customs-brokers.ts
View File

@@ -117,7 +117,7 @@ export const customsBrokersApi = {
* Elimina un agente aduanal
*/
delete: (brokerKey: string, companyId: string) => {
return api.delete<CustomsBroker>(`/v1/a76/customs-brokers/${brokerKey}/?company_id=${companyId}`);
return api.delete<CustomsBroker>(`/v1/a76/customs-brokers/${brokerKey}?company_id=${companyId}`);
},

29
frontend/src/lib/components/dashboard/customs_brokers/data-table.svelte
View File

@@ -1,18 +1,17 @@
<script lang="ts" generics="TData, TValue">
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>[];
data: TData[];
onRowClick?: (row: TData) => void;
selectedId?: string | number | null;
idField?: keyof TData;
};
let { data, columns }: DataTableProps<TData, TValue> = $props();
let { data, columns, onRowClick, selectedId, idField }: DataTableProps<TData, TValue> = $props();
const table = $derived(
createSvelteTable({
@@ -45,13 +44,17 @@
<Table.Body>
{#each table.getRowModel().rows as row (row.id)}
<Table.Row>
<Table.Row
onclick={() => onRowClick?.(row.original)}
class="cursor-pointer transition-colors hover:bg-muted/50 {selectedId &&
idField &&
row.original[idField] === selectedId
? 'bg-muted'
: ''}"
>
{#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>

83
frontend/src/routes/dashboard/customs_brokers/+page.svelte
View File

@@ -18,10 +18,15 @@
customsSectionsApi,
type CustomsSection
} from '$lib/api/dashboard/reference_data/customs_sections';
import DataTable from '$lib/components/dashboard/reference_data/customs_sections/data-table.svelte';
import { createColumns } from '$lib/components/dashboard/reference_data/customs_sections/columns.js';
import SectionsDataTable from '$lib/components/dashboard/reference_data/customs_sections/data-table.svelte';
import { createColumns as createSectionColumns } from '$lib/components/dashboard/reference_data/customs_sections/columns.js';
import * as Card from '$lib/components/ui/card';
// Specialized Broker Components
import BrokerDataTable from '$lib/components/dashboard/customs_brokers/data-table.svelte';
import { createColumns as createBrokerColumns } from '$lib/components/dashboard/customs_brokers/columns';
import DeleteDialog from '$lib/components/dashboard/customs_brokers/delete-dialog.svelte';
let { data }: { data: any } = $props();
// Global State
@@ -31,6 +36,7 @@
let items = $state<CustomsBroker[]>(data.items || []);
let selectedItem = $state<CustomsBroker | null>(null);
let isLoading = $state(false);
let showDeleteDialog = $state(false);
// Server-side filtering/pagination (for Brokers)
let allItemsRaw = $state<CustomsBroker[]>(data.brokers || []);
@@ -114,18 +120,13 @@
}
async function handleDelete() {
if (!selectedItem || !companyStore.activeCompany?.id) return;
if (!confirm('¿Estás seguro de eliminar este Agente Aduanal?')) return;
try {
await customsBrokersApi.delete(
selectedItem.broker_key,
companyStore.activeCompany.id.toString()
);
toast.success('Agente eliminado');
selectedItem = null;
loadItems();
} catch (e) {
toast.error('Error al eliminar');
}
showDeleteDialog = true;
}
function handleActionSuccess() {
loadItems();
selectedItem = null;
toast.success('Cambios aplicados correctamente');
}
// Customs Sections Actions
@@ -178,10 +179,12 @@
})
);
const sectionsColumns = createColumns(() => {
const sectionsColumns = createSectionColumns(() => {
sectionsPage = 1;
loadSections();
});
const brokerColumns = createBrokerColumns(handleActionSuccess);
</script>
<div class="flex flex-col h-[calc(100vh-4rem)] p-4 gap-4 pb-15">
@@ -264,45 +267,13 @@
</div>
<div class="flex-1 overflow-auto bg-card">
<table class="w-full text-sm">
<thead class="bg-muted text-muted-foreground border-b">
<tr>
<th class="px-3 py-2 text-left w-24">Patente</th>
<th class="px-3 py-2 text-left">Nombre</th>
<th class="px-3 py-2 text-left">Licencia</th>
<th class="px-3 py-2 text-left">Ciudad</th>
</tr>
</thead>
<tbody>
{#if isLoading}
<tr
><td colspan="4" class="text-center py-8 text-muted-foreground">Cargando...</td
></tr
>
{:else if paginatedItems.length === 0}
<tr
><td colspan="4" class="text-center py-8 text-muted-foreground"
>No se encontraron registros</td
></tr
>
{:else}
{#each paginatedItems as item (item.broker_key)}
<tr
class="border-b cursor-pointer transition-colors hover:bg-muted/50 {selectedItem?.broker_key ===
item.broker_key
? 'bg-muted'
: ''}"
onclick={() => selectItem(item)}
>
<td class="px-3 py-2 font-mono font-bold">{item.broker_key}</td>
<td class="px-3 py-2 font-medium">{item.name || '-'}</td>
<td class="px-3 py-2 text-muted-foreground">{item.license || '-'}</td>
<td class="px-3 py-2 text-muted-foreground">{item.city || '-'}</td>
</tr>
{/each}
{/if}
</tbody>
</table>
<BrokerDataTable
data={paginatedItems}
columns={brokerColumns}
onRowClick={selectItem}
selectedId={selectedItem?.broker_key}
idField="broker_key"
/>
</div>
<!-- Simple Pagination Controls -->
{#if totalItems > pageSize}
@@ -434,7 +405,7 @@
<!-- Reusing DataTable from Customs Sections -->
<Card.Root class="h-full flex flex-col border-none shadow-none">
<Card.Content class="flex-1 p-0">
<DataTable
<SectionsDataTable
data={sections}
columns={sectionsColumns}
loading={loadingSections}
@@ -477,3 +448,5 @@
</div>
</div>
</div>
<DeleteDialog bind:open={showDeleteDialog} broker={selectedItem} onSuccess={handleActionSuccess} />