diff --git a/client/src/app/quotes/create.tsx b/client/src/app/quotes/create.tsx index 20af124..3491450 100644 --- a/client/src/app/quotes/create.tsx +++ b/client/src/app/quotes/create.tsx @@ -1,27 +1,28 @@ import { BackHistoryButton, + ErrorOverlay, FormDatePickerField, FormTextAreaField, FormTextField, + LoadingOverlay, } from "@/components"; import { t } from "i18next"; import { SubmitButton } from "@/components"; -import { useWarnAboutChange } from "@/lib/hooks"; +import { useUnsavedChangesNotifier } from "@/lib/hooks"; import { Button, Form } from "@/ui"; import { ICreateQuote_Request_DTO } from "@shared/contexts"; -import { useEffect } from "react"; -import { FieldErrors, SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form"; +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 { setWarnWhen } = useWarnAboutChange(); const { useCreate } = useQuotes(); - const { mutate } = useCreate(); + const { mutate, error: mutateError, isError, isPending } = useCreate(); const form = useForm({ defaultValues: { @@ -31,23 +32,23 @@ export const QuoteCreate = () => { }, }); - const { watch, handleSubmit } = form; + const { formState, reset, getValues, handleSubmit } = form; + const { isSubmitting, isDirty } = formState; - useEffect(() => { - const subscription = watch((values: any, { type }: { type?: any }) => { - if (type === "change") { - // Hay cambios en el formulario - //setWarnWhen(true); - } - }); - return () => subscription.unsubscribe(); - }, [watch, setWarnWhen]); + useUnsavedChangesNotifier({ + isDirty, + }); const onSubmit: SubmitHandler = async (formData) => { try { - setWarnWhen(false); mutate(formData, { + onError: (error) => { + console.debug(error); + toast.error(error.message); + }, onSuccess: (data) => { + reset(getValues()); + toast("Cotización guardada"); navigate(`/quotes/edit/${data.id}`, { relative: "path", replace: true }); }, }); @@ -56,15 +57,21 @@ export const QuoteCreate = () => { } }; - const onErrors: SubmitErrorHandler = async ( - errors: FieldErrors - ) => { - console.log(errors); - }; + if (isSubmitting) { + return ; + } + + if (isError) { + return ; + } + + if (isPending) { + return ; + } return (
- +
@@ -102,8 +109,8 @@ export const QuoteCreate = () => { />
- diff --git a/client/src/app/quotes/edit.tsx b/client/src/app/quotes/edit.tsx index fcd8985..5e376d8 100644 --- a/client/src/app/quotes/edit.tsx +++ b/client/src/app/quotes/edit.tsx @@ -6,6 +6,7 @@ import { SubmitButton, } from "@/components"; import { calculateQuoteItemTotals, calculateQuoteTotals } from "@/lib/calc"; +import { useUnsavedChangesNotifier } from "@/lib/hooks"; import { useUrlId } from "@/lib/hooks/useUrlId"; import { Badge, Button, Form, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui"; import { CurrencyData, IGetQuote_Response_DTO, Language } from "@shared/contexts"; @@ -124,7 +125,7 @@ export const QuoteEdit = () => { [data, quoteCurrency] ); - const { mutate } = useUpdate(String(quoteId)); + const { mutate, isPending } = useUpdate(String(quoteId)); const form = useForm({ mode: "onBlur", @@ -133,21 +134,12 @@ export const QuoteEdit = () => { //shouldUnregister: true, }); - const { watch, getValues, setValue, formState } = form; + const { watch, getValues, setValue, reset, handleSubmit, formState } = form; + const { isSubmitting, isDirty } = formState; - /*const { clear } = useFormPersist( - "quote-edit", - { - watch, - setValue, - }, - { - storage: window.localStorage, // default window.sessionStorage - //exclude: ['foo'] - } - );*/ - - const { isSubmitting } = formState; + useUnsavedChangesNotifier({ + isDirty, + }); const onSubmit: SubmitHandler = async (data) => { // Transformación del form -> typo de request @@ -160,7 +152,8 @@ export const QuoteEdit = () => { }, //onSettled: () => {}, onSuccess: () => { - toast("Guardado!"); + reset(getValues()); + toast("Cotización guardada"); //clear(); }, }); @@ -344,7 +337,7 @@ export const QuoteEdit = () => { return () => unsubscribe(); }, [watch, getValues, setValue]); - if (isSubmitting) { + if (isSubmitting || isPending) { return ; } @@ -358,7 +351,7 @@ export const QuoteEdit = () => { return ( - +
@@ -378,7 +371,7 @@ export const QuoteEdit = () => { diff --git a/client/src/app/quotes/hooks/useDetailColumns.tsx b/client/src/app/quotes/hooks/useDetailColumns.tsx index 944520d..2f57a66 100644 --- a/client/src/app/quotes/hooks/useDetailColumns.tsx +++ b/client/src/app/quotes/hooks/useDetailColumns.tsx @@ -106,5 +106,5 @@ export function useDetailColumns( } return columns; - }, []); + }, [enableActionsColumn, enableDragHandleColumn, enableSelectionColumn]); } diff --git a/client/src/app/settings/edit.tsx b/client/src/app/settings/edit.tsx index 4d05895..9be68e0 100644 --- a/client/src/app/settings/edit.tsx +++ b/client/src/app/settings/edit.tsx @@ -64,7 +64,7 @@ export const SettingsEditor = () => { ),*/ }); - const { formState, reset, getValues } = form; + const { formState, reset, getValues, handleSubmit } = form; const { isSubmitting, isDirty } = formState; useUnsavedChangesNotifier({ @@ -107,7 +107,7 @@ export const SettingsEditor = () => {
- +
{form.formState.errors.root?.message && (