103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
|
|
import { UnsavedChangesProvider, useUnsavedChangesContext } from "@erp/core/hooks";
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { Plus } from "lucide-react";
|
|
import { useCallback, useId } from 'react';
|
|
import { useTranslation } from "../../i18n";
|
|
import { useCustomerCreateController } from '../../pages/create/use-customer-create-controller';
|
|
import { CustomerFormData } from "../../schemas";
|
|
import { CustomerEditForm } from '../editor';
|
|
|
|
|
|
type CustomerCreateModalProps = {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
client: CustomerFormData;
|
|
onChange: (customer: CustomerFormData) => void;
|
|
onSubmit: () => void; // ← mantenemos tu firma (no se usa directamente aquí)
|
|
};
|
|
|
|
export function CustomerCreateModal({
|
|
open,
|
|
onOpenChange,
|
|
}: CustomerCreateModalProps) {
|
|
const { t } = useTranslation();
|
|
const formId = useId();
|
|
|
|
const { requestConfirm } = useUnsavedChangesContext();
|
|
|
|
const {
|
|
form, isCreating, isCreateError, createError,
|
|
handleSubmit, handleError, FormProvider
|
|
} = useCustomerCreateController();
|
|
|
|
const { isDirty } = form.formState;
|
|
|
|
const guardClose = useCallback(async (nextOpen: boolean) => {
|
|
if (nextOpen) return onOpenChange(true);
|
|
|
|
if (isCreating) return;
|
|
|
|
if (!isDirty) {
|
|
return onOpenChange(false);
|
|
}
|
|
|
|
if (await requestConfirm()) {
|
|
return onOpenChange(false);
|
|
}
|
|
}, [requestConfirm, isCreating, onOpenChange, isDirty]);
|
|
|
|
|
|
const handleFormSubmit = (data: CustomerFormData) => handleSubmit(data /*, () => onOpenChange(false)*/);
|
|
|
|
return (
|
|
<UnsavedChangesProvider isDirty={isDirty}>
|
|
|
|
<Dialog open={open} onOpenChange={guardClose}>
|
|
<DialogContent className="bg-card border-border p-0 max-w-[calc(100vw-2rem)] sm:[calc(max-w-3xl-2rem)] h-[calc(100dvh-2rem)]">
|
|
<DialogHeader className="px-6 pt-6 pb-4 border-b">
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Plus className="size-5" /> {t("pages.create.title")}
|
|
</DialogTitle>
|
|
<DialogDescription className='text-left'>{t("pages.create.description")}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="overflow-y-auto h:[calc(100%-8rem)]">
|
|
<FormProvider {...form}>
|
|
<CustomerEditForm
|
|
formId={formId}
|
|
onSubmit={handleFormSubmit}
|
|
onError={handleError}
|
|
className="max-w-none"
|
|
/>
|
|
|
|
{isCreateError && (
|
|
<p role="alert" className="mt-3 text-sm text-destructive">
|
|
{(createError as Error)?.message}
|
|
</p>
|
|
)}
|
|
</FormProvider>
|
|
</div>
|
|
|
|
<DialogFooter className="px-6 py-4 border-t bg-card">
|
|
<Button type="button" form={formId} variant="outline" className='cursor-pointer' onClick={() => guardClose(false)} disabled={isCreating}>
|
|
{t('common.cancel', "Cancelar")}
|
|
</Button>
|
|
<Button type="submit" form={formId} disabled={isCreating} className='cursor-pointer'>
|
|
{isCreating ? <span aria-live="polite">{t('common.saving', "Guardando")}</span> : <span>{t('common.save', "Guardar")}</span>}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
</UnsavedChangesProvider>
|
|
);
|
|
} |