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

client/src/components/contract-form/contract-form.component.jsx

@@ -2,6 +2,7 @@ import { DatePicker, Form, Input, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
+import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import InputPhone from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
@@ -9,6 +10,9 @@ export default function ContractFormComponent({ form }) {
   const { t } = useTranslation();
   return (
     <div>
+      <div className="imex-flex-row__grow imex-flex-row__margin-large">
+        <FormFieldsChanged form={form} />
+      </div>
       <LayoutFormRow>
         <Form.Item
           label={t("contracts.fields.status")}

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

@@ -10,7 +10,6 @@ export default function FormsFieldChanged({ form }) {
   const handleReset = () => {
     form.resetFields();
   };
-  console.log("form.isFieldsTouched(true)", form.isFieldsTouched([], true));
   const loc = useLocation();
 
   return (
@@ -31,7 +30,7 @@ export default function FormsFieldChanged({ form }) {
                 type="warning"
                 message={
                   <div>
-                    <span>{t("general.messages.unsavedchanges")}</span>
+                    <span>{t("general.messages.unsavedchanges")} </span>
                     <span
                       onClick={handleReset}
                       style={{

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) => {
+  const handleFinish = async (values) => {
-    updateContract({
+    const result = await updateContract({
       variables: { cccontract: { ...values }, contractId: contractId },
-    })
+    });
-      .then((response) => {
+    if (!!result.errors) {
-        notification["success"]({ message: t("contracts.successes.saved") });
-      })
-      .catch((error) =>
       notification["error"]({
-          message: t("contracts.errors.saving", { error: 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,17 +91,17 @@ 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={
+        initialValues={{
-          data
-            ? {
           ...data.cccontracts_by_pk,
           start: data.cccontracts_by_pk.start
             ? moment(data.cccontracts_by_pk.start)
@@ -113,15 +118,14 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
           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>

client/src/translations/en_us/common.json

@@ -370,7 +370,7 @@
 				"edit": "Edit",
 				"login": "Login",
 				"refresh": "Refresh",
-				"reset": " Reset your changes.",
+				"reset": "Reset your changes.",
 				"save": "Save",
 				"saveandnew": "Save and New",
 				"submit": "Submit",