Jobslines schema. Added phone number formatting.

client/src/components/job-tombstone/job-tombstone.component.jsx

@@ -1,8 +1,30 @@
 import React, { useState } from "react";
 import AlertComponent from "../alert/alert.component";
-import { Form, Input, Row, Col, Button } from "antd";
+import {
+  Form,
+  Input,
+  Row,
+  Col,
+  Button,
+  Typography,
+  PageHeader,
+  Descriptions,
+  Tag
+} from "antd";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useMutation } from "@apollo/react-hooks";
+import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 5 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 12 }
+  }
+};
 
 function JobTombstone({ job, ...otherProps }) {
   const [jobContext, setJobContext] = useState(job);
@@ -22,8 +44,6 @@ function JobTombstone({ job, ...otherProps }) {
 
     otherProps.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-        console.log("Received values of form: ", values);
-
         mutationUpdateJob({
           variables: { jobId: jobContext.id, job: values }
         }).then(r => console.log("result", r));
@@ -32,27 +52,102 @@ function JobTombstone({ job, ...otherProps }) {
   };
 
   const handleChange = event => {
-    const { name, value } = event.target;
+    const { name, value } = event.target ? event.target : event;
     setJobContext({ ...jobContext, [name]: value });
   };
 
   const { getFieldDecorator } = otherProps.form;
   return (
-    <Form onSubmit={handleSubmit}>
-      <Col span={22} offset={1}>
-        <Row>
-          <Form.Item label="RO #">
-            {getFieldDecorator("ro_number", {
-              initialValue: jobContext.ro_number
-            })(<Input name="ro_number" onChange={handleChange} />)}
+    <Form onSubmit={handleSubmit} {...formItemLayout}>
+      <PageHeader
+        style={{
+          border: "1px solid rgb(235, 237, 240)"
+        }}
+        title={"RO " + jobContext.ro_number ?? "0"}
+        subTitle={
+          jobContext.owner
+            ? jobContext.owner?.first_name ??
+              +" " + jobContext.owner?.first_name
+            : "No owner"
+        }
+        tags={<Tag color="blue">{jobContext?.status}</Tag>}
+        extra={[
+          <Form.Item key="1">
+            <Button type="primary" htmlType="submit">
+              Save
+            </Button>
           </Form.Item>
-        </Row>
-        <Form.Item>
-          <Button type="primary" htmlType="submit">
-            Save
-          </Button>
+        ]}
+      >
+        <Descriptions size="small" column={3}>
+          <Descriptions.Item label="Claim Total">
+            $ {jobContext.claim_total?.toFixed(2)}
+          </Descriptions.Item>
+          <Descriptions.Item label="Deductible">
+            $ {jobContext.deductible?.toFixed(2)}
+          </Descriptions.Item>
+        </Descriptions>
+      </PageHeader>
+
+      <Row>
+        <Typography.Title level={4}>Information</Typography.Title>
+        <Form.Item label="RO #">
+          {getFieldDecorator("ro_number", {
+            initialValue: jobContext.ro_number
+          })(<Input name="ro_number" readOnly onChange={handleChange} />)}
         </Form.Item>
-      </Col>
+
+        <Form.Item label="Estimate #">
+          {getFieldDecorator("est_number", {
+            initialValue: jobContext.est_number
+          })(<Input name="est_number" readOnly onChange={handleChange} />)}
+        </Form.Item>
+      </Row>
+
+      <Row>
+        <Typography.Title level={4}>Insurance Information</Typography.Title>
+        <Form.Item label="Insurance Company">
+          {getFieldDecorator("est_co_nm", {
+            initialValue: jobContext.est_co_nm
+          })(<Input name="est_co_nm" onChange={handleChange} />)}
+        </Form.Item>
+        <Col span={8}>
+          <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>
+        </Col>
+        <Col span={8}>
+          <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>
+        </Col>
+      </Row>
     </Form>
   );
 }