101 lines
4.2 KiB
TypeScript
101 lines
4.2 KiB
TypeScript
import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
|
|
import { createRawSnippet } from "svelte";
|
|
import DataTableActions from "./data-table-actions.svelte";
|
|
|
|
export function createColumns(onSuccess) {
|
|
return [
|
|
{
|
|
accessorKey: "id",
|
|
header: "ID",
|
|
cell: ({ row }) => {
|
|
const snippet = createRawSnippet((getData) => {
|
|
const { val } = getData();
|
|
return { render: () => `<span class="font-medium">${val}</span>` };
|
|
});
|
|
return renderSnippet(snippet, { val: row.original.id });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "rfc",
|
|
header: "RFC",
|
|
cell: ({ row }) => {
|
|
const snippet = createRawSnippet((getData) => {
|
|
const { val } = getData();
|
|
return { render: () => `<code class="bg-muted px-1 py-0.5 rounded font-mono text-sm">${val}</code>` };
|
|
});
|
|
return renderSnippet(snippet, { val: row.original.rfc });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "name",
|
|
header: "Nombre",
|
|
cell: ({ row }) => {
|
|
const snippet = createRawSnippet((getData) => {
|
|
const { val } = getData();
|
|
return { render: () => `<div class="max-w-[250px] truncate font-medium" title="${val}">${val}</div>` };
|
|
});
|
|
return renderSnippet(snippet, { val: row.original.name });
|
|
}
|
|
},
|
|
{
|
|
id: "country",
|
|
header: "País",
|
|
cell: ({ row }) => {
|
|
const snippet = createRawSnippet((getData) => {
|
|
const { val } = getData();
|
|
return { render: () => `<div>${val || '-'}</div>` };
|
|
});
|
|
// Busca en address.country, si no existe pone null
|
|
const country = row.original.address?.country;
|
|
return renderSnippet(snippet, { val: country });
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "client_or_provider",
|
|
header: "Tipo",
|
|
cell: ({ row }) => {
|
|
const snippet = createRawSnippet((getData) => {
|
|
const { val } = getData();
|
|
const map = { client: 'Cliente', provider: 'Proveedor', both: 'Ambos' };
|
|
const colors = {
|
|
client: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
|
|
provider: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
|
|
both: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300'
|
|
};
|
|
return {
|
|
render: () => `<span class="px-2 py-0.5 rounded-full text-xs font-medium ${colors[val] || 'bg-gray-100'}">${map[val] || val}</span>`
|
|
};
|
|
});
|
|
return renderSnippet(snippet, { val: row.original.client_or_provider });
|
|
}
|
|
},
|
|
// --- CORRECCIÓN AQUÍ ---
|
|
{
|
|
accessorKey: "is_active",
|
|
header: "Estado",
|
|
cell: ({ row }) => {
|
|
const snippet = createRawSnippet((getData) => {
|
|
const { val } = getData();
|
|
|
|
|
|
const isActive = !!val;
|
|
|
|
const text = isActive ? 'Activo' : 'Inactivo';
|
|
const color = isActive
|
|
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
|
|
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
|
|
|
|
return {
|
|
render: () => `<span class="px-2 py-0.5 rounded-full text-xs font-medium ${color}">${text}</span>`
|
|
};
|
|
});
|
|
return renderSnippet(snippet, { val: row.original.is_active });
|
|
}
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: "Acciones",
|
|
cell: ({ row }) => renderComponent(DataTableActions, { item: row.original, onSuccess })
|
|
}
|
|
];
|
|
} |