Uecko_ERP/modules/customers/src/web/update/ui/pages/customer-update-page.tsx
2026-06-26 12:28:52 +02:00

107 lines
3.4 KiB
TypeScript

import { ErrorAlert, NotFoundCard } from "@erp/core/components";
import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
import { AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
import { FormProvider } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "../../../i18n";
import { useCustomerUpdatePageController } from "../../controllers";
import { CustomerUpdateHeader } from "../blocks";
import { CustomerEditorSkeleton } from "../components";
import { CustomerUpdateEditorForm } from "../editor";
export const CustomerUpdatePage = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { updateCtrl, returnTo } = useCustomerUpdatePageController();
const { navigateBack } = useReturnToNavigation({
fallbackPath: returnTo,
});
const handleCancel = () => navigateBack();
if (updateCtrl.isLoading) {
return <CustomerEditorSkeleton />;
}
if (updateCtrl.isLoadError) {
return (
<AppContent>
<ErrorAlert
message={
updateCtrl.loadError instanceof Error
? updateCtrl.loadError.message
: t("update.errors.load_message")
}
title={t("update.errors.load_title")}
/>
<div className="flex items-center justify-end">
<BackHistoryButton />
</div>
</AppContent>
);
}
if (!updateCtrl.customerData)
return (
<AppContent>
<NotFoundCard
message={t("update.errors.not_found_message")}
title={t("update.errors.not_found_title")}
/>
</AppContent>
);
return (
<div className="fixed inset-0 flex flex-col overflow-hidden">
<FormProvider {...updateCtrl.form}>
<UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
<CustomerUpdateHeader
formId={updateCtrl.formId}
hasChanges={updateCtrl.form.formState.isDirty}
isSaving={updateCtrl.form.formState.isSubmitting}
labels={{
title: "Editar cliente",
back: "Volver",
modified: "Modificada",
cancel: "Cancelar",
save: "Guardar",
saving: "Guardando...",
moreActions: "Más acciones",
keyboardShortcuts: "Ver atajos de teclado",
duplicate: "Duplicar cliente",
delete: "Eliminar",
}}
onCancel={handleCancel}
//onDelete={openDeleteDialog}
//onDuplicate={handleDuplicate}
//onExportPdf={handleExportPdf}
/>
{updateCtrl.isUpdateError && (
<ErrorAlert
message={
(updateCtrl.updateError as Error)?.message ??
t("pages.customers.update.error_msg", "Revisa los datos e inténtalo de nuevo.")
}
title={t("pages.customers.update.error_title", "No se pudo guardar los cambios")}
/>
)}
<div className="flex-1 overflow-y-auto">
<CustomerUpdateEditorForm
className="max-w-5xl mx-auto mb-12"
fiscalCtrl={updateCtrl.fiscalCtrl}
formId={updateCtrl.formId}
isSubmitting={updateCtrl.isUpdating}
onReset={updateCtrl.resetForm}
onSubmit={updateCtrl.onSubmit}
/>
</div>
</UnsavedChangesProvider>
</FormProvider>
</div>
);
};