diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx index 97b58d5b..1ded1626 100644 --- a/src/components/Employee/ManageEmployee.jsx +++ b/src/components/Employee/ManageEmployee.jsx @@ -15,17 +15,19 @@ import { clearApiCacheKey } from "../../slices/apiCacheSlice"; const mobileNumberRegex = /^[7-9]\d{9}$/; -const ManageEmployee = () => { +const ManageEmployee = ({ employeeId, onClosed }) => { const dispatch = useDispatch(); - const { employeeId } = useParams(); + // const { employeeId } = useParams(); const { employee, error, loading: empLoading, } = useEmployeeProfile(employeeId); - dispatch(changeMaster("Job Role")); + useEffect(() => { + dispatch(changeMaster("Job Role")); + }, [employeeId]); const [disabledEmail, setDisabledEmail] = useState(false); const { data: job_role, loading } = useMaster(); @@ -36,11 +38,11 @@ const ManageEmployee = () => { const [permanentAddressLength, setPermanentAddressLength] = useState(0); const userSchema = z.object({ - ...(employeeId ? { Id: z.string().optional() } : {}), - FirstName: z.string().min(1, { message: "First Name is required" }), - MiddleName: z.string().optional(), - LastName: z.string().min(1, { message: "Last Name is required" }), - Email: z + ...(employeeId ? { id: z.string().optional() } : {}), + firstName: z.string().min(1, { message: "First Name is required" }), + middleName: z.string().optional(), + lastName: z.string().min(1, { message: "Last Name is required" }), + email: z .string() .max(80, "Email cannot exceed 80 characters") .optional() @@ -59,11 +61,11 @@ const ManageEmployee = () => { message: "Email local or domain part is too long", } ), - CurrentAddress: z + currentAddress: z .string() .min(1, { message: "Current Address is required" }) .max(500, { message: "Address cannot exceed 500 characters" }), - BirthDate: z + birthDate: z .string() .min(1, { message: "Birth Date is required" }) .refine( @@ -74,7 +76,7 @@ const ManageEmployee = () => { message: "Birth date cannot be in the future", } ), - JoiningDate: z + joiningDate: z .string() .min(1, { message: "Joining Date is required" }) .refine( @@ -85,43 +87,43 @@ const ManageEmployee = () => { message: "Joining date cannot be in the future", } ), - EmergencyPhoneNumber: z + emergencyPhoneNumber: z .string() .min(1, { message: "Phone Number is required" }) .regex(mobileNumberRegex, { message: "Invalid phone number " }), - EmergencyContactPerson: z + emergencyContactPerson: z .string() .min(1, { message: "Emergency Contact Person is required" }) .regex(/^[A-Za-z\s]+$/, { message: "Emergency Contact Person must contain only letters", }), - AadharNumber: z + aadharNumber: z .string() .optional() .refine((val) => !val || /^\d{12}$/.test(val), { message: "Aadhar card must be exactly 12 digits long", }), - Gender: z + gender: z .string() .min(1, { message: "Gender is required" }) .refine((val) => val !== "Select Gender", { message: "Please select a gender", }), - PanNumber: z + panNumber: z .string() .optional() .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), { message: "Invalid PAN number", }), - PermanentAddress: z + permanentAddress: z .string() .min(1, { message: "Permanent Address is required" }) .max(500, { message: "Address cannot exceed 500 characters" }), - PhoneNumber: z + phoneNumber: z .string() .min(1, { message: "Phone Number is required" }) .regex(mobileNumberRegex, { message: "Invalid phone number " }), - JobRoleId: z.string().min(1, { message: "Role is required" }), + jobRoleId: z.string().min(1, { message: "Role is required" }), }); const { @@ -135,22 +137,22 @@ const ManageEmployee = () => { } = useForm({ resolver: zodResolver(userSchema), defaultValues: { - Id: currentEmployee?.id || null, - FirstName: currentEmployee?.firstName || "", - MiddleName: currentEmployee?.middleName || "", - LastName: currentEmployee?.lastName || "", - Email: currentEmployee?.email || "", - CurrentAddress: currentEmployee?.currentAddress || "", - BirthDate: formatDate(currentEmployee?.birthDate) || "", - JoiningDate: formatDate(currentEmployee?.joiningDate) || "", - EmergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "", - EmergencyContactPerson: currentEmployee?.emergencyContactPerson || "", - AadharNumber: currentEmployee?.aadharNumber || "", - Gender: currentEmployee?.gender || "", - PanNumber: currentEmployee?.panNumber || "", - PermanentAddress: currentEmployee?.permanentAddress || "", - PhoneNumber: currentEmployee?.phoneNumber || "", - JobRoleId: currentEmployee?.jobRoleId.toString() || null, + id: currentEmployee?.id || null, + firstName: currentEmployee?.firstName || "", + middleName: currentEmployee?.middleName || "", + lastName: currentEmployee?.lastName || "", + email: currentEmployee?.email || "", + currentAddress: currentEmployee?.currentAddress || "", + birthDate: formatDate(currentEmployee?.birthDate) || "", + joiningDate: formatDate(currentEmployee?.joiningDate) || "", + emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "", + emergencyContactPerson: currentEmployee?.emergencyContactPerson || "", + aadharNumber: currentEmployee?.aadharNumber || "", + gender: currentEmployee?.gender || "", + panNumber: currentEmployee?.panNumber || "", + permanentAddress: currentEmployee?.permanentAddress || "", + phoneNumber: currentEmployee?.phoneNumber || "", + jobRoleId: currentEmployee?.jobRoleId.toString() || null, }, mode: "onChange", }); @@ -160,29 +162,8 @@ const ManageEmployee = () => { const onSubmit = (data) => { setLoading(true); - const formData = getValues(); - - const formDataToSend = new FormData(); - - if (!employeeId) { - delete formData["Id"]; - } - - for (const key in formData) { - formDataToSend.append(key, formData[key]); - - // if (key === "Documents") { - // formData[key]?.forEach((file, index) => { - // formDataToSend.append(`Documents`, file); - // }); - // } else if (key === "Photo" && formData[key]) { - // formDataToSend.append("Photo", formData[key]); - // } else{ - // formDataToSend.append(key, formData[key]); - // } - } - - EmployeeRepository.manageEmployee(formDataToSend) + console.log(data); + EmployeeRepository.manageEmployee(data) .then((response) => { showToast("Employee details updated successfully.", "success"); clearCacheKey("employeeListByProject"); @@ -194,7 +175,10 @@ const ManageEmployee = () => { navigation("/employees"); }) .catch((error) => { - const message = error?.response?.data?.message || error?.message || "Error occured during api calling" + const message = + error?.response?.data?.message || + error?.message || + "Error occured during api calling"; showToast(message, "error"); setLoading(false); }); @@ -206,29 +190,27 @@ const ManageEmployee = () => { } }, [loading, error, employee]); - dispatch(changeMaster("Job Role")); - useEffect(() => { reset( currentEmployee ? { - Id: currentEmployee.id || null, - FirstName: currentEmployee.firstName || "", - MiddleName: currentEmployee.middleName || "", - LastName: currentEmployee.lastName || "", - Email: currentEmployee.email || "", - CurrentAddress: currentEmployee.currentAddress || "", - BirthDate: formatDate(currentEmployee.birthDate) || "", - JoiningDate: formatDate(currentEmployee.joiningDate) || "", - EmergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "", - EmergencyContactPerson: + id: currentEmployee.id || null, + firstName: currentEmployee.firstName || "", + middleName: currentEmployee.middleName || "", + lastName: currentEmployee.lastName || "", + email: currentEmployee.email || "", + currentAddress: currentEmployee.currentAddress || "", + birthDate: formatDate(currentEmployee.birthDate) || "", + joiningDate: formatDate(currentEmployee.joiningDate) || "", + emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "", + emergencyContactPerson: currentEmployee.emergencyContactPerson || "", - AadharNumber: currentEmployee.aadharNumber || "", - Gender: currentEmployee.gender || "", - PanNumber: currentEmployee.panNumber || "", - PermanentAddress: currentEmployee.permanentAddress || "", - PhoneNumber: currentEmployee.phoneNumber || "", - JobRoleId: currentEmployee.jobRoleId?.toString() || "", + aadharNumber: currentEmployee.aadharNumber || "", + gender: currentEmployee.gender || "", + panNumber: currentEmployee.panNumber || "", + permanentAddress: currentEmployee.permanentAddress || "", + phoneNumber: currentEmployee.phoneNumber || "", + jobRoleId: currentEmployee.jobRoleId?.toString() || "", } : {} // Empty object resets the form ); @@ -238,9 +220,9 @@ const ManageEmployee = () => { return ( <> -
-
-
+
+
+
{employee ? "Update Employee" : "Create Employee"} @@ -248,15 +230,9 @@ const ManageEmployee = () => { navigation("/employees")} + onClick={() => onClosed()} > - Back +
@@ -272,7 +248,7 @@ const ManageEmployee = () => { { {
Last Name
{ { type="text" keyboardType="numeric" id="PhoneNumber" - {...register("PhoneNumber")} + {...register("phoneNumber")} className="form-control form-control-sm" placeholder="Phone Number" inputMode="numeric" @@ -376,7 +352,7 @@ const ManageEmployee = () => {
@@ -424,7 +400,7 @@ const ManageEmployee = () => {
@@ -448,7 +424,7 @@ const ManageEmployee = () => { placeholder="Current Address" aria-label="Current Address" aria-describedby="basic-icon-default-message2" - {...register("CurrentAddress")} + {...register("currentAddress")} maxLength={500} onChange={(e) => { setCurrentAddressLength(e.target.value.length); @@ -482,7 +458,7 @@ const ManageEmployee = () => { placeholder="Permanent Address" aria-label="Permanent Address" aria-describedby="basic-icon-default-message2" - {...register("PermanentAddress")} + {...register("permanentAddress")} maxLength={500} onChange={(e) => { setPermanentAddressLength(e.target.value.length); @@ -516,7 +492,7 @@ const ManageEmployee = () => {
{
{ )}
-
+
AADHAR Number
{
)}
-
+
PAN Number
{ {employeeId && (
- +
)} diff --git a/src/components/Employee/ManageRole.jsx b/src/components/Employee/ManageRole.jsx index 49794541..4d30cc16 100644 --- a/src/components/Employee/ManageRole.jsx +++ b/src/components/Employee/ManageRole.jsx @@ -17,7 +17,9 @@ const ManageRole = ( {employeeId, onClosed} ) => { const disptach = useDispatch(); +useEffect(()=>{ disptach(changeMaster("Application Role")); +},[disptach]) const [isLoading, setIsLoading] = useState(false); const { employeeRoles, loading } = useEmployeeRoles(employeeId); const { data, loading: roleLoading } = useMaster(); diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx index 788313fd..ae7dcafa 100644 --- a/src/pages/employee/EmployeeList.jsx +++ b/src/pages/employee/EmployeeList.jsx @@ -20,13 +20,14 @@ import { exportToPDF, } from "../../utils/tableExportUtils"; import EmployeeRepository from "../../repositories/EmployeeRepository"; +import ManageEmployee from "../../components/Employee/ManageEmployee"; const EmployeeList = () => { const { profile: loginUser } = useProfile(); const [selectedProject, setSelectedProject] = useState(""); const { projects, loading: projectLoading } = useProjects(); const [showInactive, setShowInactive] = useState(false); - const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES); + const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES); const { employees, loading, setLoading, error, recallEmployeeData } = useEmployeesAllOrByProjectId(selectedProject, showInactive); @@ -37,9 +38,11 @@ const EmployeeList = () => { const [currentPage, setCurrentPage] = useState(1); const [itemsPerPage] = useState(15); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); + const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false); const [searchText, setSearchText] = useState(""); const [filteredData, setFilteredData] = useState([]); const [showModal, setShowModal] = useState(false); + const [selectedEmployeeId, setSelecedEmployeeId] = useState(); const navigate = useNavigate(); @@ -91,13 +94,15 @@ const EmployeeList = () => { const closeModal = () => { setIsCreateModalOpen(false); + const modalElement = document.getElementById("managerole-modal"); - if (modalElement) { + if (modalElement && !showModal) { modalElement.classList.remove("show"); modalElement.style.display = "none"; document.body.classList.remove("modal-open"); document.querySelector(".modal-backdrop").remove(); } + setShowModal(false); }; const handleShow = () => setShowModal(true); const handleClose = () => setShowModal(false); @@ -160,20 +165,34 @@ const EmployeeList = () => { recallEmployeeData(e.target.checked); }; + const handleEmployeeModel = (id) => { + setSelecedEmployeeId(id); + setShowModal(true); + }; + return ( <> {isCreateModalOpen && ( )} -
- +
+
+ +
+
@@ -301,21 +320,19 @@ const EmployeeList = () => { {" "}
@@ -332,12 +349,8 @@ const EmployeeList = () => { onChange={handleToggle} /> - - - - - - + + Show Inactive Employees @@ -420,7 +433,7 @@ const EmployeeList = () => { { )} - {ManageEmployee && ( + {Manage_Employee && (
- { + handleEmployeeModel(item.id); + }} > Edit - + {!item.isSystem && ( <>