aded validation for tags and rename label to bucket

src/components/Directory/ManageDirectory.jsx

@@ -17,16 +17,14 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import { useBuckets, useOrganization } from "../../hooks/useDirectory";
 import { useProjects } from "../../hooks/useProjects";
 import SelectMultiple from "../common/SelectMultiple";
-import {ContactSchema} from "./DirectorySchema";
+import { ContactSchema } from "./DirectorySchema";
 import InputSuggestions from "../common/InputSuggestion";
 
-
-
 const ManageDirectory = ({ submitContact, onCLosed }) => {
   const selectedMaster = useSelector(
     (store) => store.localVariables.selectedMaster
   );
-  const [ categoryData, setCategoryData ] = useState( [] );
+  const [categoryData, setCategoryData] = useState([]);
 
   const [TagsData, setTagsData] = useState([]);
   const { data, loading } = useMaster();
@@ -34,7 +32,7 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
   const { projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
-  const {organizationList,loading:orgLoading} = useOrganization()
+  const { organizationList, loading: orgLoading } = useOrganization();
   const { contactTags, loading: Tagloading } = useContactTags();
   const [IsSubmitting, setSubmitting] = useState(false);
   const dispatch = useDispatch();
@@ -79,15 +77,14 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
     remove: removePhone,
   } = useFieldArray({ control, name: "contactPhones" });
 
-useEffect(() => {
+  useEffect(() => {
-  if (emailFields.length === 0) {
+    if (emailFields.length === 0) {
-    appendEmail({ label: "Work", emailAddress: "" }); 
+      appendEmail({ label: "Work", emailAddress: "" });
-  }
+    }
-  if (phoneFields.length === 0) {
+    if (phoneFields.length === 0) {
-    appendPhone({ label: "Office", phoneNumber: "" });
+      appendPhone({ label: "Office", phoneNumber: "" });
-  }
+    }
-}, [emailFields.length, phoneFields.length]);
+  }, [emailFields.length, phoneFields.length]);
-
 
   const handleAddEmail = async () => {
     const emails = getValues("contactEmails");
@@ -124,22 +121,21 @@ useEffect(() => {
     setValue("bucketIds", updated, { shouldValidate: true });
   };
 
-  const onSubmit = ( data ) =>
+  const onSubmit = (data) => {
-  {
+    const cleaned = {
-      const cleaned = {
+      ...data,
-    ...data,
+      contactEmails: (data.contactEmails || []).filter(
-    contactEmails: (data.contactEmails || []).filter(
+        (e) => e.emailAddress?.trim() !== ""
-      (e) => e.emailAddress?.trim() !== ""
+      ),
-    ),
+      contactPhones: (data.contactPhones || []).filter(
-    contactPhones: (data.contactPhones || []).filter(
+        (p) => p.phoneNumber?.trim() !== ""
-      (p) => p.phoneNumber?.trim() !== ""
+      ),
-    ),
+    };
-  };
 
     setSubmitting(true);
     submitContact(cleaned, reset, setSubmitting);
   };
-  const orgValue = watch("organization")
+  const orgValue = watch("organization");
 
   const handleClosed = () => {
     onCLosed();
@@ -165,16 +161,11 @@ useEffect(() => {
           <div className="col-md-6  text-start">
             <label className="form-label">Organization</label>
             <InputSuggestions
-          organizationList={organizationList}
+              organizationList={organizationList}
-          value={getValues("organization") || ""}
+              value={getValues("organization") || ""}
-          onChange={(val) => setValue("organization", val)}
+              onChange={(val) => setValue("organization", val)}
-          error={errors.organization?.message}
+              error={errors.organization?.message}
-        />
+            />
-            {errors.organization && (
-              <small className="danger-text">
-                {errors.organization.message}
-              </small>
-            )}
           </div>
         </div>
         <div className="row mt-1">
@@ -216,7 +207,10 @@ useEffect(() => {
                       //   onClick={handleAddEmail}
                       //   style={{ width: "24px", height: "24px" }}
                       // >
-                        <i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary" onClick={handleAddEmail} />
+                      <i
+                        className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={handleAddEmail}
+                      />
                     ) : (
                       // <button
                       //   type="button"
@@ -224,8 +218,10 @@ useEffect(() => {
                       //   onClick={() => removeEmail(index)}
                       //   style={{ width: "24px", height: "24px" }}
                       // >
-                        <i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"  onClick={() => removeEmail(index)} />
+                      <i
-               
+                        className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={() => removeEmail(index)}
+                      />
                     )}
                   </div>
                   {errors.contactEmails?.[index]?.emailAddress && (
@@ -275,8 +271,10 @@ useEffect(() => {
                       //   onClick={handleAddPhone}
                       //   style={{ width: "24px", height: "24px" }}
                       // >
-                        <i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary" onClick={handleAddPhone} />
+                      <i
-                  
+                        className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={handleAddPhone}
+                      />
                     ) : (
                       // <button
                       //   type="button"
@@ -284,8 +282,10 @@ useEffect(() => {
                       //   onClick={() => removePhone(index)}
                       //   style={{ width: "24px", height: "24px" }}
                       // >
-                        <i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager" onClick={() => removePhone(index)} />
+                      <i
-                
+                        className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager"
+                        onClick={() => removePhone(index)}
+                      />
                     )}
                   </div>
                   {errors.contactPhones?.[index]?.phoneNumber && (
@@ -297,9 +297,9 @@ useEffect(() => {
               </div>
             ))}
           </div>
-            {errors.contactPhone?.message && (
+          {errors.contactPhone?.message && (
-        <div className="danger-text">{errors.contactPhone.message}</div>
+            <div className="danger-text">{errors.contactPhone.message}</div>
-      )}
+          )}
         </div>
 
         <div className="row my-1">
@@ -315,7 +315,7 @@ useEffect(() => {
                 </option>
               ) : (
                 <>
-                  <option disabled  value="">
+                  <option disabled value="">
                     Select Category
                   </option>
                   {contactCategory?.map((cate) => (
@@ -341,29 +341,23 @@ useEffect(() => {
               valueKey="id"
               IsLoading={projectLoading}
             />
-               {errors.projectIds && (
+            {errors.projectIds && (
-              <small className="danger-text">
+              <small className="danger-text">{errors.projectIds.message}</small>
-                {errors.projectIds.message}
-              </small>
             )}
           </div>
         </div>
 
         <div className="col-12 text-start">
           <TagInput name="tags" label="Tags" options={contactTags} />
-            {errors.tags && (
+          {errors.tags && (
-              <small className="danger-text">
+            <small className="danger-text">{errors.tags.message}</small>
-                {errors.tags.message}
+          )}
-              </small>
-            )}
         </div>
         <div className="row">
           <div className="col-md-12 mt-1 text-start">
-            <label className="form-label ">Select Label</label>
+            <label className="form-label ">Select Bucket</label>
 
-            <ul
+            <ul className="d-flex flex-wrap px-1 list-unstyled  mb-0">
-              className="d-flex flex-wrap px-1 list-unstyled  mb-0"
-            >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
                 <li
@@ -387,11 +381,12 @@ useEffect(() => {
                   </div>
                 </li>
               ))}
+              {errors.bucketIds && (
+                <small className="danger-text mt-0">
+                  {errors.bucketIds.message}
+                </small>
+              )}
             </ul>
-
-            {errors.BucketIds && (
-              <small className="text-danger">{errors.BucketIds.message}</small>
-            )}
           </div>
         </div>