Merge pull request 'Integrated the Work Category table into the Master module, including popup forms for creation and update, along with delete functionality.' (#94) from Ashutosh_Feature#208_WorkCategory_Master into Issue_May_2W

Reviewed-on: #94

src/components/master/CreateWorkCategory.jsx

@@ -0,0 +1,121 @@
+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 CreateWorkCategory = ({onClose}) => {
+
+  const[isLoading,setIsLoading] = useState(false)
+     const {
+      register,
+      handleSubmit,
+      formState: { errors },reset
+      
+    } = useForm({
+      resolver: zodResolver(schema),
+      defaultValues: {
+        name: "",
+        description: "",
+      
+      },
+    });
+    
+    const onSubmit = (data) => {
+      setIsLoading(true)
+    //   const result = {
+    //     name: data.name,
+    //     description: data.description,
+    //   };
+    
+      MasterRespository.createWorkCategory(data).then((resp)=>{ 
+        setIsLoading(false)
+        resetForm()
+        const cachedData = getCachedData("Work Category"); 
+        const updatedData = [...cachedData, resp?.data]; 
+        cacheData("Work Category", updatedData); 
+        showToast("Work 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 CreateWorkCategory;

src/components/master/EditJobRole.jsx

@@ -56,7 +56,6 @@ const EditJobRole = ({data,onClose}) => {
 
         onClose()
       }).catch((error)=>{
-        showToast("JobRole added successfully.", "success");
          showToast(error.message, "error")
         setIsLoading(false)
       })

src/components/master/EditWorkCategory.jsx

@@ -0,0 +1,128 @@
+import React, { useEffect,useState } from 'react'
+import { useForm ,Controller} from 'react-hook-form';
+import { set, z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { MasterRespository } from '../../repositories/MastersRepository';
+import { cacheData,getCachedData } from '../../slices/apiDataManager';
+import showToast from '../../services/toastService';
+
+
+
+const schema = z.object({
+  name: z.string().min(1, { message: "Work Category is required" }),
+  description: z.string().min(1, { message: "Description is required" })
+  .max(255, { message: "Description cannot exceed 255 characters" }),
+});
+
+
+
+const EditWorkCategory = ({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.updateWorkCategory(data?.id,result).then((resp)=>{
+        setIsLoading(false) 
+        showToast("Work Category Update successfully.", "success");
+        const cachedData = getCachedData("Work Category");
+        if (cachedData) {
+
+          const updatedData = cachedData.map((category) =>
+            category.id === data?.id ? { ...category, ...resp.data } : category
+          );
+          cacheData("Work Category", updatedData);
+        }
+
+        onClose()
+      }).catch((error)=>{
+         showToast(error?.response?.data?.message, "error")
+        setIsLoading(false)
+      })
+     
+    };
+
+ 
+    useEffect(() => {
+      reset({
+        name: data?.name,
+        description: data?.description
+      });
+      setDescriptionLength(data?.description?.length || 0);
+    }, [data, reset]);
+    
+  const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 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 EditWorkCategory;

src/components/master/MasterModal.jsx

@@ -11,6 +11,8 @@ import ConfirmModal from "../common/ConfirmModal";
 import {MasterRespository} from "../../repositories/MastersRepository";
 import {cacheData, getCachedData} from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
+import CreateWorkCategory from "./CreateWorkCategory";
+import EditWorkCategory from "./EditWorkCategory";
 
 
 const MasterModal = ({ modaldata, closeModal }) => {
@@ -117,6 +119,12 @@ const MasterModal = ({ modaldata, closeModal }) => {
             {modaldata.modalType === "Edit-Activity" && (
               <EditActivity activityData={modaldata.item} onClose={closeModal} />
             )}
+            {modaldata.modalType === "Work Category" && (
+              <CreateWorkCategory onClose={closeModal} />
+            )}
+            {modaldata.modalType === "Edit-Work Category" && (
+              <EditWorkCategory 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"} ]
+export const mastersList = [ {id: 1, name: "Application Role"}, {id: 2, name: "Job Role"}, {id: 3, name: "Activity"},{id: 4, name:"Work Category"} ]
 // -------------------
 
 export const dailyTask = [

src/hooks/masterHook/useMaster.js

@@ -47,6 +47,10 @@ const useMaster = (isMa) => {
               response = await MasterRespository.getActivites();
               response = response.data
               break;
+              case "Work Category":
+              response = await MasterRespository.getWorkCategory();
+              response = response.data
+              break;
             case "Status":
               response = [{description: null,featurePermission: null,id: "02dd4761-363c-49ed-8851-3d2489a3e98d",status:"status 1"},{description: null,featurePermission: null,id: "03dy9761-363c-49ed-8851-3d2489a3e98d",status:"status 2"},{description: null,featurePermission: null,id: "03dy7761-263c-49ed-8851-3d2489a3e98d",status:"Status 3"}];
               break;

src/pages/master/MasterTable.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
+import showToast from "../../services/toastService";
 
 const MasterTable = ({ data, columns, loading, handleModalData }) => {
   const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
@@ -58,6 +59,12 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
           : col.label,
     }));
 
+    const handleSystemDefined = (message) =>{
+      if(message){
+      showToast(`The system-defined item ${selectedMaster} cannot be ${message}.`)
+      }
+    }
+
   return (
     <div className="table-responsive">
       {loading ? (
@@ -108,8 +115,28 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                     </td>
                   ))}
                   <td className={!hasMasterPermission ? "d-none" : ""}>
-                    {selectedMaster === "Application Role" && item?.isSystem ? (
+                  {(selectedMaster === "Application Role" || selectedMaster === "Work Category") && item?.isSystem ? ( 
-                      "--"
+                      <>
+                      <button
+                        aria-label="Modify"
+                        type="button"
+                        className="btn p-0 dropdown-toggle hide-arrow"
+                        onClick={() =>
+                          handleSystemDefined("updated")
+                        }
+                      >
+                        <i className="bx bxs-edit me-2 text-primary"></i>
+                      </button>
+
+                      <button
+                        aria-label="Delete"
+                        type="button"
+                        className="btn p-0 dropdown-toggle hide-arrow"
+                        onClick={() => handleSystemDefined("deleted")}
+                      >
+                        <i className="bx bx-trash me-1 text-danger"></i>
+                      </button>
+                    </>
                     ) : (
                       <>
                         <button

src/repositories/MastersRepository.jsx

@@ -40,5 +40,10 @@ 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}`),
+
+  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),
   
 }