IO-924 Rest of phonebook implementation

client/src/components/phonebook-form/phonebook-form.component.jsx

@@ -0,0 +1,122 @@
+import { Button, Form, Input, PageHeader, Space } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
+import FormItemEmail from "../form-items-formatted/email-form-item.component";
+import PhoneFormItem, {
+  PhoneItemFormatterValidation,
+} from "../form-items-formatted/phone-form-item.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
+export default function PhonebookFormComponent({
+  form,
+  formLoading,
+  handleDelete,
+}) {
+  const { t } = useTranslation();
+
+  const { getFieldValue } = form;
+
+  return (
+    <div>
+      <PageHeader
+        title={`${form.getFieldValue("firstname") || ""} ${
+          form.getFieldValue("lastname") || ""
+        }${
+          form.getFieldValue("company")
+            ? ` - ${form.getFieldValue("company")}`
+            : ""
+        }`}
+        extra={
+          <Space>
+            <Button
+              onClick={() => form.submit()}
+              type="primary"
+              loading={formLoading}
+            >
+              {t("general.actions.save")}
+            </Button>
+            <Button type="danger" onClick={handleDelete} loading={formLoading}>
+              {t("general.actions.delete")}
+            </Button>
+          </Space>
+        }
+      />
+      <FormFieldsChanged form={form} />
+      <LayoutFormRow grow>
+        <Form.Item label={t("phonebook.fields.firstname")} name="firstname">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("phonebook.fields.lastname")} name="lastname">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("phonebook.fields.company")} name="company">
+          <Input />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item label={t("phonebook.fields.street1")} name="street1">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("phonebook.fields.street2")} name="street2">
+          <Input />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item label={t("phonebook.fields.city")} name="city">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("phonebook.fields.state")} name="state">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("phonebook.fields.country")} name="country">
+          <Input />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("phonebook.fields.email")}
+          rules={[
+            {
+              type: "email",
+              message: t("general.validation.invalidemail"),
+            },
+          ]}
+          name="email"
+        >
+          <FormItemEmail email={getFieldValue("email")} />
+        </Form.Item>
+        <Form.Item
+          label={t("phonebook.fields.phone1")}
+          name="phone1"
+          rules={[
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(getFieldValue, "phone1"),
+          ]}
+        >
+          <PhoneFormItem />
+        </Form.Item>
+        <Form.Item
+          label={t("phonebook.fields.phone2")}
+          name="phone2"
+          rules={[
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(getFieldValue, "phone2"),
+          ]}
+        >
+          <PhoneFormItem />
+        </Form.Item>
+        <Form.Item
+          label={t("phonebook.fields.fax")}
+          name="fax"
+          rules={[
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(getFieldValue, "fax"),
+          ]}
+        >
+          <PhoneFormItem />
+        </Form.Item>
+      </LayoutFormRow>
+    </div>
+  );
+}