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

import { Button, Form, Input, Space } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
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="primary" 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>
  );
}