Updated contract detail screen to have unsaved changes indicator BOD-127

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

@@ -18,6 +18,7 @@ export function ContractDetailPage({
   courtesyCar,
   setCourtesyCarReturnModalContext,
   refetch,
+  form
 }) {
   const { t } = useTranslation();
   return (
@@ -54,7 +55,7 @@ export function ContractDetailPage({
           <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
         </Col>
         <Col span={18} offset={1}>
-          <ContractFormComponent />
+          <ContractFormComponent form={form}/>
         </Col>
       </Row>
     </div>

client/src/pages/contract-detail/contract-detail.page.container.jsx

@@ -17,6 +17,7 @@ import {
 } from "../../redux/application/application.actions";
 import ContractDetailPageComponent from "./contract-detail.page.component";
 import { CreateRecentItem } from "../../utils/create-recent-item";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -67,18 +68,22 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
       );
   }, [t, data, error, loading, setBreadcrumbs, addRecentItem, contractId]);
 
-  const handleFinish = (values) => {
-    updateContract({
+  const handleFinish = async (values) => {
+    const result = await updateContract({
       variables: { cccontract: { ...values }, contractId: contractId },
-    })
-      .then((response) => {
-        notification["success"]({ message: t("contracts.successes.saved") });
-      })
-      .catch((error) =>
-        notification["error"]({
-          message: t("contracts.errors.saving", { error: error }),
-        })
-      );
+    });
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("contracts.errors.saving", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+      return;
+    }
+    notification["success"]({ message: t("contracts.successes.saved") });
+    if (refetch) await refetch();
+    form.resetFields();
+    form.resetFields();
   };
 
   useEffect(() => {
@@ -86,42 +91,41 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
   }, [data, form]);
 
   if (error) return <AlertComponent message={error.message} type="error" />;
+  if (loading) return <LoadingSpinner />;
+
   return (
     <div>
       <CourtesyCarReturnModalContainer />
       <Form
         form={form}
         autoComplete="no"
-        layout='vertical'
+        layout="vertical"
         onFinish={handleFinish}
-        initialValues={
-          data
-            ? {
-                ...data.cccontracts_by_pk,
-                start: data.cccontracts_by_pk.start
-                  ? moment(data.cccontracts_by_pk.start)
-                  : null,
-                scheduledreturn: data.cccontracts_by_pk.scheduledreturn
-                  ? moment(data.cccontracts_by_pk.scheduledreturn)
-                  : null,
-                actualreturn: data.cccontracts_by_pk.actualreturn
-                  ? moment(data.cccontracts_by_pk.actualreturn)
-                  : null,
-                driver_dlexpiry: data.cccontracts_by_pk.driver_dlexpiry
-                  ? moment(data.cccontracts_by_pk.driver_dlexpiry)
-                  : null,
-                driver_dob: data.cccontracts_by_pk.driver_dob
-                  ? moment(data.cccontracts_by_pk.driver_dob)
-                  : null,
-              }
-            : {}
-        }
+        initialValues={{
+          ...data.cccontracts_by_pk,
+          start: data.cccontracts_by_pk.start
+            ? moment(data.cccontracts_by_pk.start)
+            : null,
+          scheduledreturn: data.cccontracts_by_pk.scheduledreturn
+            ? moment(data.cccontracts_by_pk.scheduledreturn)
+            : null,
+          actualreturn: data.cccontracts_by_pk.actualreturn
+            ? moment(data.cccontracts_by_pk.actualreturn)
+            : null,
+          driver_dlexpiry: data.cccontracts_by_pk.driver_dlexpiry
+            ? moment(data.cccontracts_by_pk.driver_dlexpiry)
+            : null,
+          driver_dob: data.cccontracts_by_pk.driver_dob
+            ? moment(data.cccontracts_by_pk.driver_dob)
+            : null,
+        }}
       >
         <ContractDetailPageComponent
           contract={data ? data.cccontracts_by_pk : null}
           job={data ? data.cccontracts_by_pk.job : null}
           courtesyCar={data ? data.cccontracts_by_pk.courtesycar : null}
           refetch={refetch}
+          form={form}
         />
       </Form>
     </div>