Troubleshooting unsaved changes indicator BOD-172

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -6,14 +6,17 @@ import { Prompt, useLocation } from "react-router-dom";
 
 export default function FormsFieldChanged({ form }) {
   const { t } = useTranslation();
+
   const handleReset = () => {
     form.resetFields();
   };
+
   const loc = useLocation();
 
   return (
     <Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}>
       {() => {
+        console.log("Render", form.isFieldsTouched());
         if (form.isFieldsTouched())
           return (
             <div>
@@ -26,7 +29,7 @@ export default function FormsFieldChanged({ form }) {
                 }}
               />
               <AlertComponent
-                type='warning'
+                type="warning"
                 message={
                   <div>
                     <span>{t("general.messages.unsavedchanges")}</span>
@@ -35,7 +38,8 @@ export default function FormsFieldChanged({ form }) {
                       style={{
                         cursor: "pointer",
                         textDecoration: "underline",
-                      }}>
+                      }}
+                    >
                       {t("general.actions.reset")}
                     </span>
                   </div>

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -101,9 +101,10 @@ export function JobsDetailPage({
     // size: "small",
   };
 
-  const handleFinish = (values) => {
+  const handleFinish = async (values) => {
     const newTotals = CalculateJob({ ...job, ...values }, bodyshop.shoprates);
-    mutationUpdateJob({
+
+    const result = await mutationUpdateJob({
       variables: {
         jobId: job.id,
         job: {
@@ -113,30 +114,36 @@ export function JobsDetailPage({
           job_totals: JSON.stringify(newTotals),
         },
       },
-    }).then((r) => {
+    });
+
+    if (!!!result.errors) {
       notification["success"]({
         message: t("jobs.successes.savetitle"),
       });
-      refetch().then((r) => form.resetFields());
-    });
+      await refetch();
+      form.resetFields();
+      form.resetFields();
+    }
   };
 
   return (
     <Suspense
-      fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}>
+      fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
+    >
       <ScheduleJobModalContainer />
       <JobReconciliationModal />
       <JobLineUpsertModalContainer />
       <Form
         form={form}
-        name='JobDetailForm'
+        name="JobDetailForm"
         onFinish={handleFinish}
         {...formItemLayout}
         autoComplete={"off"}
         initialValues={{
           ...job,
           loss_date: job.loss_date ? moment(job.loss_date) : null,
-        }}>
+        }}
+      >
         <FormFieldsChanged form={form} />
 
         <JobsDetailHeader
@@ -148,7 +155,8 @@ export function JobsDetailPage({
         />
         <Tabs
           defaultActiveKey={search.tab}
-          onChange={(key) => history.push({ search: `?tab=${key}` })}>
+          onChange={(key) => history.push({ search: `?tab=${key}` })}
+        >
           <Tabs.TabPane
             tab={
               <span>
@@ -156,7 +164,8 @@ export function JobsDetailPage({
                 {t("menus.jobsdetail.claimdetail")}
               </span>
             }
-            key='claimdetail'>
+            key="claimdetail"
+          >
             <JobsDetailClaims job={job} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -166,7 +175,8 @@ export function JobsDetailPage({
                 {t("menus.jobsdetail.insurance")}
               </span>
             }
-            key='insurance'>
+            key="insurance"
+          >
             <JobsDetailInsurance job={job} form={form} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -176,7 +186,8 @@ export function JobsDetailPage({
                 {t("menus.jobsdetail.repairdata")}
               </span>
             }
-            key='repairdata'>
+            key="repairdata"
+          >
             <JobsLinesContainer jobId={job.id} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -186,7 +197,8 @@ export function JobsDetailPage({
                 {t("menus.jobsdetail.financials")}
               </span>
             }
-            key='financials'>
+            key="financials"
+          >
             <JobsDetailFinancials job={job} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -196,7 +208,8 @@ export function JobsDetailPage({
                 {t("menus.jobsdetail.partssublet")}
               </span>
             }
-            key='partssublet'>
+            key="partssublet"
+          >
             <JobsDetailPliContainer job={job} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -206,7 +219,8 @@ export function JobsDetailPage({
                 {t("menus.jobsdetail.labor")}
               </span>
             }
-            key='labor'>
+            key="labor"
+          >
             <JobsDetailLaborContainer jobId={job.id} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -216,7 +230,8 @@ export function JobsDetailPage({
                 {t("menus.jobsdetail.dates")}
               </span>
             }
-            key='dates'>
+            key="dates"
+          >
             <JobsDetailDatesComponent job={job} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -226,7 +241,8 @@ export function JobsDetailPage({
                 {t("jobs.labels.documents")}
               </span>
             }
-            key='documents'>
+            key="documents"
+          >
             <JobsDocumentsGalleryContainer jobId={job.id} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -236,7 +252,8 @@ export function JobsDetailPage({
                 {t("jobs.labels.notes")}
               </span>
             }
-            key='notes'>
+            key="notes"
+          >
             <JobNotesContainer jobId={job.id} />
           </Tabs.TabPane>
 
@@ -247,7 +264,8 @@ export function JobsDetailPage({
                 {t("jobs.labels.audit")}
               </span>
             }
-            key='audit'>
+            key="audit"
+          >
             <JobsDetailAuditContainer recordId={job.id} />
           </Tabs.TabPane>
         </Tabs>