Uecko/Uecko_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Proformas: Ordenación y guardar preferencias

Browse Source
This commit is contained in:
David Arranz 2026-05-19 17:23:10 +02:00
parent 0aabff0d18
commit 00627096ed
17 changed files with 389 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
modules/customer-invoices/src/api/infrastructure/issued-invoices/persistence/sequelize/repositories/issued-invoice.repository.ts
View File

@ -220,11 +220,19 @@ export class IssuedInvoiceRepository
const query = criteriaConverter.convert(criteria, {
searchableFields: ["invoice_number", "reference", "description"],
mappings: {
invoice_number: "CustomerInvoiceModel.invoice_number",
reference: "CustomerInvoiceModel.reference",
description: "CustomerInvoiceModel.description",
invoice_date: "invoice_date",
invoice_number: "invoice_number",
reference: "reference",
description: "description",
recipient_name: "current_customer.name",
},
allowedFields: ["invoice_date", "id", "created_at"],
sortableFields: [
"current_customer.name",
"invoice_number",
"invoice_date",
"id",
"created_at",
],
enableFullText: true,
database: this.database,
strictMode: true, // fuerza error si ORDER BY no permitido

16
modules/customer-invoices/src/api/infrastructure/proformas/persistence/sequelize/repositories/proforma.repository.ts
View File

@ -350,11 +350,19 @@ export class ProformaRepository
const query = criteriaConverter.convert(criteria, {
searchableFields: ["invoice_number", "reference", "description"],
mappings: {
invoice_number: "CustomerInvoiceModel.invoice_number",
reference: "CustomerInvoiceModel.reference",
description: "CustomerInvoiceModel.description",
invoice_date: "invoice_date",
invoice_number: "invoice_number",
reference: "reference",
description: "description",
recipient_name: "current_customer.name",
},
allowedFields: ["invoice_date", "id", "created_at"],
sortableFields: [
"current_customer.name",
"invoice_number",
"invoice_date",
"id",
"created_at",
],
enableFullText: true,
database: this.database,
strictMode: true, // fuerza error si ORDER BY no permitido

6
modules/customer-invoices/src/common/locales/en.json
View File

@ -150,12 +150,12 @@
"list": {
"title": "Customer proformas",
"description": "List all customer proformas",
"grid_columns": {
"invoice_number": "#",
"columns": {
"invoice_number": "Num.",
"series": "Serie",
"reference": "Reference",
"status": "Status",
"invoice_date": "Proforma date",
"invoice_date": "Date",
"operation_date": "Operation date",
"recipient": "Customer",
"recipient_tin": "TIN",

6
modules/customer-invoices/src/common/locales/es.json
View File

@ -151,12 +151,12 @@
"list": {
"title": "Proformas",
"description": "Lista todas las proformas",
"grid_columns": {
"invoice_number": "#",
"columns": {
"invoice_number": "Num.",
"series": "Serie",
"reference": "Reference",
"status": "Estado",
"invoice_date": "Fecha de proforma",
"invoice_date": "Fecha",
"operation_date": "Fecha de operación",
"recipient": "Cliente",
"recipient_tin": "NIF/CIF",

105
modules/customer-invoices/src/web/proformas/list/controllers/use-list-proformas.controller.ts
View File

@ -1,5 +1,10 @@
import { useDebounce } from "@erp/core/hooks";
import { useDataTablePreferences } from "@repo/rdx-ui/components";
import { INITIAL_PAGE_INDEX, INITIAL_PAGE_SIZE } from "@repo/rdx-criteria";
import {
type DataTableSort,
type DataTableSortDirection,
useDataTablePreferences,
} from "@repo/rdx-ui/components";
import { NumberHelper } from "@repo/rdx-utils";
import { useCallback, useMemo, useState } from "react";
import { useSearchParams } from "react-router-dom";
@ -13,14 +18,41 @@ import {
type ProformaListStatusFilter = "all" | ProformaStatus;
// Datos por defecto mientras se carga la consulta o en caso de error.
const EMPTY_PROFORMAS_LIST: ProformaList = {
items: [],
page: 0,
perPage: 5,
page: INITIAL_PAGE_INDEX,
perPage: INITIAL_PAGE_SIZE,
totalPages: 0,
totalItems: 0,
};
// Campos que se permiten ordenar para la lista de proformas (consulta).
type ProformaListSortField = "invoiceNumber" | "recipientName" | "invoiceDate";
type ProformaListApiSortField = "invoice_number" | "recipient_name" | "invoice_date";
const PROFORMA_LIST_SORT_FIELDS: Record<ProformaListSortField, ProformaListApiSortField> = {
invoiceNumber: "invoice_number",
recipientName: "recipient_name",
invoiceDate: "invoice_date",
};
const DEFAULT_API_SORT_FIELD: ProformaListApiSortField = "invoice_date";
const DEFAULT_SORT = {
field: "invoiceDate",
direction: "desc",
} satisfies DataTableSort;
const isProformaListSortField = (value: string | null): value is ProformaListSortField => {
return value === "invoiceNumber" || value === "recipientName" || value === "invoiceDate";
};
const isSortDirection = (value: string | null): value is DataTableSortDirection => {
return value === "asc" || value === "desc";
};
export const useListProformasController = () => {
const [search, setSearch] = useState("");
const [statusFilter, setStatusFilter] = useState<ProformaListStatusFilter>("all");
@ -28,7 +60,7 @@ export const useListProformasController = () => {
const tablePreferences = useDataTablePreferences({
storageKey: "proformas:list:grid",
defaultPageSize: 5,
defaultPageSize: EMPTY_PROFORMAS_LIST.perPage,
defaultColumnVisibility: {
reference: true,
recipientName: true,
@ -36,12 +68,17 @@ export const useListProformasController = () => {
totalAmountFmt: true,
invoiceDate: true,
},
defaultSort: DEFAULT_SORT,
});
const { pageSize: preferencesPageSize, setPageSize: setPageSizePreference } = tablePreferences;
const { sort: preferencesSorting, setSort: setSortPreference } = tablePreferences;
// Parse page from URL (1-based) or default to 1
const urlPage = NumberHelper.parsePositiveInteger(searchParams.get("page"), 1);
const urlPage = NumberHelper.parsePositiveInteger(
searchParams.get("page"),
INITIAL_PAGE_INDEX + 1
);
const pageIndex = urlPage - 1; // Convert to 0-based for internal use
// Parse pageSize from URL or use preferences
@ -52,17 +89,37 @@ export const useListProformasController = () => {
const debouncedSearch = useDebounce(search, 300);
// Criterios de ordenamiento
const urlSortFieldValue = searchParams.get("sortField");
const urlSortDirectionValue = searchParams.get("sortDirection");
const urlSort =
isProformaListSortField(urlSortFieldValue) && isSortDirection(urlSortDirectionValue)
? {
field: urlSortFieldValue,
direction: urlSortDirectionValue,
}
: undefined;
const sort = urlSort ?? preferencesSorting ?? DEFAULT_SORT;
const orderBy =
PROFORMA_LIST_SORT_FIELDS[sort.field as ProformaListSortField] ?? DEFAULT_API_SORT_FIELD;
const order = sort.direction;
// Construir criterios de consulta
const criteria = useMemo<NonNullable<ListProformasByCriteriaParams["criteria"]>>(
() => ({
q: debouncedSearch || "",
pageNumber: pageIndex,
pageSize,
order: "desc",
orderBy: "invoice_date",
orderBy,
order,
filters:
statusFilter === "all" ? [] : [{ field: "status", operator: "eq", value: statusFilter }],
}),
[debouncedSearch, pageIndex, pageSize, statusFilter]
[debouncedSearch, pageIndex, pageSize, orderBy, order, statusFilter]
);
const query = useProformasListQuery({ criteria });
@ -96,7 +153,7 @@ export const useListProformasController = () => {
// Reset page to 1 when search changes
setSearchParams((prev) => {
const params = new URLSearchParams(prev);
params.set("page", "1");
params.set("page", String(INITIAL_PAGE_INDEX + 1)); // Convert to 1-based for URL
return params;
});
return nextValue;
@ -124,7 +181,7 @@ export const useListProformasController = () => {
// Reset page to 1 and update pageSize when it changes
setSearchParams((prev) => {
const params = new URLSearchParams(prev);
params.set("page", "1");
params.set("page", String(INITIAL_PAGE_INDEX + 1)); // Convert to 1-based for URL
params.set("pageSize", String(value));
return params;
});
@ -133,6 +190,31 @@ export const useListProformasController = () => {
[pageSize, setSearchParams, setPageSizePreference]
);
const setSortValue = useCallback(
(nextSort: DataTableSort) => {
if (!isProformaListSortField(nextSort.field)) {
return;
}
if (sort.field === nextSort.field && sort.direction === nextSort.direction) {
return;
}
setSearchParams((prev) => {
const params = new URLSearchParams(prev);
params.set("sortField", nextSort.field);
params.set("sortDirection", nextSort.direction);
params.set("page", String(INITIAL_PAGE_INDEX + 1));
return params;
});
setSortPreference(nextSort);
},
[setSearchParams, sort.field, sort.direction, setSortPreference]
);
return {
data: query.data ?? EMPTY_PROFORMAS_LIST,
isLoading: query.isLoading,
@ -153,6 +235,9 @@ export const useListProformasController = () => {
search,
setSearchValue,
sort,
setSort: setSortValue,
statusFilter,
setStatusFilter: setStatusFilterValue,
};

17
modules/customer-invoices/src/web/proformas/list/ui/blocks/proformas-grid/proformas-grid.tsx
View File

@ -1,4 +1,4 @@
import { DataTable, SkeletonDataTable } from "@repo/rdx-ui/components";
import { DataTable, type DataTableSort, SkeletonDataTable } from "@repo/rdx-ui/components";
import type { ColumnDef, OnChangeFn, VisibilityState } from "@tanstack/react-table";
import { useTranslation } from "../../../../../i18n";
@ -16,6 +16,9 @@ interface ProformasGridProps {
onPageChange: (pageIndex: number) => void;
onPageSizeChange: (size: number) => void;
sort: DataTableSort;
onSortChange?: (nextSort: DataTableSort) => void;
columnVisibility?: VisibilityState;
onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
@ -24,15 +27,22 @@ interface ProformasGridProps {
export const ProformasGrid = ({
data,
columns,
loading,
fetching,
columns,
pageIndex,
pageSize,
onPageChange,
onPageSizeChange,
sort,
onSortChange,
columnVisibility,
onColumnVisibilityChange,
onRowClick,
}: ProformasGridProps) => {
const { t } = useTranslation();
@ -57,12 +67,15 @@ export const ProformasGrid = ({
enablePagination
enableRowSelection
manualPagination
manualSorting
onColumnVisibilityChange={onColumnVisibilityChange}
onPageChange={onPageChange}
onPageSizeChange={onPageSizeChange}
onSortChange={onSortChange}
//onRowClick={(row) => onRowClick?.(row.id)}
pageIndex={pageIndex}
pageSize={pageSize}
sort={sort}
totalItems={totalItems}
/>
);

140
modules/customer-invoices/src/web/proformas/list/ui/blocks/proformas-grid/use-proforma-grid-columns.tsx
View File

@ -1,3 +1,4 @@
import { DataTableColumnHeader } from "@repo/rdx-ui/components";
import { DateHelper } from "@repo/rdx-utils";
import {
Button,
@ -9,7 +10,6 @@ import {
} from "@repo/shadcn-ui/components";
import type { ColumnDef } from "@tanstack/react-table";
import {
ArrowUpDownIcon,
ExternalLinkIcon,
FileTextIcon,
PencilIcon,
@ -46,6 +46,7 @@ export function useProformasGridColumns(
): ColumnDef<ProformaListRow, unknown>[] {
const { t } = useTranslation();
// Todas las columnas deben tener un id
return React.useMemo<ColumnDef<ProformaListRow, unknown>[]>(
() => [
{
@ -70,37 +71,52 @@ export function useProformasGridColumns(
onCheckedChange={(value) => row.toggleSelected(!!value)}
/>
),
enableSorting: false,
enableHiding: false,
enableSorting: false,
},
{
id: "invoiceDate",
accessorKey: "invoiceDate",
enableHiding: false,
enableSorting: true,
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={t("pages.proformas.list.columns.invoice_date")}
/>
),
cell: ({ row }) => DateHelper.format(row.original.invoiceDate),
},
{
id: "series",
accessorKey: "series",
header: "Serie",
enableHiding: true,
enableSorting: false,
},
{
id: "invoiceNumber",
accessorKey: "invoiceNumber",
header: ({ column }) => {
return (
<Button
className="px-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
variant="ghost"
>
Num.
<ArrowUpDownIcon className="ml-2 size-4" />
</Button>
);
},
enableHiding: false,
enableSorting: true,
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={t("pages.proformas.list.columns.invoice_number")}
/>
),
meta: {
cellClassName: "font-medium",
},
},
{
id: "status",
accessorKey: "status",
header: "Estado",
enableHiding: true,
enableSorting: false,
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t("pages.proformas.list.columns.status")} />
),
cell: ({ row }) => {
const proforma = row.original;
@ -139,19 +155,16 @@ export function useProformasGridColumns(
// Cliente
{
id: "recipientName",
accessorKey: "recipientName",
header: ({ column }) => {
return (
<Button
className="px-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
variant="ghost"
>
Cliente
<ArrowUpDownIcon className="ml-2 size-4" />
</Button>
);
},
enableHiding: false,
enableSorting: true,
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={t("pages.proformas.list.columns.recipient")}
/>
),
cell: ({ row }) => {
const proforma = row.original;
return (
@ -165,26 +178,18 @@ export function useProformasGridColumns(
cellClassName: "max-w-128",
},
},
{
accessorKey: "invoiceDate",
header: ({ column }) => {
return (
<Button
className="px-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
variant="ghost"
>
Fecha prof.
<ArrowUpDownIcon className="ml-2 size-4" />
</Button>
);
},
cell: ({ row }) => DateHelper.format(row.original.invoiceDate),
},
{
id: "reference",
accessorKey: "reference",
header: "Referencia",
enableHiding: true,
enableSorting: false,
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={t("pages.proformas.list.columns.reference")}
/>
),
cell: ({ row }) => <div className="truncate">{row.original.reference}</div>,
meta: {
cellClassName: "hidden lg:table-cell max-w-16",
@ -193,40 +198,56 @@ export function useProformasGridColumns(
},
{
id: "subtotalAmountFmt",
accessorKey: "subtotalAmountFmt",
header: () => "Subtotal",
enableHiding: true,
enableSorting: false,
header: ({ column }) => (
<DataTableColumnHeader
column={column}
title={t("pages.proformas.list.columns.subtotal_amount")}
/>
),
meta: {
cellClassName: "hidden 2xl:table-cell text-right tabular-nums font-medium",
headerClassName: "hidden 2xl:table-cell text-right",
},
},
{
id: "totalDiscountAmountFmt",
accessorKey: "totalDiscountAmountFmt",
header: "Dtos",
enableSorting: false,
meta: {
cellClassName: "hidden 2xl:table-cell text-right tabular-nums font-medium",
headerClassName: "hidden 2xl:table-cell text-right",
},
},
{
id: "taxableAmountFmt",
accessorKey: "taxableAmountFmt",
header: "Base Imp.",
enableSorting: false,
meta: {
cellClassName: "hidden 2xl:table-cell text-right tabular-nums font-medium",
headerClassName: "hidden 2xl:table-cell text-right",
},
},
{
id: "taxesAmountFmt",
accessorKey: "taxesAmountFmt",
header: "Impuestos",
enableSorting: false,
meta: {
cellClassName: "hidden 2xl:table-cell text-right tabular-nums font-medium",
headerClassName: "hidden 2xl:table-cell text-right",
},
},
{
id: "totalAmountFmt",
accessorKey: "totalAmountFmt",
header: "Total",
enableSorting: false,
meta: {
cellClassName: "hidden xl:table-cell text-right tabular-nums font-semibold",
headerClassName: "hidden xl:table-cell text-right",
@ -257,7 +278,12 @@ export function useProformasGridColumns(
render={
<Button
className="size-7 cursor-pointer text-muted-foreground hover:text-primary"
onClick={() => actionHandlers.onEditClick?.(proforma)}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
actionHandlers.onEditClick?.(proforma);
}}
size="icon"
variant="ghost"
>
@ -279,9 +305,12 @@ export function useProformasGridColumns(
render={
<Button
className="size-7 cursor-pointer text-muted-foreground hover:text-primary"
onClick={() =>
actionHandlers.onChangeStatusClick?.(proforma, availableTransitions[0])
}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
actionHandlers.onChangeStatusClick?.(proforma, availableTransitions[0]);
}}
size="icon"
variant="ghost"
>
@ -305,7 +334,12 @@ export function useProformasGridColumns(
render={
<Button
className="size-7 cursor-pointer text-muted-foreground hover:text-primary"
onClick={() => actionHandlers.onIssueClick?.(proforma)}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
actionHandlers.onIssueClick?.(proforma);
}}
size="icon"
variant="ghost"
>
@ -326,8 +360,10 @@ export function useProformasGridColumns(
render={
<Button
className="size-8 text-destructive/75 hover:text-destructive cursor-pointer"
onClick={(e) => {
e.preventDefault();
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
actionHandlers.onDeleteClick?.(proforma);
}}
size="icon"

2
modules/customer-invoices/src/web/proformas/list/ui/pages/list-proformas-page.tsx
View File

@ -98,8 +98,10 @@ export const ListProformasPage = () => {
onPageChange={listCtrl.setPageIndex}
onPageSizeChange={listCtrl.setPageSize}
onRowClick={(proformaId) => panelCtrl.openProformaPanel(proformaId, "view")}
onSortChange={listCtrl.setSort}
pageIndex={listCtrl.pageIndex}
pageSize={listCtrl.pageSize}
sort={listCtrl.sort}
/>
{/* Explicación técnica */}

10
modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-editor-form.tsx
View File

@ -61,11 +61,11 @@ export const ProformaUpdateEditorForm = ({
onKeyDown={preventEnterKeySubmitForm}
onSubmit={onSubmit}
>
<div className="grid grid-cols-1 gap-4 md:grid-cols-12">
<ProformaUpdateHeaderEditor className="md:col-span-8" disabled={isSubmitting} />
<div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
<ProformaUpdateHeaderEditor className="xl:col-span-9" disabled={isSubmitting} />
<ProformaUpdateRecipientEditor
className="md:col-span-4"
className="xl:col-span-3"
disabled={isSubmitting}
onChangeCustomerClick={onChangeCustomerClick}
onCreateCustomerClick={onCreateCustomerClick}
@ -76,9 +76,9 @@ export const ProformaUpdateEditorForm = ({
<ProformaUpdateItemsEditor disabled={isSubmitting} itemsCtrl={itemsCtrl} taxCtrl={taxCtrl} />
<div className="grid grid-cols-1 gap-4 md:grid-cols-12">
<ProformaUpdateTaxEditor className="md:col-span-6" taxCtrl={taxCtrl} />
<ProformaUpdateTaxEditor className="md:col-span-4" taxCtrl={taxCtrl} />
<ProformaTotalsSummary
className="md:col-span-6"
className="md:col-span-8"
currency={currencyCode}
globalDiscountField={
<PercentageField

31
modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-header-editor.tsx
View File

@ -6,6 +6,7 @@ import {
TextAreaField,
TextField,
} from "@repo/rdx-ui/components";
import { Badge } from "@repo/shadcn-ui/components";
import { FileTextIcon } from "lucide-react";
import { useTranslation } from "../../../../i18n";
@ -34,7 +35,7 @@ export const ProformaUpdateHeaderEditor = ({
>
<FormSectionGrid>
<SelectField
className="md:col-span-2"
className="md:col-span-3"
disabled={disabled}
label={t("form_fields.proformas.series.label")}
name="series"
@ -42,9 +43,33 @@ export const ProformaUpdateHeaderEditor = ({
readOnly={readOnly}
/>
<DatePickerField
<TextField
className="md:col-span-6"
disabled={disabled}
label={t("form_fields.proformas.invoice_number.label")}
maxLength={16}
name="reference"
placeholder={t("form_fields.proformas.invoice_number.placeholder")}
readOnly={readOnly}
rightIcon={
<Badge className="text-sm" variant="secondary">
Autom.
</Badge>
}
/>
<SelectField
className="md:col-span-3"
disabled={disabled}
label={t("form_fields.proformas.currency_code.label")}
name="currencyCode"
placeholder={t("form_fields.proformas.currency_code.placeholder")}
readOnly={readOnly}
/>
<DatePickerField
className="md:col-span-3 md:col-start-1"
disabled={disabled}
label={t("form_fields.proformas.invoice_date.label")}
name="invoiceDate"
placeholder={t("form_fields.proformas.invoice_date.placeholder")}
@ -62,7 +87,7 @@ export const ProformaUpdateHeaderEditor = ({
/>
<TextField
className="md:col-span-4"
className="md:col-span-6"
disabled={disabled}
label={t("form_fields.proformas.reference.label")}
maxLength={256}

4
modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx
View File

@ -64,7 +64,7 @@ export const ProformaUpdatePage = () => {
return (
<FormProvider {...updateCtrl.form}>
<UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
<AppHeader className="mx-auto max-w-5xl space-y-4">
<AppHeader className="mx-auto max-w-7xl space-y-4">
<PageHeader
description={t("pages.proformas.update.description")}
onBackClick={() => navigateBack()}
@ -87,7 +87,7 @@ export const ProformaUpdatePage = () => {
/>
</AppHeader>
<AppContent className="mx-auto max-w-5xl space-y-4">
<AppContent className="mx-auto max-w-7xl space-y-4">
{updateCtrl.isUpdateError && (
<ErrorAlert
message={

2
modules/customers/src/api/infrastructure/persistence/sequelize/repositories/customer.repository.ts
View File

@ -242,7 +242,7 @@ export class CustomerRepository
"email_primary",
"mobile_primary",
],
allowedFields: [
sortableFields: [
"name",
"trade_name",
"reference",

23
packages/rdx-criteria/src/criteria-to-sequelize-converter.ts
View File

@ -124,17 +124,18 @@ export class CriteriaToSequelizeConverter implements ICriteriaToOrmConverter {
const field = mappings[criteria.order.orderBy.value] || criteria.order.orderBy.value;
const direction = criteria.order.orderType.value.toUpperCase();
const allowedFields = params.allowedFields ?? ["id", "created_at"];
const sortableFields = params.sortableFields ?? ["id", "created_at"];
const strict = params.strictMode ?? false;
if (!allowedFields.includes(field)) {
const msg = `[CriteriaToSequelizeConverter] Ignored ORDER BY '${field}' (not in allowedFields).`;
if (!sortableFields.includes(field)) {
const msg = `[CriteriaToSequelizeConverter] Ignored ORDER BY '${field}' (not in sortableFields).`;
if (strict) throw new Error(msg);
console.warn(msg);
return;
}
appendOrder(options, [[field, direction]] as OrderItem[]);
const orderItem = this.buildOrderItem(field, direction);
appendOrder(options, orderItem as OrderItem[]);
}
/** Paginación estándar */
@ -182,4 +183,18 @@ export class CriteriaToSequelizeConverter implements ICriteriaToOrmConverter {
return `\`${tableAlias}\`.\`${field}\``;
}
private buildOrderItem(field: string, direction: string): OrderItem {
if (field.includes(".")) {
const [associationAlias, column] = field.split(".");
if (!associationAlias || !column) {
throw new Error(`[CriteriaToSequelizeConverter] Invalid nested ORDER BY field '${field}'.`);
}
return [{ as: associationAlias }, column, direction] as OrderItem;
}
return [field, direction];
}
}

4
packages/rdx-criteria/src/types.ts
View File

@ -11,7 +11,7 @@ export type CriteriaMappings = Record<string, string>;
/**
* Parámetros de conversión → FindOptions (Sequelize).
* - allowedFields: lista blanca de campos ordenables (deben estar indexados).
* - sortableFields: lista blanca de campos ordenables (deben estar indexados).
* - searchableFields: columnas FULLTEXT (deben tener índice FT en BD).
* - enableFullText: activa MATCH ... AGAINST si true.
* - mappings: mapeo Criteria→SQL.
@ -20,7 +20,7 @@ export type CriteriaMappings = Record<string, string>;
* - strictMode?: true = lanza error si orden no permitido
*/
export interface ConvertParams {
allowedFields?: string[]; // p.ej. ['invoice_date','id','created_at']
sortableFields?: string[]; // p.ej. ['invoice_date','id','created_at']
searchableFields?: string[]; // p.ej. ['reference','description','notes']
enableFullText?: boolean; // default: false
mappings?: CriteriaMappings; // default: {}

2
packages/rdx-ui/src/components/datatable/data-table-column-header.tsx
View File

@ -41,7 +41,7 @@ export function DataTableColumnHeader<TData, TValue>({
type="button"
variant="ghost"
>
<span>{title}</span>
{title}
{column.getIsSorted() === "desc" ? (
<ArrowDownIcon />
) : column.getIsSorted() === "asc" ? (

79
packages/rdx-ui/src/components/datatable/data-table.tsx
View File

@ -65,6 +65,13 @@ export type DataTableMeta<TData> = TableMeta<TData> & {
bulkOps?: DataTableBulkRowOps<TData>;
};
export type DataTableSortDirection = "asc" | "desc";
export interface DataTableSort {
field: string;
direction: DataTableSortDirection;
}
export interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
@ -81,6 +88,11 @@ export interface DataTableProps<TData, TValue> {
getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
// Soporte para ordenamiento server-side
sort?: DataTableSort;
onSortChange?: (sort: DataTableSort) => void;
manualSorting?: boolean;
// Soporte para paginación server-side
manualPagination?: boolean;
pageIndex?: number; // 0-based
@ -111,6 +123,10 @@ export function DataTable<TData, TValue>({
getRowId,
sort: sorting,
onSortChange: onSortingChange,
manualSorting,
manualPagination,
pageIndex = 0,
totalItems,
@ -122,7 +138,7 @@ export function DataTable<TData, TValue>({
const { t } = useTranslation();
const [rowSelection, setRowSelection] = React.useState({});
const [sorting, setSorting] = React.useState<SortingState>([]);
const [internalSorting, setInternalSorting] = React.useState<DataTableSort | undefined>();
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
const [colSizes, setColSizes] = React.useState<ColumnSizingState>({});
@ -130,10 +146,57 @@ export function DataTable<TData, TValue>({
{}
);
// Visibilidad
const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility;
const handleColumnVisibilityChange = onColumnVisibilityChange ?? setInternalColumnVisibility;
// Ordenación
const resolvedSorting = sorting ?? internalSorting;
const resolvedSortingState = React.useMemo<SortingState>(
() =>
resolvedSorting
? [
{
id: resolvedSorting.field,
desc: resolvedSorting.direction === "desc",
},
]
: [],
[resolvedSorting]
);
const handleSortingChange: OnChangeFn<SortingState> = (updater) => {
const nextSorting = typeof updater === "function" ? updater(resolvedSortingState) : updater;
const next = nextSorting[0];
if (!next?.id) {
return;
}
const nextSort: DataTableSort = {
field: next.id,
direction: next.desc ? "desc" : "asc",
};
if (
resolvedSorting?.field === nextSort.field &&
resolvedSorting.direction === nextSort.direction
) {
return;
}
if (onSortingChange) {
onSortingChange(nextSort);
return;
}
setInternalSorting(nextSort);
};
const isManualSorting = manualSorting ?? false;
const isManualPagination = manualPagination ?? false;
// Configuración TanStack
const table = useReactTable({
data,
@ -151,14 +214,15 @@ export function DataTable<TData, TValue>({
state: {
columnSizing: colSizes,
sorting,
sorting: resolvedSortingState,
columnVisibility: resolvedColumnVisibility,
rowSelection,
columnFilters,
pagination: { pageIndex, pageSize },
},
manualPagination,
manualSorting: isManualSorting,
manualPagination: isManualPagination,
autoResetPageIndex: false,
pageCount: manualPagination ? Math.max(1, Math.ceil((totalItems ?? 0) / pageSize)) : undefined,
@ -176,16 +240,17 @@ export function DataTable<TData, TValue>({
}
},
onSortingChange: handleSortingChange,
enableRowSelection,
onRowSelectionChange: setRowSelection,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onColumnVisibilityChange: handleColumnVisibilityChange,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: manualPagination ? undefined : getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: isManualPagination ? undefined : getPaginationRowModel(),
getSortedRowModel: isManualSorting ? undefined : getSortedRowModel(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
});

29
packages/rdx-ui/src/components/datatable/hooks/use-data-table-preferences.ts
View File

@ -1,21 +1,28 @@
import type { OnChangeFn, VisibilityState } from "@tanstack/react-table";
import * as React from "react";
import type { DataTableSort } from "../data-table.tsx";
// Es preferible utilizar tipos de TanStack/Table
// para guardar las preferencias de la tabla.
export interface DataTablePreferences {
pageSize: number;
columnVisibility: VisibilityState;
sort?: DataTableSort;
}
interface UseDataTablePreferencesParams {
storageKey: string;
defaultPageSize: number;
defaultColumnVisibility?: VisibilityState;
defaultSort?: DataTableSort;
}
export const useDataTablePreferences = ({
storageKey,
defaultPageSize,
defaultColumnVisibility = {},
defaultSort = { field: "", direction: "asc" },
}: UseDataTablePreferencesParams) => {
const [preferences, setPreferences] = React.useState<DataTablePreferences>(() => {
try {
@ -25,6 +32,7 @@ export const useDataTablePreferences = ({
return {
pageSize: defaultPageSize,
columnVisibility: defaultColumnVisibility,
sort: defaultSort,
};
}
@ -36,11 +44,13 @@ export const useDataTablePreferences = ({
...defaultColumnVisibility,
...parsed.columnVisibility,
},
sort: parsed.sort ?? defaultSort,
};
} catch {
return {
pageSize: defaultPageSize,
columnVisibility: defaultColumnVisibility,
sort: defaultSort,
};
}
});
@ -82,9 +92,28 @@ export const useDataTablePreferences = ({
[persist]
);
const setSort = React.useCallback(
(sort: DataTableSort) => {
setPreferences((previous) => {
const next: DataTablePreferences = {
...previous,
sort,
};
persist(next);
return next;
});
},
[persist]
);
return {
pageSize: preferences.pageSize,
columnVisibility: preferences.columnVisibility,
sort: preferences.sort,
setSort,
setPageSize,
setColumnVisibility,
};