118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import { ErrorAlert, NotFoundCard, PageHeader } from "@erp/core/components";
|
|
import { UnsavedChangesProvider, UpdateCommitButtonGroup } from "@erp/core/hooks";
|
|
import { AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
|
|
import { FormProvider } from "react-hook-form";
|
|
|
|
import { useTranslation } from "../../../i18n";
|
|
import { useCustomerUpdatePageController } from "../../controllers";
|
|
import { CustomerEditorSkeleton } from "../components";
|
|
import { CustomerEditForm } from "../editor";
|
|
|
|
export const CustomerUpdatePage = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const { updateCtrl } = useCustomerUpdatePageController();
|
|
|
|
const {
|
|
form,
|
|
formId,
|
|
onSubmit,
|
|
resetForm,
|
|
|
|
customerData,
|
|
isLoading,
|
|
isLoadError,
|
|
loadError,
|
|
|
|
isUpdating,
|
|
isUpdateError,
|
|
updateError,
|
|
} = updateCtrl;
|
|
|
|
const isDirty = form.formState.isDirty;
|
|
|
|
if (isLoading) {
|
|
return <CustomerEditorSkeleton />;
|
|
}
|
|
|
|
if (isLoadError) {
|
|
return (
|
|
<>
|
|
<AppContent>
|
|
<ErrorAlert
|
|
message={
|
|
(loadError as Error)?.message ??
|
|
t("pages.update.loadErrorMsg", "Inténtalo de nuevo más tarde.")
|
|
}
|
|
title={t("pages.update.loadErrorTitle", "No se pudo cargar el cliente")}
|
|
/>
|
|
|
|
<div className="flex items-center justify-end">
|
|
<BackHistoryButton />
|
|
</div>
|
|
</AppContent>
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (!customerData)
|
|
return (
|
|
<>
|
|
<AppContent>
|
|
<NotFoundCard
|
|
message={t("pages.update.notFoundMsg", "Revisa el identificador o vuelve al listado.")}
|
|
title={t("pages.update.notFoundTitle", "Cliente no encontrado")}
|
|
/>
|
|
</AppContent>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<UnsavedChangesProvider isDirty={isDirty}>
|
|
<AppHeader>
|
|
<PageHeader
|
|
backIcon
|
|
description={t("pages.update.description")}
|
|
rightSlot={
|
|
<UpdateCommitButtonGroup
|
|
cancel={{
|
|
formId,
|
|
to: "/customers/list",
|
|
disabled: isUpdating,
|
|
}}
|
|
disabled={isUpdating}
|
|
isLoading={isUpdating}
|
|
onReset={resetForm}
|
|
submit={{
|
|
formId,
|
|
disabled: isUpdating,
|
|
}}
|
|
/>
|
|
}
|
|
title={t("pages.update.title")}
|
|
/>
|
|
</AppHeader>
|
|
<AppContent>
|
|
{/* Alerta de error de actualización (si ha fallado el último intento) */}
|
|
{isUpdateError && (
|
|
<ErrorAlert
|
|
message={
|
|
(updateError as Error)?.message ??
|
|
t("pages.update.errorMsg", "Revisa los datos e inténtalo de nuevo.")
|
|
}
|
|
title={t("pages.update.errorTitle", "No se pudo guardar los cambios")}
|
|
/>
|
|
)}
|
|
|
|
<FormProvider {...form}>
|
|
<CustomerEditForm
|
|
className="bg-white rounded-xl border shadow-xl max-w-7xl mx-auto mt-6 " // para que el botón del header pueda hacer submit
|
|
formId={formId}
|
|
onSubmit={onSubmit}
|
|
/>
|
|
</FormProvider>
|
|
</AppContent>
|
|
</UnsavedChangesProvider>
|
|
);
|
|
};
|