Fixed vendor form issues IO-444

client/src/components/form-items-formatted/phone-form-item.component.jsx

@@ -2,12 +2,11 @@ import i18n from "i18next";
 import phone from "phone";
 import React, { forwardRef } from "react";
 import PhoneInput from "react-phone-input-2";
-import "./phone-form-item.styles.scss";
 import "react-phone-input-2/lib/high-res.css";
+import "./phone-form-item.styles.scss";
 function FormItemPhone(props, ref) {
   return (
     <PhoneInput
-      country={"ca"}
       onlyCountries={["ca", "us"]}
       ref={ref}
       className="ant-input"
@@ -30,10 +29,9 @@ export default forwardRef(FormItemPhone);
 
 export const PhoneItemFormatterValidation = (getFieldValue, name) => ({
   async validator(rule, value) {
-    console.log("getFieldValue(name)", getFieldValue(name));
-
-    const p = phone(getFieldValue(name), "ca");
-    if (p.length > 0) {
+    const p = phone(getFieldValue(name), "us");
+    const p2 = phone(getFieldValue(name), "ca");
+    if (p.length > 0 || p2.length > 0) {
       return Promise.resolve();
     } else {
       return Promise.reject(i18n.t("general.validation.invalidphone"));

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

@@ -6,14 +6,14 @@ import {
   InputNumber,
   Select,
   Space,
-  Typography
+  Typography,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import PhoneFormItem, {
-  PhoneItemFormatterValidation
+  PhoneItemFormatterValidation,
 } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
@@ -23,6 +23,7 @@ export default function VendorsFormComponent({
   handleDelete,
   responsibilityCenters,
 }) {
+  console.log("🚀 ~ file: vendors-form.component.jsx ~ line 26 ~ formLoading", formLoading)
   const { t } = useTranslation();
   const { getFieldValue } = form;
   return (
@@ -40,7 +41,13 @@ export default function VendorsFormComponent({
         </Button>
       </Space>
       <LayoutFormRow grow>
-        <Form.Item label={t("vendors.fields.name")} name="name">
+        <Form.Item
+          label={t("vendors.fields.name")}
+          name="name"
+          rules={[
+            { required: true, message: t("general.validation.required") },
+          ]}
+        >
           <Input />
         </Form.Item>
         <Form.Item
@@ -59,6 +66,7 @@ export default function VendorsFormComponent({
           label={t("vendors.fields.phone")}
           name="phone"
           rules={[
+            { required: true, message: t("general.validation.required") },
             ({ getFieldValue }) =>
               PhoneItemFormatterValidation(getFieldValue, "phone"),
           ]}

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

@@ -38,20 +38,24 @@ function VendorsFormContainer({ refetch, bodyshop }) {
   const [deleteVendor] = useMutation(DELETE_VENDOR);
   const handleDelete = () => {
     setFormLoading(true);
-    deleteVendor({ variables: { id: selectedvendor } })
+    deleteVendor({
+      variables: { id: selectedvendor },
+      refetchQueries: ["QUERY_ALL_VENDORS"],
+    })
       .then((r) => {
         notification["success"]({
           message: t("vendors.successes.deleted"),
         });
         //TODO Better way to reset the field decorators?
         if (refetch) refetch().then((r) => form.resetFields());
+        setFormLoading(false);
       })
       .catch((error) => {
         notification["error"]({
           message: t("vendors.errors.deleting"),
         });
+        setFormLoading(false);
       });
-    setFormLoading(false);
   };
 
   const handleFinish = (values) => {
@@ -60,6 +64,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
       //It's a vendor to update.
       updateVendor({
         variables: { id: selectedvendor, vendor: values },
+        refetchQueries: ["QUERY_ALL_VENDORS"],
       })
         .then((r) => {
           notification["success"]({
@@ -67,17 +72,20 @@ function VendorsFormContainer({ refetch, bodyshop }) {
           });
           //TODO Better way to reset the field decorators?
           if (refetch) refetch().form.resetFields();
+          setFormLoading(false);
         })
         .catch((error) => {
           notification["error"]({
             message: t("vendors.errors.saving"),
           });
           console.log("error", error);
+          setFormLoading(false);
         });
     } else {
       //It's a new vendor to insert.
       insertvendor({
         variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] },
+        refetchQueries: ["QUERY_ALL_VENDORS"],
       })
         .then((r) => {
           notification["success"]({
@@ -86,14 +94,15 @@ function VendorsFormContainer({ refetch, bodyshop }) {
           //TODO Better way to reset the field decorators?
           if (refetch) refetch();
           form.resetFields();
+          setFormLoading(false);
         })
         .catch((error) => {
           notification["error"]({
             message: t("vendors.errors.saving"),
           });
+          setFormLoading(false);
         });
     }
-    setFormLoading(false);
   };
 
   useEffect(() => {