Refactored some of the job detail form to use context. Created claims component.

bodyshop_translations.babel

@@ -188,6 +188,32 @@
                     <folder_node>
                         <name>general</name>
                         <children>
+                            <folder_node>
+                                <name>actions</name>
+                                <children>
+                                    <concept_node>
+                                        <name>reset</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>labels</name>
                                 <children>
@@ -387,6 +413,32 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>messages</name>
+                                <children>
+                                    <concept_node>
+                                        <name>unsavedchanges</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                         </children>
                     </folder_node>
                     <folder_node>

client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx

@@ -0,0 +1,44 @@
+import React, { useContext } from "react";
+import { Form, Input } from "antd";
+import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
+
+export default function JobsDetailClaims({ job }) {
+  const form = useContext(JobDetailFormContext);
+  const { getFieldDecorator, isFieldTouched } = form;
+
+  return (
+    <div>
+      <div>
+        <Form.Item label='Estimator Last Name'>
+          {isFieldTouched("est_ct_ln") ? "Yes" : "No"}
+          {getFieldDecorator("est_ct_ln", {
+            initialValue: job.est_ct_ln
+          })(<Input name='est_ct_ln' />)}
+        </Form.Item>
+        <Form.Item label='Estimator First Name'>
+          {getFieldDecorator("est_ct_fn", {
+            initialValue: job.est_ct_fn
+          })(<Input name='est_ct_fn' />)}
+        </Form.Item>
+        <Form.Item label='Estimator Phone #'>
+          {getFieldDecorator("est_ph1", {
+            initialValue: job.est_ph1
+          })(<FormItemPhone customInput={Input} name='est_ph1' />)}
+        </Form.Item>
+        <Form.Item label='Estimator Email'>
+          {getFieldDecorator("est_ea", {
+            initialValue: job.est_ea,
+
+            rules: [
+              {
+                type: "email",
+                message: "This is not a valid email address."
+              }
+            ]
+          })(<Input name='est_ea' />)}
+        </Form.Item>
+      </div>
+    </div>
+  );
+}

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -1,14 +1,4 @@
-import {
+import { Avatar, Button, Checkbox, Descriptions, notification, PageHeader, Tag } from "antd";
-  Avatar,
-  Button,
-  Descriptions,
-  notification,
-  PageHeader,
-  Tag,
-  Input,
-  Form,
-  Checkbox
-} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
@@ -95,7 +85,7 @@ export default function JobsDetailHeader({
         </Descriptions.Item>
 
         <Descriptions.Item label={t("jobs.fields.customerowing")}>
-          $NO BINDING YET
+          ##NO BINDING YET##
         </Descriptions.Item>
 
         <Descriptions.Item label={t("jobs.fields.specialcoveragepolicy")}>

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

@@ -1,24 +1,31 @@
-import { Form, Icon, Tabs } from "antd";
+import { Form, Icon, Tabs, Alert, Button } from "antd";
-import React from "react";
+import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
-import { FaRegStickyNote } from "react-icons/fa";
+import {
+  FaInfo,
+  FaRegStickyNote,
+  FaShieldAlt,
+  FaHardHat
+} from "react-icons/fa";
 import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
+import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
 import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
 import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
 import JobsRatesContainer from "../../components/jobs-rates/jobs-rates.container";
+import JobDetailFormContext from "./jobs-detail.page.context";
 
 export default function JobsDetailPage({
   job,
   mutationUpdateJob,
   mutationConvertJob,
   handleSubmit,
-  handleChange,
-  getFieldDecorator,
   refetch
 }) {
   const { t } = useTranslation();
 
+  const { isFieldsTouched, resetFields } = useContext(JobDetailFormContext);
+
   const formItemLayout = {
     labelCol: {
       xs: { span: 12 },
@@ -30,69 +37,44 @@ export default function JobsDetailPage({
     }
   };
 
-  // const TEMP = (
-  //   <div>
-  //     {" "}
-  //     <Form.Item label='Estimator Last Name'>
-  //       {getFieldDecorator("est_ct_ln", {
-  //         initialValue: jobContext.est_ct_ln
-  //       })(<Input name='est_ct_ln' onChange={handleChange} />)}
-  //     </Form.Item>
-  //     <Form.Item label='Estimator First Name'>
-  //       {getFieldDecorator("est_ct_fn", {
-  //         initialValue: jobContext.est_ct_fn
-  //       })(<Input name='est_ct_fn' onChange={handleChange} />)}
-  //     </Form.Item>
-  //     <Form.Item label='Estimator Phone #'>
-  //       {getFieldDecorator("est_ph1", {
-  //         initialValue: jobContext.est_ph1
-  //       })(
-  //         <FormItemPhone
-  //           customInput={Input}
-  //           name='est_ph1'
-  //           onValueChange={handleChange}
-  //         />
-  //       )}
-  //     </Form.Item>
-  //     <Form.Item label='Estimator Email'>
-  //       {getFieldDecorator("est_ea", {
-  //         initialValue: jobContext.est_ea,
-  //         rules: [
-  //           {
-  //             type: "email",
-  //             message: "This is not a valid email address."
-  //           }
-  //         ]
-  //       })(<Input name='est_ea' onChange={handleChange} />)}
-  //     </Form.Item>
-  //   </div>
-  // );
-
   return (
     <Form onSubmit={handleSubmit} {...formItemLayout}>
       <JobsDetailHeader
         job={job}
         mutationConvertJob={mutationConvertJob}
         refetch={refetch}
-        getFieldDecorator={getFieldDecorator}
       />
 
+      {isFieldsTouched() ? (
+        <Alert
+          message={
+            <div>
+              {t("general.messages.unsavedchanges")}
+              <Button onClick={() => resetFields()}>
+                {t("general.actions.reset")}
+              </Button>
+            </div>
+          }
+          closable
+        />
+      ) : null}
+
       <Tabs defaultActiveKey='claimdetail'>
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon component={FaInfo} />
               {t("menus.jobsdetail.claimdetail")}
             </span>
           }
           key='claimdetail'>
-          Claim detail
+          <JobsDetailClaims job={job} />
         </Tabs.TabPane>
 
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon component={FaShieldAlt} />
               {t("menus.jobsdetail.insurance")}
             </span>
           }
@@ -125,7 +107,7 @@ export default function JobsDetailPage({
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon type='tool' />
               {t("menus.jobsdetail.partssublet")}
             </span>
           }
@@ -136,7 +118,7 @@ export default function JobsDetailPage({
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon component={FaHardHat} />
               {t("menus.jobsdetail.labor")}
             </span>
           }
@@ -147,7 +129,7 @@ export default function JobsDetailPage({
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon type='calendar' />
               {t("menus.jobsdetail.dates")}
             </span>
           }

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

@@ -5,11 +5,12 @@ import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import {
+  CONVERT_JOB_TO_RO,
   GET_JOB_BY_PK,
-  UPDATE_JOB,
+  UPDATE_JOB
-  CONVERT_JOB_TO_RO
 } from "../../graphql/jobs.queries";
 import JobsDetailPage from "./jobs-detail.page.component";
+import JobDetailFormContext from "./jobs-detail.page.context";
 
 function JobsDetailPageContainer({ match, form }) {
   const { jobId } = match.params;
@@ -44,32 +45,30 @@ function JobsDetailPageContainer({ match, form }) {
       if (!err) {
         mutationUpdateJob({
           variables: { jobId: data.jobs_by_pk.id, job: values }
-        }).then(r =>
+        }).then(r => {
           notification["success"]({
             message: t("jobs.successes.savetitle")
-          })
+          });
-        );
+          //TODO: Better way to reset the field decorators?
+          refetch().then(r => form.resetFields());
+        });
       }
     });
   };
 
-  const handleChange = event => {
-    //const { name, value } = event.target ? event.target : event;
-    //setJobContext({ ...jobContext, [name]: value });
-  };
-
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type='error' />;
   return data.jobs_by_pk ? (
-    <JobsDetailPage
+    <JobDetailFormContext.Provider value={form}>
-      job={data.jobs_by_pk}
+      <JobsDetailPage
-      mutationUpdateJob={mutationUpdateJob}
+        job={data.jobs_by_pk}
-      mutationConvertJob={mutationConvertJob}
+        mutationUpdateJob={mutationUpdateJob}
-      handleSubmit={handleSubmit}
+        mutationConvertJob={mutationConvertJob}
-      handleChange={handleChange}
+        handleSubmit={handleSubmit}
-      getFieldDecorator={form.getFieldDecorator}
+        getFieldDecorator={form.getFieldDecorator}
-      refetch={refetch}
+        refetch={refetch}
-    />
+      />
+    </JobDetailFormContext.Provider>
   ) : (
     <AlertComponent message={t("jobs.errors.noaccess")} type='error' />
   );

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

@@ -0,0 +1,3 @@
+import React from "react";
+const JobDetailFormContext = React.createContext(null);
+export default JobDetailFormContext;

client/src/translations/en_us/common.json

@@ -16,6 +16,9 @@
 			}
 		},
 		"general": {
+			"actions": {
+				"reset": "Reset to original."
+			},
 			"labels": {
 				"in": "In",
 				"loading": "Loading...",
@@ -28,6 +31,9 @@
 				"english": "English",
 				"french": "French",
 				"spanish": "Spanish"
+			},
+			"messages": {
+				"unsavedchanges": "You have unsaved changes."
 			}
 		},
 		"jobs": {

client/src/translations/es/common.json

@@ -16,6 +16,9 @@
 			}
 		},
 		"general": {
+			"actions": {
+				"reset": "Restablecer a original."
+			},
 			"labels": {
 				"in": "en",
 				"loading": "Cargando...",
@@ -28,6 +31,9 @@
 				"english": "Inglés",
 				"french": "francés",
 				"spanish": "español"
+			},
+			"messages": {
+				"unsavedchanges": "Usted tiene cambios no guardados."
 			}
 		},
 		"jobs": {

client/src/translations/fr/common.json

@@ -16,6 +16,9 @@
 			}
 		},
 		"general": {
+			"actions": {
+				"reset": "Rétablir l'original."
+			},
 			"labels": {
 				"in": "dans",
 				"loading": "Chargement...",
@@ -28,6 +31,9 @@
 				"english": "Anglais",
 				"french": "Francais",
 				"spanish": "Espanol"
+			},
+			"messages": {
+				"unsavedchanges": "Vous avez des changements non enregistrés."
 			}
 		},
 		"jobs": {