131 lines
4.0 KiB
TypeScript
131 lines
4.0 KiB
TypeScript
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 { CustomsBroker } from "$lib/api/dashboard/a76/customs-brokers";
|
|
|
|
export type { CustomsBroker };
|
|
|
|
export function createColumns(onSuccess?: () => void): ColumnDef<CustomsBroker>[] {
|
|
return [
|
|
{
|
|
accessorKey: "broker_key",
|
|
header: "Clave",
|
|
cell: ({ row }) => {
|
|
const keySnippet = createRawSnippet<[{ key: string }]>((getKey) => {
|
|
const { key } = getKey();
|
|
return {
|
|
render: () =>
|
|
`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${key}</code>`
|
|
};
|
|
});
|
|
return renderSnippet(keySnippet, { key: row.original.broker_key });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "name",
|
|
header: "Nombre",
|
|
cell: ({ row }) => {
|
|
const nameSnippet = createRawSnippet<[{ name: string | null | undefined }]>((getName) => {
|
|
const { name } = getName();
|
|
return {
|
|
render: () => `<div class="max-w-[300px] truncate font-medium">${name || '-'}</div>`
|
|
};
|
|
});
|
|
return renderSnippet(nameSnippet, { name: row.original.name });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "type",
|
|
header: "Tipo",
|
|
cell: ({ row }) => {
|
|
const typeSnippet = createRawSnippet<[{ type: string | null | undefined }]>((getType) => {
|
|
const { type } = getType();
|
|
return {
|
|
render: () => `<div class="max-w-[120px] truncate">${type || '-'}</div>`
|
|
};
|
|
});
|
|
return renderSnippet(typeSnippet, { type: row.original.type });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "license",
|
|
header: "Patente",
|
|
cell: ({ row }) => {
|
|
const licenseSnippet = createRawSnippet<[{ license: string | null | undefined }]>((getLicense) => {
|
|
const { license } = getLicense();
|
|
return {
|
|
render: () =>
|
|
license
|
|
? `<code class="relative rounded bg-blue-100 dark:bg-blue-900 px-[0.3rem] py-[0.2rem] font-mono text-xs font-semibold">${license}</code>`
|
|
: `<span class="text-muted-foreground">-</span>`
|
|
};
|
|
});
|
|
return renderSnippet(licenseSnippet, { license: row.original.license });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "tax_id",
|
|
header: "RFC",
|
|
cell: ({ row }) => {
|
|
const taxIdSnippet = createRawSnippet<[{ taxId: string | null | undefined }]>((getTaxId) => {
|
|
const { taxId } = getTaxId();
|
|
return {
|
|
render: () => `<div class="max-w-[140px] truncate font-mono text-sm">${taxId || '-'}</div>`
|
|
};
|
|
});
|
|
return renderSnippet(taxIdSnippet, { taxId: row.original.tax_id });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "email",
|
|
header: "Email",
|
|
cell: ({ row }) => {
|
|
const emailSnippet = createRawSnippet<[{ email: string | null | undefined }]>((getEmail) => {
|
|
const { email } = getEmail();
|
|
return {
|
|
render: () => `<div class="max-w-[200px] truncate text-sm">${email || '-'}</div>`
|
|
};
|
|
});
|
|
return renderSnippet(emailSnippet, { email: row.original.email });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "phone",
|
|
header: "Teléfono",
|
|
cell: ({ row }) => {
|
|
const phoneSnippet = createRawSnippet<[{ phone: string | null | undefined }]>((getPhone) => {
|
|
const { phone } = getPhone();
|
|
return {
|
|
render: () => `<div class="max-w-[140px] truncate text-sm">${phone || '-'}</div>`
|
|
};
|
|
});
|
|
return renderSnippet(phoneSnippet, { phone: row.original.phone });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "city",
|
|
header: "Ciudad",
|
|
cell: ({ row }) => {
|
|
const citySnippet = createRawSnippet<[{ city: string | null | undefined }]>((getCity) => {
|
|
const { city } = getCity();
|
|
return {
|
|
render: () => `<div class="max-w-[150px] truncate">${city || '-'}</div>`
|
|
};
|
|
});
|
|
return renderSnippet(citySnippet, { city: row.original.city });
|
|
}
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: "Acciones",
|
|
cell: ({ row }) => {
|
|
return renderComponent(DataTableActions, {
|
|
broker: row.original,
|
|
onSuccess
|
|
});
|
|
}
|
|
}
|
|
];
|
|
}
|