Merge pull request 'pramod_Task#224 : Created New Master - Contact Category' (#108) from pramod_Task#224 into Feature_Directory

Reviewed-on: #108

src/components/master/CreateContactCategory.jsx

@@ -0,0 +1,113 @@
+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: "Category name is required" }),
+  description: z.string().min(1, { message: "Description is required" })
+  .max(255, { message: "Description cannot exceed 255 characters" }),
+});
+
+const CreateContactCategory = ({onClose}) => {
+
+  const[isLoading,setIsLoading] = useState(false)
+     const {
+      register,
+      handleSubmit,
+      formState: { errors },reset
+      
+    } = useForm({
+      resolver: zodResolver(schema),
+      defaultValues: {
+        name: "",
+        description: "",
+      
+      },
+    });
+    
+    const onSubmit = (data) => {
+      setIsLoading(true)    
+      MasterRespository.createContactCategory(data).then((resp)=>{ 
+        setIsLoading(false)
+        resetForm()
+        const cachedData = getCachedData("Contact Category"); 
+        const updatedData = [...cachedData, resp?.data]; 
+        cacheData("Contact Category", updatedData); 
+        showToast("Contact Category Added successfully.", "success");
+
+        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">Category 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 CreateContactCategory;

src/components/master/MasterModal.jsx

@@ -13,6 +13,7 @@ import {cacheData, getCachedData} from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import CreateWorkCategory from "./CreateWorkCategory";
 import EditWorkCategory from "./EditWorkCategory";
+import CreateCategory from "./CreateContactCategory";
 
 
 const MasterModal = ({ modaldata, closeModal }) => {
@@ -74,7 +75,6 @@ const MasterModal = ({ modaldata, closeModal }) => {
       </div>
     );
   }
-
   return (
     <div
       className="modal fade"
@@ -93,13 +93,16 @@ const MasterModal = ({ modaldata, closeModal }) => {
       >
         <div className="modal-content">
           <div className="modal-body p-sm-4 p-0">
-            <button
+            <div className="d-flex justify-content-between">
+              <h6>{ `${modaldata?.modalType} `}</h6>
+               <button
               type="button"
               className="btn-close"
               data-bs-dismiss="modal"
               aria-label="Close"
               onClick={closeModal}
             ></button>
+           </div>
 
             {modaldata.modalType === "Application Role" && (
               <CreateRole masmodalType={modaldata.masterType} onClose={closeModal} />
@@ -125,6 +128,9 @@ const MasterModal = ({ modaldata, closeModal }) => {
             {modaldata.modalType === "Edit-Work Category" && (
               <EditWorkCategory data={modaldata.item} onClose={closeModal} />
             )}
+            {modaldata.modalType === "Contact Category" && (
+              <CreateCategory data={modaldata.item} onClose={closeModal} />
+            )}
           </div>
         </div>
       </div>

src/data/masters.js

@@ -1,5 +1,5 @@
 // it important ------
-export const mastersList = [ {id: 1, name: "Application Role"}, {id: 2, name: "Job Role"}, {id: 3, name: "Activity"},{id: 4, name:"Work Category"} ]
+export const mastersList = [ {id: 1, name: "Application Role"}, {id: 2, name: "Job Role"}, {id: 3, name: "Activity"},{id: 4, name:"Work Category"},{id:5,name:"Contact Category"}]
 // -------------------
 
 export const dailyTask = [

src/repositories/MastersRepository.jsx

@@ -40,10 +40,20 @@ export const MasterRespository = {
   "Job Role": ( id ) => api.delete( `/api/roles/jobrole/${ id }` ),
   "Activity": ( id ) => api.delete( `/api/master/activity/delete/${ id }` ),
   "Application Role":(id)=>api.delete(`/api/roles/${id}`),
-  "Work Category": (id) => api.delete(`api/master/work-category/${id}`),
+  "Work Category": ( id ) => api.delete( `api/master/work-category/${ id }` ),
+  "Contact Category": ( id ) => api.delete( `/api/master/contact-category` ),
+  "Conatct Tag" :(id)=>api.delete("/api/master/contact-tag"),
 
   getWorkCategory:() => api.get(`/api/master/work-categories`),
   createWorkCategory: (data) => api.post(`/api/master/work-category`,data),
-  updateWorkCategory: (id,data) => api.post(`/api/master/work-category/edit/${id}`,data),
+  updateWorkCategory: ( id, data ) => api.post( `/api/master/work-category/edit/${ id }`, data ),
+  
+  getContactCategory: () => api.get( `/api/master/contact-categories` ),
+  createContactCategory: (data ) => api.post( `/api/master/contact-category`, data ),
+  updateContactCategory: ( id, data ) => api.post( `/api/master/contact-category/${ id }`, data ),
+  
+  getContactTag: () => api.get( `/api/master/contact-tag` ),
+  createContactTag: (data ) => api.post( `/api/master/contact-tag`, data ),
+  updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/${ id }`, data )
   
 }