IO-868 IO-706 Unique vendor & employee names.

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

@@ -1,4 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
+import { useApolloClient } from "@apollo/client";
 import {
   Button,
   Divider,
@@ -12,6 +13,7 @@ import {
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { CHECK_VENDOR_NAME } from "../../graphql/vendors.queries";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import PhoneFormItem, {
@@ -25,6 +27,7 @@ export default function VendorsFormComponent({
   responsibilityCenters,
 }) {
   const { t } = useTranslation();
+  const client = useApolloClient();
   const { getFieldValue } = form;
   return (
     <div>
@@ -58,8 +61,40 @@ export default function VendorsFormComponent({
         <Form.Item
           label={t("vendors.fields.name")}
           name="name"
+          validateTrigger="onBlur"
+          hasFeedback
           rules={[
-            { required: true, message: t("general.validation.required") },
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+            ({ getFieldValue }) => ({
+              async validator(rule, value) {
+                if (value) {
+                  const response = await client.query({
+                    query: CHECK_VENDOR_NAME,
+                    variables: {
+                      name: value,
+                    },
+                  });
+
+                  if (response.data.vendors_aggregate.aggregate.count === 0) {
+                    return Promise.resolve();
+                  } else if (
+                    response.data.vendors_aggregate.nodes.length === 1 &&
+                    response.data.vendors_aggregate.nodes[0].id ===
+                      form.getFieldValue("id")
+                  ) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(
+                    t("vendors.validation.unique_vendor_name")
+                  );
+                } else {
+                  return Promise.resolve();
+                }
+              },
+            }),
           ]}
         >
           <Input />