Added owners detail fields and owner jobs list.

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