Added owners detail fields and owner jobs list.

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

@@ -5,9 +5,13 @@ function FormItemEmail(props, ref) {
     <Input
       {...props}
       addonAfter={
-        <a href={`mailto:${props.email}`}>
+        props.email ? (
+          <a href={`mailto:${props.email}`}>
+            <Icon type="mail" />
+          </a>
+        ) : (
           <Icon type="mail" />
-        </a>
+        )
       }
     />
   );

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -0,0 +1,106 @@
+import { Button, Col, Form, Input, Row, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import FormItemEmail from "../form-items-formatted/email-form-item.component";
+import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+import ResetForm from "../form-items-formatted/reset-form-item.component";
+
+export default function OwnerDetailFormComponent({ form, owner }) {
+  const { t } = useTranslation();
+  const {
+    isFieldsTouched,
+    resetFields,
+    getFieldDecorator,
+    getFieldValue
+  } = form;
+
+  return (
+    <div>
+      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
+      <Button type="primary" key="submit" htmlType="submit">
+        {t("general.labels.save")}
+      </Button>
+      <Row>
+        <Col span={8}>
+          <Form.Item label={t("owners.fields.ownr_ln")}>
+            {getFieldDecorator("ownr_ln", {
+              initialValue: owner.ownr_ln
+            })(<Input name="ownr_ln" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_fn")}>
+            {getFieldDecorator("ownr_fn", {
+              initialValue: owner.ownr_fn
+            })(<Input name="ownr_fn" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.allow_text_message")}>
+            {getFieldDecorator("allow_text_message", {
+              initialValue: owner.allow_text_message,
+              valuePropName: "checked"
+            })(<Switch name="allow_text_message" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_addr1")}>
+            {getFieldDecorator("ownr_addr1", {
+              initialValue: owner.ownr_addr1
+            })(<Input name="ownr_addr1" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_addr2")}>
+            {getFieldDecorator("ownr_addr2", {
+              initialValue: owner.ownr_addr2
+            })(<Input name="ownr_addr2" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_city")}>
+            {getFieldDecorator("ownr_city", {
+              initialValue: owner.ownr_city
+            })(<Input name="ownr_city" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_ctry")}>
+            {getFieldDecorator("ownr_ctry", {
+              initialValue: owner.ownr_ctry
+            })(<Input name="ownr_ctry" />)}
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          {" "}
+          <Form.Item label={t("owners.fields.ownr_ea")}>
+            {getFieldDecorator("ownr_ea", {
+              initialValue: owner.ownr_ea,
+              rules: [
+                {
+                  type: "email",
+                  message: "This is not a valid email address."
+                }
+              ]
+            })(
+              <FormItemEmail name="ownr_ea" email={getFieldValue("ownr_ea")} />
+            )}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_ph1")}>
+            {getFieldDecorator("ownr_ph1", {
+              initialValue: owner.ownr_ph1
+            })(<FormItemPhone customInput={Input} name="ownr_ph1" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_st")}>
+            {getFieldDecorator("ownr_st", {
+              initialValue: owner.ownr_st
+            })(<Input name="ownr_st" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_zip")}>
+            {getFieldDecorator("ownr_zip", {
+              initialValue: owner.ownr_zip
+            })(<Input name="ownr_zip" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.preferred_contact")}>
+            {getFieldDecorator("preferred_contact", {
+              initialValue: owner.preferred_contact
+            })(<Input name="preferred_contact" />)}
+          </Form.Item>
+          <Form.Item label={t("owners.fields.ownr_title")}>
+            {getFieldDecorator("ownr_title", {
+              initialValue: owner.ownr_title
+            })(<Input name="ownr_title" />)}
+          </Form.Item>
+        </Col>
+      </Row>
+    </div>
+  );
+}

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -0,0 +1,46 @@
+import { Form, notification } from "antd";
+import React from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { UPDATE_OWNER } from "../../graphql/owners.queries";
+import OwnerDetailFormComponent from "./owner-detail-form.component";
+
+function OwnerDetailFormContainer({ form, owner, refetch }) {
+  const { t } = useTranslation();
+
+  const [updateOwner] = useMutation(UPDATE_OWNER);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("owners.errors.validationtitle"),
+          description: t("owners.errors.validation")
+        });
+      }
+      if (!err) {
+        updateOwner({
+          variables: { ownerId: owner.id, owner: values }
+        }).then(r => {
+          notification["success"]({
+            message: t("owners.successes.save")
+          });
+          //TODO: Better way to reset the field decorators?
+          if (refetch) refetch().then();
+          form.resetFields();
+        });
+      }
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} autoComplete="off">
+      <OwnerDetailFormComponent form={form} owner={owner} />
+    </Form>
+  );
+}
+export default Form.create({ name: "OwnerDetailFormContainer" })(
+  OwnerDetailFormContainer
+);

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { Table } from "antd";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+export default function OwnerDetailJobsComponent({ owner }) {
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      ellipsis: true,
+      render: (text, record) => (
+        <Link to={`/manage/jobs/${record.id}`}>
+          {record.ro_number ? record.ro_number : `EST ${record.est_number}`}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "owner",
+      key: "owner",
+      render: (text, record) => (
+        <Link to={`/manage/vehicles/${record.vehicle.id}`}>
+          {`${record.vehicle.v_model_yr} ${record.vehicle.v_make_desc} ${record.vehicle.v_model_desc}`}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.clm_no"),
+      dataIndex: "clm_no",
+      key: "clm_no"
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status"
+    },
+
+    {
+      title: t("jobs.fields.clm_total"),
+      dataIndex: "clm_total",
+      key: "clm_total",
+      render: (text, record) => (
+        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
+      )
+    }
+  ];
+
+  return (
+    <Table
+      pagination={{ position: "bottom" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={owner.jobs}
+    />
+  );
+}