This commit is contained in:
David Arranz 2024-08-29 13:30:05 +02:00
parent abc182b575
commit 78684303df
3 changed files with 36 additions and 17 deletions

View File

@ -39,6 +39,8 @@ import { AppendEmptyRowButton } from "./AppendEmptyRowButton";
import { QuoteItemsSortableDataTableToolbar } from "./QuoteItemsSortableDataTableToolbar"; import { QuoteItemsSortableDataTableToolbar } from "./QuoteItemsSortableDataTableToolbar";
import { QuoteItemsSortableTableRow } from "./QuoteItemsSortableTableRow"; import { QuoteItemsSortableTableRow } from "./QuoteItemsSortableTableRow";
export type RowIdData = { [x: string]: any };
declare module "@tanstack/react-table" { declare module "@tanstack/react-table" {
interface TableMeta<TData extends RowData> { interface TableMeta<TData extends RowData> {
insertItem: (rowIndex: number, data?: unknown) => void; insertItem: (rowIndex: number, data?: unknown) => void;
@ -46,7 +48,12 @@ declare module "@tanstack/react-table" {
pickCatalogArticle: () => void; pickCatalogArticle: () => void;
duplicateItems: (rowIndex?: number) => void; duplicateItems: (rowIndex?: number) => void;
deleteItems: (rowIndex?: number | number[]) => void; deleteItems: (rowIndex?: number | number[]) => void;
updateItem: (rowIndex: number, rowData: TData, fieldName: string, value: unknown) => void; updateItem: (
rowIndex: number,
rowData: TData & RowIdData,
fieldName: string,
value: unknown
) => void;
} }
} }
@ -54,12 +61,17 @@ export interface QuoteItemsSortableProps {
id: UniqueIdentifier; id: UniqueIdentifier;
} }
export type QuoteItemsSortableDataTableProps = { export type QuoteItemsSortableDataTableProps<
columns: ColumnDef<unknown, unknown>[]; TData extends RowData & RowIdData,
data: Record<"id", string>[]; TValue = unknown
> = {
columns: ColumnDef<TData, TValue>[];
data: TData[];
defaultValues: Readonly<{ [x: string]: any }> | undefined; defaultValues: Readonly<{ [x: string]: any }> | undefined;
initialState?: InitialTableState; initialState?: InitialTableState;
actions: Omit<UseFieldArrayReturn<FieldValues, "items">, "fields"> & Record<string, unknown>; actions: Omit<UseFieldArrayReturn<FieldValues, "items">, "fields"> & {
pickCatalogArticle: () => void;
};
}; };
const measuringConfig = { const measuringConfig = {
@ -91,13 +103,13 @@ const dropAnimationConfig: DropAnimation = {
}, },
}; };
export function QuoteItemsSortableDataTable({ export function QuoteItemsSortableDataTable<TData extends RowData & RowIdData, TValue = unknown>({
columns, columns,
data, data,
defaultValues, defaultValues,
initialState, initialState,
actions, actions,
}: QuoteItemsSortableDataTableProps) { }: QuoteItemsSortableDataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = useState<RowSelectionState>({}); const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
const [activeId, setActiveId] = useState<UniqueIdentifier | null>(); const [activeId, setActiveId] = useState<UniqueIdentifier | null>();
@ -108,13 +120,14 @@ export function QuoteItemsSortableDataTable({
const sorteableRowIds = useMemo(() => data.map((item) => item.id), [data]); const sorteableRowIds = useMemo(() => data.map((item) => item.id), [data]);
const table = useReactTable({ const table = useReactTable<TData>({
data, data,
columns, columns,
enableColumnResizing: false, enableColumnResizing: false,
columnResizeMode: "onChange", columnResizeMode: "onChange",
//defaultColumn, //defaultColumn,
autoResetAll: false, // <-- añadido nuevo
initialState, initialState,
state: { state: {
rowSelection, rowSelection,
@ -127,7 +140,7 @@ export function QuoteItemsSortableDataTable({
onRowSelectionChange: setRowSelection, onRowSelectionChange: setRowSelection,
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getRowId: (originalRow: unknown) => originalRow?.id, getRowId: (originalRow) => originalRow?.id,
debugTable: false, debugTable: false,
debugHeaders: false, debugHeaders: false,

View File

@ -5,7 +5,7 @@ import { CopyPlusIcon, ScanIcon, Trash2Icon } from "lucide-react";
import { AppendCatalogArticleRowButton } from "./AppendCatalogArticleRowButton"; import { AppendCatalogArticleRowButton } from "./AppendCatalogArticleRowButton";
import { AppendEmptyRowButton } from "./AppendEmptyRowButton"; import { AppendEmptyRowButton } from "./AppendEmptyRowButton";
export const QuoteItemsSortableDataTableToolbar = ({ table }: { table: Table<unknown> }) => { export const QuoteItemsSortableDataTableToolbar = ({ table }: { table: Table<any> }) => {
const selectedRowsCount = table.getSelectedRowModel().rows.length; const selectedRowsCount = table.getSelectedRowModel().rows.length;
if (selectedRowsCount) { if (selectedRowsCount) {

View File

@ -6,13 +6,17 @@ import {
LoadingOverlay, LoadingOverlay,
SubmitButton, SubmitButton,
} from "@/components"; } from "@/components";
import { calculateQuoteItemTotals, calculateQuoteTotals } from "@/lib/calc";
import { useUnsavedChangesNotifier } from "@/lib/hooks"; import { useUnsavedChangesNotifier } from "@/lib/hooks";
import { useUrlId } from "@/lib/hooks/useUrlId"; import { useUrlId } from "@/lib/hooks/useUrlId";
import { Button, Form, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui"; import { Button, Form, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui";
import { CurrencyData, IGetQuote_Response_DTO, Language } from "@shared/contexts"; import {
CurrencyData,
IGetQuote_QuoteItem_Response_DTO,
IGetQuote_Response_DTO,
Language,
} from "@shared/contexts";
import { t } from "i18next"; import { t } from "i18next";
import { useEffect, useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
@ -20,7 +24,8 @@ import { QuotePricesResume } from "./components";
import { QuoteDetailsCardEditor, QuoteGeneralCardEditor } from "./components/editors"; import { QuoteDetailsCardEditor, QuoteGeneralCardEditor } from "./components/editors";
import { useQuotes } from "./hooks"; import { useQuotes } from "./hooks";
type QuoteDataForm = IGetQuote_Response_DTO; export type QuoteDataForm = IGetQuote_Response_DTO;
export type QuoteDataFormItem = IGetQuote_QuoteItem_Response_DTO;
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
export const QuoteEdit = () => { export const QuoteEdit = () => {
@ -123,7 +128,7 @@ export const QuoteEdit = () => {
//shouldUnregister: true, //shouldUnregister: true,
}); });
const { watch, getValues, setValue, reset, handleSubmit, formState } = form; const { getValues, reset, handleSubmit, formState } = form;
const { isSubmitting, isDirty } = formState; const { isSubmitting, isDirty } = formState;
useUnsavedChangesNotifier({ useUnsavedChangesNotifier({
@ -152,9 +157,10 @@ export const QuoteEdit = () => {
}); });
}; };
useEffect(() => { /*useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { unsubscribe } = watch((_, { name, type }) => { const { unsubscribe } = watch((_, { name, type }) => {
console.log("useEffect");
const quote = getValues(); const quote = getValues();
if (name) { if (name) {
@ -228,7 +234,7 @@ export const QuoteEdit = () => {
} }
}); });
return () => unsubscribe(); return () => unsubscribe();
}, [watch, getValues, setValue]); }, [watch, getValues, setValue]);*/
if (isSubmitting || isPending) { if (isSubmitting || isPending) {
return <LoadingOverlay title='Guardando cotización' />; return <LoadingOverlay title='Guardando cotización' />;