118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
import { PageHeader } from "@erp/core/components";
|
|
import { UnsavedChangesProvider, UpdateCommitButtonGroup, useHookForm } from "@erp/core/hooks";
|
|
import { AppContent, AppHeader } from "@repo/rdx-ui/components";
|
|
import { showErrorToast, showSuccessToast } from "@repo/rdx-ui/helpers";
|
|
import { useId, useMemo } from "react";
|
|
import { type FieldErrors, FormProvider } from "react-hook-form";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { useInvoiceContext } from "../../context";
|
|
import { useUpdateProforma } from "../../hooks";
|
|
import { useTranslation } from "../../i18n";
|
|
import {
|
|
type InvoiceFormData,
|
|
InvoiceFormSchema,
|
|
type Proforma,
|
|
defaultCustomerInvoiceFormData,
|
|
invoiceDtoToFormAdapter,
|
|
} from "../../schemas";
|
|
|
|
import { InvoiceUpdateForm } from "./invoice-update-form";
|
|
|
|
export type InvoiceUpdateCompProps = {
|
|
invoice: Proforma;
|
|
};
|
|
|
|
export const InvoiceUpdateComp = ({ invoice: invoiceData }: InvoiceUpdateCompProps) => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const formId = useId();
|
|
|
|
const context = useInvoiceContext();
|
|
const { invoice_id } = context;
|
|
|
|
const isPending = !invoiceData;
|
|
|
|
const {
|
|
mutate,
|
|
isPending: isUpdating,
|
|
isError: isUpdateError,
|
|
error: updateError,
|
|
} = useUpdateProforma();
|
|
|
|
const initialValues = useMemo(() => {
|
|
return invoiceData
|
|
? invoiceDtoToFormAdapter.fromDto(invoiceData, context)
|
|
: defaultCustomerInvoiceFormData;
|
|
}, [invoiceData, context]);
|
|
|
|
const form = useHookForm<InvoiceFormData>({
|
|
resolverSchema: InvoiceFormSchema,
|
|
initialValues,
|
|
disabled: !invoiceData || isUpdating,
|
|
});
|
|
|
|
const handleSubmit = (formData: InvoiceFormData) => {
|
|
console.log("Guardo factura");
|
|
const dto = invoiceDtoToFormAdapter.toDto(formData, context);
|
|
console.log("dto => ", dto);
|
|
mutate(
|
|
{ id: invoice_id, data: dto as Partial<InvoiceFormData> },
|
|
{
|
|
onSuccess: () =>
|
|
showSuccessToast(t("pages.update.success.title"), t("pages.update.success.message")),
|
|
onError: (e) => showErrorToast(t("pages.update.errorTitle"), e.message),
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleReset = () =>
|
|
form.reset((invoiceData as unknown as InvoiceFormData) ?? defaultCustomerInvoiceFormData);
|
|
|
|
const handleBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
const handleError = (errors: FieldErrors<InvoiceFormData>) => {
|
|
console.error("Errores en el formulario:", errors);
|
|
// Aquí puedes manejar los errores, por ejemplo, mostrar un mensaje al usuario
|
|
};
|
|
|
|
return (
|
|
<UnsavedChangesProvider isDirty={form.formState.isDirty}>
|
|
<AppHeader>
|
|
<PageHeader
|
|
backIcon
|
|
description={t("pages.edit.description")}
|
|
rightSlot={
|
|
<>
|
|
<UpdateCommitButtonGroup
|
|
cancel={{ formId, to: "/customer-invoices/list" }}
|
|
isLoading={isPending}
|
|
submit={{
|
|
formId,
|
|
variant: "default",
|
|
disabled: isPending,
|
|
label: t("pages.edit.actions.save_draft"),
|
|
}}
|
|
/>
|
|
</>
|
|
}
|
|
title={`${t("pages.edit.title")} #${invoiceData.invoice_number}`}
|
|
/>
|
|
</AppHeader>
|
|
|
|
<AppContent>
|
|
<FormProvider {...form}>
|
|
<InvoiceUpdateForm
|
|
className="bg-white rounded-xl border shadow-xl max-w-full"
|
|
formId={formId}
|
|
onError={handleError}
|
|
onSubmit={handleSubmit}
|
|
/>
|
|
</FormProvider>
|
|
</AppContent>
|
|
</UnsavedChangesProvider>
|
|
);
|
|
};
|