admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Integrated the Work Category table into the Master module, including popup forms for creation and update, along with delete functionality. #94

Merged
vikas.nale merged 1 commits from Ashutosh_Feature#208_WorkCategory_Master into Issue_May_2W 2025-05-10 13:36:52 +00:00
Conversation 0 Commits 1 Files Changed 8 +296 -4
8 changed files with 296 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/master/CreateWorkCategory.jsx Normal file
View File

@ -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;

1
src/components/master/EditJobRole.jsx
View File

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

128
src/components/master/EditWorkCategory.jsx Normal file
View File

@ -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;

8
src/components/master/MasterModal.jsx
View File

@ -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>

2
src/data/masters.js
View File

@ -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 = [

4
src/hooks/masterHook/useMaster.js
View File

@ -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;

31
src/pages/master/MasterTable.jsx
View File

@ -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

5
src/repositories/MastersRepository.jsx
View File

@ -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),
}