David
2f8122ca77
- Updated CustomerViewHeader to use RdxEditorHeader for a more consistent header layout. - Refactored CustomerViewPage to utilize RdxPageFrame and RdxPageContainer for improved structure. - Replaced PageFormHeader with RdxEditorHeader in AccountPage for uniformity. - Adjusted SupplierCreatePage and SupplierUpdatePage to use RdxPageFrame and RdxPageContainer for layout consistency. - Removed SupplierLayout component as it was no longer necessary. - Enhanced SupplierDetailPage to utilize RdxPageFrame for better layout management. - Introduced RdxEditorHeader component to encapsulate header functionality for editor pages. - Updated tests to cover new RdxEditorHeader functionality and removed obsolete tests related to RdxPageHeader.
65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
import { ErrorAlert } from "@erp/core/components";
|
|
import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
|
|
import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
|
|
import { FormProvider } from "react-hook-form";
|
|
import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";
|
|
|
|
import { useTranslation } from "../i18n";
|
|
import { SupplierEditorForm, SupplierEditorHeader } from "../shared/ui";
|
|
|
|
import { useSupplierCreateController } from "./controllers";
|
|
|
|
export const SupplierCreatePage = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const returnTo = searchParams.get("returnTo") ?? "/suppliers";
|
|
const { navigateBack } = useReturnToNavigation({ fallbackPath: returnTo });
|
|
const controller = useSupplierCreateController({
|
|
onCreated: (supplier) =>
|
|
navigate({
|
|
pathname: `/suppliers/${supplier.id}`,
|
|
search: createSearchParams({ returnTo }).toString(),
|
|
}),
|
|
});
|
|
|
|
return (
|
|
<FormProvider {...controller.form}>
|
|
<UnsavedChangesProvider isDirty={controller.form.formState.isDirty}>
|
|
<RdxPageFrame
|
|
contentClassName="bg-muted/20"
|
|
header={
|
|
<SupplierEditorHeader
|
|
formId={controller.formId}
|
|
hasChanges={controller.form.formState.isDirty}
|
|
isSaving={controller.mutation.isPending}
|
|
onCancel={navigateBack}
|
|
title={t("create.title")}
|
|
/>
|
|
}
|
|
>
|
|
<RdxPageContainer width="content">
|
|
<RdxEditorLayout>
|
|
<div className="rounded-2xl border border-border/60 bg-background p-4 shadow-xs md:p-6">
|
|
<div className="flex min-w-0 flex-col gap-6">
|
|
{controller.mutation.isError ? (
|
|
<ErrorAlert
|
|
message={controller.mutation.error.message || t("create.error")}
|
|
title={t("create.error")}
|
|
/>
|
|
) : null}
|
|
<SupplierEditorForm
|
|
formId={controller.formId}
|
|
isSubmitting={controller.mutation.isPending}
|
|
onSubmit={controller.onSubmit}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</RdxEditorLayout>
|
|
</RdxPageContainer>
|
|
</RdxPageFrame>
|
|
</UnsavedChangesProvider>
|
|
</FormProvider>
|
|
);
|
|
};
|