BOD-11 BOD-12 BOD-10 WIP Guided manual estimate creation.

client/src/components/jobs-create-owner-info/jobs-create-owner-info.component.jsx

@@ -1,15 +1,27 @@
 import React from "react";
 import { Row, Col, Typography } from "antd";
+import JobsCreateOwnerInfoNewComponent from "./jobs-create-owner-info.new.component";
+import JobsCreateOwnerInfoSearchComponent from "./jobs-create-owner-info.search.component";
+import { useTranslation } from "react-i18next";
+
 export default function JobsCreateOwnerInfoComponent({ loading, owners }) {
+  const { t } = useTranslation();
   return (
     <div>
       <Row>
-        <Typography.Title>XX</Typography.Title>
+        <Typography.Title>{t("jobs.labels.create.ownerinfo")}</Typography.Title>
       </Row>
-      <Row>
-        <Col span={16}></Col>
+      <Row gutter={4}>
+        <Col span={16}>
+          <JobsCreateOwnerInfoSearchComponent
+            loading={loading}
+            owners={owners}
+          />
+        </Col>
 
-        <Col span={8}></Col>
+        <Col span={8}>
+          <JobsCreateOwnerInfoNewComponent />
+        </Col>
       </Row>
     </div>
   );

client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx

@@ -9,14 +9,14 @@ export default function JobsCreateOwnerContainer() {
   const [state] = useContext(JobCreateContext);
   const { loading, error, data } = useQuery(QUERY_SEARCH_OWNER_BY_IDX, {
     variables: { search: `%${state.owner.search}%` },
-    skip: !state.vehicle.search
+    skip: !state.owner.search
   });
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <JobsCreateOwnerInfoComponent
       loading={loading}
-      owners={data ? data.owners : null}
+      owners={data ? data.search_owner : null}
     />
   );
 }

client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx

@@ -0,0 +1,122 @@
+import { Form, Input, Checkbox, Switch } from "antd";
+import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import FormItemEmail from "../form-items-formatted/email-form-item.component";
+import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+
+export default function JobsCreateOwnerInfoNewComponent() {
+  const [state, setState] = useContext(JobCreateContext);
+
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Checkbox
+        defaultChecked={state.owner.new}
+        checked={state.owner.new}
+        onChange={() => {
+          setState({
+            ...state,
+            owner: {
+              ...state.owner,
+              new: !state.owner.new,
+              selectedid: null
+            }
+          });
+        }}
+      >
+        {t("jobs.labels.create.newowner")}
+      </Checkbox>
+
+      <Form.Item
+        label={t("owners.fields.ownr_ln")}
+        name={["owner", "data", "ownr_ln"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_fn")}
+        name={["owner", "data", "ownr_fn"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.allow_text_message")}
+        valuePropName="checked"
+        name={["owner", "data", "allow_text_message"]}
+      >
+        <Switch disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_addr1")}
+        name={["owner", "data", "ownr_addr1"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_addr2")}
+        name={["owner", "data", "ownr_addr2"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_city")}
+        name={["owner", "data", "ownr_city"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_ctry")}
+        name={["owner", "data", "ownr_ctry"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+
+      <Form.Item
+        label={t("owners.fields.ownr_ea")}
+        rules={[
+          {
+            type: "email",
+            message: "This is not a valid email address."
+          }
+        ]}
+        name={["owner", "data", "ownr_ea"]}
+      >
+        <FormItemEmail
+          //TODO Fix this email={getFieldValue("ownr_ea")}
+          disabled={!state.owner.new}
+        />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_ph1")}
+        name={["owner", "data", "ownr_ph1"]}
+      >
+        <FormItemPhone customInput={Input} disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_st")}
+        name={["owner", "data", "ownr_st"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_zip")}
+        name={["owner", "data", "ownr_zip"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.preferred_contact")}
+        name={["owner", "data", "preferred_contact"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("owners.fields.ownr_title")}
+        name={["owner", "data", "ownr_title"]}
+      >
+        <Input disabled={!state.owner.new} />
+      </Form.Item>
+    </div>
+  );
+}

client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx

@@ -1,9 +1,9 @@
+import { Input, Table } from "antd";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Table, Input } from "antd";
-import { Link } from "react-router-dom";
-import { alphaSort } from "../../utils/sorters";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import PhoneFormatter from "../../utils/PhoneFormatter";
+import { alphaSort } from "../../utils/sorters";
 
 export default function JobsCreateOwnerInfoSearchComponent({
   loading,
@@ -19,34 +19,61 @@ export default function JobsCreateOwnerInfoSearchComponent({
 
   const columns = [
     {
-      title: t("vehicles.fields.v_vin"),
-      dataIndex: "v_vin",
-      key: "v_vin",
-      sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
+      title: t("owners.fields.ownr_ln"),
+      dataIndex: "ownr_ln",
+      key: "ownr_ln",
+      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
-        tableState.sortedInfo.columnKey === "v_vin" &&
-        tableState.sortedInfo.order,
+        tableState.sortedInfo.columnKey === "ownr_ln" &&
+        tableState.sortedInfo.order
+    },
+    {
+      title: t("owners.fields.ownr_fn"),
+      dataIndex: "ownr_fn",
+      key: "ownr_fn",
+      sorter: (a, b) => alphaSort(a.ownr_fn, b.ownr_fn),
+      sortOrder:
+        tableState.sortedInfo.columnKey === "ownr_fn" &&
+        tableState.sortedInfo.order
+    },
+    {
+      title: t("owners.fields.ownr_addr1"),
+      dataIndex: "ownr_addr1",
+      key: "ownr_addr1",
+      sorter: (a, b) => alphaSort(a.ownr_addr1, b.ownr_addr1),
+      sortOrder:
+        tableState.sortedInfo.columnKey === "ownr_addr1" &&
+        tableState.sortedInfo.order
+    },
+    {
+      title: t("owners.fields.ownr_city"),
+      dataIndex: "ownr_city",
+      key: "ownr_city",
+      sorter: (a, b) => alphaSort(a.ownr_city, b.ownr_city),
+      sortOrder:
+        tableState.sortedInfo.columnKey === "ownr_city" &&
+        tableState.sortedInfo.order
+    },
+    {
+      title: t("owners.fields.ownr_ea"),
+      dataIndex: "ownr_ea",
+      key: "ownr_ea",
+      sorter: (a, b) => alphaSort(a.ownr_ea, b.ownr_ea),
+      sortOrder:
+        tableState.sortedInfo.columnKey === "ownr_ea" &&
+        tableState.sortedInfo.order
+    },
+    {
+      title: t("owners.fields.ownr_ph1"),
+      dataIndex: "ownr_ph1",
+      key: "ownr_ph1",
       render: (text, record) => (
-        <Link to={"/manage/vehicles/" + record.id}>{record.v_vin}</Link>
-      )
-    },
-    {
-      title: t("vehicles.fields.description"),
-      dataIndex: "description",
-      key: "description",
-      render: (text, record) => {
-        return (
-          <span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>
-        );
-      }
-    },
-    {
-      title: t("vehicles.fields.plate_no"),
-      dataIndex: "plate",
-      key: "plate",
-      render: (text, record) => {
-        return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
-      }
+        <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
+      ),
+      sorter: (a, b) => alphaSort(a.ownr_ph1, b.ownr_ph1),
+      sortOrder:
+        tableState.sortedInfo.columnKey === "ownr_ph1" &&
+        tableState.sortedInfo.order
     }
   ];
 
@@ -61,32 +88,32 @@ export default function JobsCreateOwnerInfoSearchComponent({
       title={() => {
         return (
           <Input.Search
-            placeholder='Search...'
+            placeholder="Search..."
             onSearch={value => {
               setState({
                 ...state,
-                vehicle: { ...state.vehicle, search: value }
+                owner: { ...state.owner, search: value }
               });
             }}
             enterButton
           />
         );
       }}
-      size='small'
+      size="small"
       pagination={{ position: "top" }}
       columns={columns.map(item => ({ ...item }))}
-      rowKey='id'
-      dataSource={vehicles}
+      rowKey="id"
+      dataSource={owners}
       onChange={handleTableChange}
       rowSelection={{
         onSelect: props => {
           setState({
             ...state,
-            vehicle: { ...state.vehicle, new: false, selectedid: props.id }
+            owner: { ...state.owner, new: false, selectedid: props.id }
           });
         },
         type: "radio",
-        selectedRowKeys: [state.vehicle.selectedid]
+        selectedRowKeys: [state.owner.selectedid]
       }}
       onRow={(record, rowIndex) => {
         return {
@@ -95,8 +122,8 @@ export default function JobsCreateOwnerInfoSearchComponent({
               if (record.id) {
                 setState({
                   ...state,
-                  vehicle: {
-                    ...state.vehicle,
+                  owner: {
+                    ...state.owner,
                     new: false,
                     selectedid: record.id
                   }
@@ -107,7 +134,7 @@ export default function JobsCreateOwnerInfoSearchComponent({
             }
             setState({
               ...state,
-              vehicle: { ...state.vehicle, selectedid: null }
+              owner: { ...state.owner, selectedid: null }
             });
           }
         };