- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,184 +1,182 @@
-import { Button, Form, Input, PageHeader, Space } from "antd";
+import {Button, Form, Input, Space} from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import React from "react";
-import { useTranslation } from "react-i18next";
+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 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";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import {
-  selectAuthLevel,
-  selectBodyshop,
-} from "../../redux/user/user.selectors";
+import {HasRbacAccess} from "../rbac-wrapper/rbac-wrapper.component";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {selectAuthLevel, selectBodyshop,} from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
-  authLevel: selectAuthLevel,
-  bodyshop: selectBodyshop,
+    authLevel: selectAuthLevel,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(PhonebookFormComponent);
 
 export function PhonebookFormComponent({
-  authLevel,
-  bodyshop,
-  form,
-  formLoading,
-  handleDelete,
-}) {
-  const { t } = useTranslation();
+                                           authLevel,
+                                           bodyshop,
+                                           form,
+                                           formLoading,
+                                           handleDelete,
+                                       }) {
+    const {t} = useTranslation();
 
-  const { getFieldValue } = form;
+    const {getFieldValue} = form;
 
-  const hasNoAccess = !HasRbacAccess({
-    bodyshop,
-    authLevel,
-    action: "phonebook:edit",
-  });
+    const hasNoAccess = !HasRbacAccess({
+        bodyshop,
+        authLevel,
+        action: "phonebook:edit",
+    });
 
-  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}
-              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 (
+        <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}
+                            disabled={hasNoAccess}
+                        >
+                            {t("general.actions.save")}
+                        </Button>
+                        <Button
+                            type="primary"
+                            danger
+                            disabled={hasNoAccess}
+                            onClick={handleDelete}
+                            loading={formLoading}
+                        >
+                            {t("general.actions.delete")}
+                        </Button>
+                    </Space>
                 }
-                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>
-  );
+            />
+            <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>
+    );
 }

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

@@ -1,154 +1,155 @@
-import { useMutation, useQuery } from "@apollo/client";
-import { Form, notification } from "antd";
+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 React, {useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {useLocation, useNavigate} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 import {
-  DELETE_PHONEBOOK,
-  INSERT_NEW_PHONEBOOK,
-  QUERY_PHONEBOOK_BY_ID,
-  UPDATE_PHONEBOOK,
+    DELETE_PHONEBOOK,
+    INSERT_NEW_PHONEBOOK,
+    QUERY_PHONEBOOK_BY_ID,
+    UPDATE_PHONEBOOK,
 } from "../../graphql/phonebook.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+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,
+    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",
-    nextFetchPolicy: "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"],
+function PhonebookFormContainer({refetch, bodyshop}) {
+    const history = useNavigate();
+    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",
+        nextFetchPolicy: "network-only",
+        skip: !!!phonebookentry || phonebookentry === "new",
     });
 
-    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),
-        }),
-      });
-    }
+    const [updatePhonebook] = useMutation(UPDATE_PHONEBOOK);
+    const [insertPhonebook] = useMutation(INSERT_NEW_PHONEBOOK);
+    const [deletePhonebook] = useMutation(DELETE_PHONEBOOK);
 
-    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"),
+    const handleDelete = async () => {
+        setFormLoading(true);
+        const result = await deletePhonebook({
+            variables: {id: phonebookentry},
+            refetchQueries: ["QUERY_PHONEBOOK_PAGINATED"],
         });
 
-        if (refetch) await refetch();
-        form.setFieldsValue(data.phonebook_by_pk);
-        form.resetFields();
+        if (!result.errors) {
+            notification["success"]({
+                message: t("phonebook.successes.deleted"),
+            });
+            delete search.phonebookentry;
+            history({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);
-      } else {
-        notification["error"]({
-          message: t("phonebook.errors.saving", {
-            error: JSON.stringify(result.errors),
-          }),
-        });
+    };
 
-        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"],
-      });
+    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 (!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);
-      }
-    }
-  };
+                if (refetch) await refetch();
+                form.setFieldsValue(data.phonebook_by_pk);
+                form.resetFields();
 
-  useEffect(() => {
-    if (data || phonebookentry === "new") form.resetFields();
-  }, [data, form, phonebookentry]);
+                setFormLoading(false);
+            } else {
+                notification["error"]({
+                    message: t("phonebook.errors.saving", {
+                        error: JSON.stringify(result.errors),
+                    }),
+                });
 
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+                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"],
+            });
 
-  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>
-  );
+            if (!result.errors) {
+                notification["success"]({
+                    message: t("phonebook.successes.saved"),
+                });
+
+                if (refetch) await refetch();
+                form.resetFields();
+                form.resetFields();
+                delete search.phonebookentry;
+                history({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);