142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
import {
|
|
BackHistoryButton,
|
|
FormDatePickerField,
|
|
FormTextAreaField,
|
|
FormTextField,
|
|
LoadingOverlay,
|
|
} from "@/components";
|
|
import { t } from "i18next";
|
|
|
|
import { SubmitButton } from "@/components";
|
|
import { useUnsavedChangesNotifier } from "@/lib/hooks";
|
|
import { Button, Form } from "@/ui";
|
|
import { joiResolver } from "@hookform/resolvers/joi";
|
|
import { ICreateQuote_Request_DTO } from "@shared/contexts";
|
|
import Joi from "joi";
|
|
import { useMemo } from "react";
|
|
import { SubmitHandler, useForm } from "react-hook-form";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { toast } from "react-toastify";
|
|
import { useQuotes } from "./hooks";
|
|
|
|
interface QuoteDataForm extends ICreateQuote_Request_DTO {}
|
|
|
|
export const QuoteCreate = () => {
|
|
const navigate = useNavigate();
|
|
const { useCreate } = useQuotes();
|
|
const { mutate, isPending } = useCreate();
|
|
|
|
const defaultValues = useMemo(
|
|
() => ({
|
|
date: new Date(Date.now()).toUTCString(),
|
|
customer_information: "",
|
|
reference: "",
|
|
}),
|
|
[]
|
|
);
|
|
|
|
const form = useForm<QuoteDataForm>({
|
|
mode: "onBlur",
|
|
defaultValues,
|
|
resolver: joiResolver(
|
|
Joi.object({
|
|
reference: Joi.string().required(),
|
|
date: Joi.date().required(),
|
|
customer_information: Joi.string().required(),
|
|
}),
|
|
{
|
|
//messages: SpanishJoiMessages,
|
|
}
|
|
),
|
|
});
|
|
|
|
const { formState, reset, getValues, handleSubmit } = form;
|
|
const { isSubmitting, isDirty } = formState;
|
|
|
|
useUnsavedChangesNotifier({
|
|
isDirty,
|
|
});
|
|
|
|
const onSubmit: SubmitHandler<QuoteDataForm> = async (formData) => {
|
|
try {
|
|
mutate(formData, {
|
|
onError: (error) => {
|
|
console.debug(error);
|
|
toast.error(error.message);
|
|
},
|
|
onSuccess: (data) => {
|
|
reset(getValues());
|
|
toast.success("Cotización guardada");
|
|
navigate(`/quotes/edit/${data.id}`, { relative: "path", replace: true });
|
|
},
|
|
});
|
|
} finally {
|
|
//setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (isSubmitting) {
|
|
return <LoadingOverlay title='Guardando ajustes' />;
|
|
}
|
|
|
|
/*if (isError) {
|
|
return <ErrorOverlay errorMessage={mutateError?.message} />;
|
|
}*/
|
|
|
|
if (isPending) {
|
|
return <LoadingOverlay />;
|
|
}
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className='mx-auto grid max-w-[90rem] flex-1 auto-rows-max gap-6'>
|
|
<div className='flex items-center gap-4'>
|
|
<BackHistoryButton />
|
|
<h1 className='flex-1 text-xl font-semibold tracking-tight shrink-0 whitespace-nowrap sm:grow-0'>
|
|
{t("quotes.create.title")}
|
|
</h1>
|
|
</div>
|
|
|
|
<div className='grid w-6/12 gap-6 mx-auto'>
|
|
<FormTextField
|
|
className='row-span-2'
|
|
name='reference'
|
|
required
|
|
label={t("quotes.form_fields.reference.label")}
|
|
description={t("quotes.form_fields.reference.desc")}
|
|
placeholder={t("quotes.form_fields.reference.placeholder")}
|
|
/>
|
|
|
|
<FormDatePickerField
|
|
required
|
|
label={t("quotes.form_fields.date.label")}
|
|
description={t("quotes.form_fields.date.desc")}
|
|
placeholder={t("quotes.form_fields.date.placeholder")}
|
|
name='date'
|
|
/>
|
|
|
|
<FormTextAreaField
|
|
rows={4}
|
|
className='row-span-2'
|
|
name='customer_information'
|
|
required
|
|
label={t("quotes.form_fields.customer_information.label")}
|
|
description={t("quotes.form_fields.customer_information.desc")}
|
|
placeholder={t("quotes.form_fields.customer_information.placeholder")}
|
|
/>
|
|
|
|
<div className='flex items-center justify-around gap-2'>
|
|
<Button size='sm' variant={"outline"} onClick={() => navigate("/quotes")}>
|
|
{t("common.discard")}
|
|
</Button>
|
|
|
|
<SubmitButton size='sm' label={t("common.continue")}></SubmitButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
);
|
|
};
|