Jobslines schema. Added phone number formatting.

client/src/components/form-items-formatted/phone-form-item.component.jsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from "react";
+import NumberFormat from "react-number-format";
+function FormItemPhone(props, ref) {
+  return (
+    <NumberFormat
+      {...props}
+      
+      type="tel"
+      format="###-###-####"
+    />
+  );
+}
+
+export default forwardRef(FormItemPhone);

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

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { Table } from "antd";
+import { alphaSort } from "../../utils/sorters";
+
+export default function JobLinesComponent({ loading, joblines }) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" }
+  });
+
+  const columns = [
+    {
+      title: "Line #",
+      dataIndex: "line_ind",
+      key: "line_ind",
+      // onFilter: (value, record) => record.ro_number.includes(value),
+      // filteredValue: state.filteredInfo.text || null,
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder:
+        state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
+      ellipsis: true
+    },
+    {
+      title: "Description",
+      dataIndex: "line_desc",
+      key: "line_desc",
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder:
+        state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
+      ellipsis: true
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const handleChange = event => {
+    const { value } = event.target;
+    setState({ ...state, filterinfo: { text: [value] } });
+  };
+console.log('joblines', joblines)
+  return (
+    <Table
+      loading={loading}
+      pagination={{ position: "bottom" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={joblines}
+      onChange={handleTableChange}
+    />
+  );
+}

client/src/components/job-lines/job-lines.container.component.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import JobLinesComponent from "./job-lines.component";
+import { useQuery } from "@apollo/react-hooks";
+import AlertComponent from "../../components/alert/alert.component";
+
+import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
+
+export default function JobLinesContainer({ match }) {
+  const { jobId } = match.params;
+
+  const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only"
+  });
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <JobLinesComponent loading={loading} joblines={data ? data.joblines : null} />
+  );
+}

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>
   );
 }

client/src/components/jobs-list/jobs-list.component.jsx

@@ -6,7 +6,7 @@ import { alphaSort } from "../../utils/sorters";
 export default function JobsPage({ loading, jobs }) {
   const [state, setState] = useState({
     sortedInfo: {},
-    filteredInfo: null
+    filteredInfo: { text: "" }
   });
 
   const columns = [
@@ -14,8 +14,8 @@ export default function JobsPage({ loading, jobs }) {
       title: "RO #",
       dataIndex: "ro_number",
       key: "ro_number",
-      onFilter: (value, record) => record.ro_number.includes(value),
-      filteredValue: state.filteredInfo.text || null,
+      // onFilter: (value, record) => record.ro_number.includes(value),
+      // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
@@ -88,7 +88,7 @@ export default function JobsPage({ loading, jobs }) {
   };
 
   const handleChange = event => {
-    const { name, value } = event.target;
+    const { value } = event.target;
     setState({ ...state, filterinfo: { text: [value] } });
   };