IO-924 Rest of phonebook implementation

client/src/components/header/header.component.jsx

@@ -276,6 +276,9 @@ function Header({
               {t("menus.header.temporarydocs")}
             </Link>
           </Menu.Item>
+          <Menu.Item key="phonebook">
+            <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
+          </Menu.Item>
           {
             // <Menu.Item key="shop-templates">
             //   <Link to="/manage/shop/templates">

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

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

@@ -0,0 +1,151 @@
+import { useMutation, useQuery } from "@apollo/client";
+import { Form, notification } from "antd";
+import queryString from "query-string";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import {
+  DELETE_PHONEBOOK,
+  INSERT_NEW_PHONEBOOK,
+  QUERY_PHONEBOOK_BY_ID,
+  UPDATE_PHONEBOOK,
+} from "../../graphql/phonebook.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import PhonebookFormComponent from "./phonebook-form.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+function PhonebookFormContainer({ refetch, bodyshop }) {
+  const history = useHistory();
+  const search = queryString.parse(useLocation().search);
+  const { phonebookentry } = search;
+  const [formLoading, setFormLoading] = useState(false);
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+  const { loading, error, data } = useQuery(QUERY_PHONEBOOK_BY_ID, {
+    variables: { id: phonebookentry },
+    fetchPolicy: "network-only",
+    skip: !!!phonebookentry || phonebookentry === "new",
+  });
+
+  const [updatePhonebook] = useMutation(UPDATE_PHONEBOOK);
+  const [insertPhonebook] = useMutation(INSERT_NEW_PHONEBOOK);
+  const [deletePhonebook] = useMutation(DELETE_PHONEBOOK);
+
+  const handleDelete = async () => {
+    setFormLoading(true);
+    const result = await deletePhonebook({
+      variables: { id: phonebookentry },
+      refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"],
+    });
+
+    if (!result.errors) {
+      notification["success"]({
+        message: t("phonebook.successes.deleted"),
+      });
+      delete search.phonebookentry;
+      history.push({ search: queryString.stringify(search) });
+      if (refetch)
+        refetch().then((r) => {
+          form.resetFields();
+        });
+    } else {
+      notification["error"]({
+        message: t("phonebook.errors.deleting", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    }
+
+    setFormLoading(false);
+  };
+
+  const handleFinish = async (values) => {
+    setFormLoading(true);
+    if (phonebookentry && phonebookentry !== "new") {
+      //It's a phonebook to update.
+      const result = await updatePhonebook({
+        variables: { id: phonebookentry, phonebook: values },
+        refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"],
+      });
+
+      if (!result.errors) {
+        notification["success"]({
+          message: t("Phonebook.successes.saved"),
+        });
+
+        if (refetch) await refetch();
+        form.setFieldsValue(data.phonebook_by_pk);
+        form.resetFields();
+
+        setFormLoading(false);
+      } else {
+        notification["error"]({
+          message: t("Phonebook.errors.saving"),
+        });
+
+        setFormLoading(false);
+      }
+    } else {
+      //It's a new phonebook to insert.
+      const result = await insertPhonebook({
+        variables: {
+          phonebook_entry: [{ ...values, bodyshopid: bodyshop.id }],
+        },
+        refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"],
+      });
+
+      if (!result.errors) {
+        notification["success"]({
+          message: t("phonebook.successes.saved"),
+        });
+
+        if (refetch) await refetch();
+        form.resetFields();
+        form.resetFields();
+        delete search.phonebookentry;
+        history.push({ search: queryString.stringify(search) });
+        setFormLoading(false);
+      } else {
+        notification["error"]({
+          message: t("phonebook.errors.saving"),
+        });
+        setFormLoading(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (data || phonebookentry === "new") form.resetFields();
+  }, [data, form, phonebookentry]);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <Form
+      onFinish={handleFinish}
+      form={form}
+      layout="vertical"
+      autoComplete="new-password"
+      initialValues={data ? data.phonebook_by_pk : null}
+    >
+      {phonebookentry ? (
+        <PhonebookFormComponent
+          form={form}
+          formLoading={formLoading}
+          handleDelete={handleDelete}
+        />
+      ) : (
+        t("phonebook.labels.noneselected")
+      )}
+    </Form>
+  );
+}
+export default connect(mapStateToProps, null)(PhonebookFormContainer);

client/src/components/rbac-wrapper/rbac-defaults.js

@@ -39,6 +39,9 @@ const ret = {
   "payments:enter": 3,
   "payments:list": 3,
 
+  "phonebook:view": 1,
+  "phonebook:edit": 2,
+
   "production:board": 1,
   "production:list": 1,
 

client/src/components/shop-info/shop-info.rbac.component.jsx

@@ -561,6 +561,30 @@ export default function ShopInfoRbacComponent({ form }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.phonebook.view")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "phonebook:view"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.phonebook.edit")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "phonebook:edit"]}
+        >
+          <InputNumber />
+        </Form.Item>
       </LayoutFormRow>
     </RbacWrapper>
   );