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

import { Button, Form, Input, PageHeader, Space } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectAuthLevel,
  selectBodyshop,
} from "../../redux/user/user.selectors";
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";
import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
const mapStateToProps = createStructuredSelector({
  authLevel: selectAuthLevel,
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PhonebookFormComponent);

export function PhonebookFormComponent({
  authLevel,
  bodyshop,
  form,
  formLoading,
  handleDelete,
}) {
  const { t } = useTranslation();

  const { getFieldValue } = form;

  const hasNoAccess = !HasRbacAccess({
    bodyshop,
    authLevel,
    action: "phonebook:edit",
  });

  return (
    <div>
      <PageHeader
        title={
          <Form.Item shouldUpdate>
            {() =>
              `${form.getFieldValue("firstname") || ""} ${
                form.getFieldValue("lastname") || ""
              }${
                form.getFieldValue("company")
                  ? ` - ${form.getFieldValue("company")}`
                  : ""
              }`
            }
          </Form.Item>
        }
        extra={
          <Space>
            <Button
              onClick={() => form.submit()}
              type="primary"
              loading={formLoading}
              disabled={hasNoAccess}
            >
              {t("general.actions.save")}
            </Button>
            <Button
              type="danger"
              disabled={hasNoAccess}
              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 disabled={hasNoAccess} />
        </Form.Item>
        <Form.Item label={t("phonebook.fields.lastname")} name="lastname">
          <Input disabled={hasNoAccess} />
        </Form.Item>
        <Form.Item
          label={t("phonebook.fields.company")}
          name="company"
          dependencies={["firstname", "lastname"]}
          rules={[
            ({ getFieldsValue }) => ({
              validator(rule, value) {
                const { firstname, lastname, company } = getFieldsValue([
                  "firstname",
                  "lastname",
                  "company",
                ]);

                if (
                  (firstname && firstname.trim() !== "") ||
                  (lastname && lastname.trim() !== "") ||
                  (company && company.trim() !== "")
                ) {
                  return Promise.resolve();
                }
                return Promise.reject(t("phonebook.labels.onenamerequired"));
              },
            }),
          ]}
        >
          <Input disabled={hasNoAccess} />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow>
        <Form.Item label={t("phonebook.fields.category")} name="category">
          <Input disabled={hasNoAccess} />
        </Form.Item>
        <Form.Item label={t("phonebook.fields.address1")} name="address1">
          <Input disabled={hasNoAccess} />
        </Form.Item>
        <Form.Item label={t("phonebook.fields.address2")} name="address2">
          <Input disabled={hasNoAccess} />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow>
        <Form.Item label={t("phonebook.fields.city")} name="city">
          <Input disabled={hasNoAccess} />
        </Form.Item>
        <Form.Item label={t("phonebook.fields.state")} name="state">
          <Input disabled={hasNoAccess} />
        </Form.Item>
        <Form.Item label={t("phonebook.fields.country")} name="country">
          <Input disabled={hasNoAccess} />
        </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")}
            disabled={hasNoAccess}
          />
        </Form.Item>
        <Form.Item
          label={t("phonebook.fields.phone1")}
          name="phone1"
          rules={[
            ({ getFieldValue }) =>
              PhoneItemFormatterValidation(getFieldValue, "phone1"),
          ]}
        >
          <PhoneFormItem disabled={hasNoAccess} />
        </Form.Item>
        <Form.Item
          label={t("phonebook.fields.phone2")}
          name="phone2"
          rules={[
            ({ getFieldValue }) =>
              PhoneItemFormatterValidation(getFieldValue, "phone2"),
          ]}
        >
          <PhoneFormItem disabled={hasNoAccess} />
        </Form.Item>
        <Form.Item
          label={t("phonebook.fields.fax")}
          name="fax"
          rules={[
            ({ getFieldValue }) =>
              PhoneItemFormatterValidation(getFieldValue, "fax"),
          ]}
        >
          <PhoneFormItem disabled={hasNoAccess} />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}