Preguntar si se quieren guardar los cambios en la edición de cotizaciones

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<QuoteDataForm>({
     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<QuoteDataForm> = 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<QuoteDataForm> = async (
-    errors: FieldErrors<QuoteDataForm>
-  ) => {
-    console.log(errors);
-  };
+  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, onErrors)}>
+      <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 />
@@ -102,8 +109,8 @@ export const QuoteCreate = () => {
             />
 
             <div className='flex items-center justify-around gap-2'>
-              <Button size='sm' variant={"outline"} url='/quotes'>
-                {t("quotes.create.buttons.discard")}
+              <Button size='sm' variant={"outline"} onClick={() => navigate("/quotes")}>
+                {t("common.discard")}
               </Button>
 
               <SubmitButton size='sm' label={t("common.continue")}></SubmitButton>

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<QuoteDataForm>({
     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<QuoteDataForm> = 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 <LoadingOverlay title='Guardando cotización' />;
   }
 
@@ -358,7 +351,7 @@ export const QuoteEdit = () => {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <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 />
@@ -378,7 +371,7 @@ export const QuoteEdit = () => {
 
               <SubmitButton
                 label={t("common.save")}
-                variant={form.formState.isDirty ? "default" : "outline"}
+                variant={formState.isDirty ? "default" : "outline"}
                 size='sm'
                 disabled={formState.isSubmitting || formState.isLoading || formState.isValidating}
               >

client/src/app/quotes/hooks/useDetailColumns.tsx

@@ -106,5 +106,5 @@ export function useDetailColumns<TData, TValue = unknown>(
     }
 
     return columns;
-  }, []);
+  }, [enableActionsColumn, enableDragHandleColumn, enableSelectionColumn]);
 }

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 = () => {
       </div>
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
+        <form onSubmit={handleSubmit(onSubmit)}>
           <div className='mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]'>
             {form.formState.errors.root?.message && (
               <Alert variant='destructive'>