From f2b1eee5ad59baa21a92dcb9ccf699c15a5ef81f Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Mon, 19 May 2025 22:28:26 +0530
Subject: [PATCH] created new component for EditContactTag

---
 src/components/master/EditContactTag.jsx | 126 +++++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 src/components/master/EditContactTag.jsx

diff --git a/src/components/master/EditContactTag.jsx b/src/components/master/EditContactTag.jsx
new file mode 100644
index 00000000..e40d7e61
--- /dev/null
+++ b/src/components/master/EditContactTag.jsx
@@ -0,0 +1,126 @@
+import React, { useEffect,useState } from 'react'
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { MasterRespository } from '../../repositories/MastersRepository';
+import { clearApiCacheKey } from '../../slices/apiCacheSlice';
+import { getCachedData,cacheData } from '../../slices/apiDataManager';
+import showToast from '../../services/toastService';
+
+
+const schema = z.object({
+  name: z.string().min(1, { message: "Tag name is required" }),
+  description: z.string().min(1, { message: "Description is required" })
+  .max(255, { message: "Description cannot exceed 255 characters" }),
+});
+
+const EditContactTag= ({data,onClose}) => {
+
+  const[isLoading,setIsLoading] = useState(false)
+     const {
+      register,
+      handleSubmit,
+      formState: { errors },reset
+      
+    } = useForm({
+      resolver: zodResolver(schema),
+      defaultValues: {
+       name: data?.name || "",
+        description:data?.description || "",
+      
+      },
+    });
+    
+  const onSubmit = (formdata) => {
+      setIsLoading(true)
+      const result = {
+        id:data?.id,
+        name: formdata?.name,
+        description: formdata.description,  
+      };
+
+     
+    
+      MasterRespository.updateContactTag(data?.id,result).then((resp)=>{
+        setIsLoading(false) 
+        showToast("Contact Tag Updated successfully.", "success");
+        const cachedData = getCachedData("Contact Tag");
+        if (cachedData) {
+
+          const updatedData = cachedData.map((category) =>
+            category.id === data?.id ? { ...category, ...resp.data } : category
+          );
+          cacheData("Contact Tag", updatedData);
+        }
+
+        onClose()
+      }).catch((error)=>{
+         showToast(error?.response?.data?.message, "error")
+        setIsLoading(false)
+      })
+     
+    };
+    const resetForm = () => {
+      reset({
+        name: "",
+        description: ""
+      });
+      setDescriptionLength(0);
+    }    
+
+    useEffect(()=>{
+        return ()=>resetForm()
+    },[])
+    
+    const [descriptionLength, setDescriptionLength] = useState(0);
+    const maxDescriptionLength = 255;    
+  return (<>
+    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+        <div className="col-12 col-md-12">
+          <label className="form-label">Tag Name</label>
+          <input type="text" 
+           {...register("name")} 
+             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
+          />
+          {errors.name && <p className="text-danger">{errors.name.message}</p>}
+        </div> 
+        <div className="col-12 col-md-12">
+          <label className="form-label" htmlFor="description">Description</label>
+        <textarea
+          rows="3"
+          {...register("description")}
+          className={`form-control ${errors.description ? 'is-invalids' : ''}`}
+          onChange={(e) => {
+            setDescriptionLength(e.target.value.length);
+            register("description").onChange(e);
+          }}
+        ></textarea>
+        <div className="text-end small text-muted">
+          {maxDescriptionLength - descriptionLength} characters left
+        </div>
+          {errors.description && (
+            <p className="text-danger">{errors.description.message}</p>
+          )}
+        </div>
+
+        <div className="col-12 text-center">
+        <button type="submit" className="btn btn-sm btn-primary me-3">           
+         {isLoading? "Please Wait...":"Submit"}       
+        </button>
+        <button
+          type="reset"
+          className="btn btn-sm btn-label-secondary "
+          data-bs-dismiss="modal"
+          aria-label="Close"
+        >
+          Cancel
+        </button>
+      </div>
+     
+    </form>
+ 
+    </>
+  )
+}
+
+export default EditContactTag;
\ No newline at end of file