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

Merge pull request 'Changed the first letter of all form field variables to lowercase to follow proper variable naming conventions.' (#98) from Ashutosh_Bug#216_Create_Employee_Popup_Typo into Issue_May_2W

Browse Source 
Reviewed-on: #98
This commit is contained in:
Vikas Nale 2025-05-12 07:58:33 +00:00
commit 634dc12e5b
3 changed files with 75 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/Employee/ManageEmployee.jsx
View File

@ -33,7 +33,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
const { data: job_role, loading } = useMaster(); const { data: job_role, loading } = useMaster();
const [isloading, setLoading] = useState(false); const [isloading, setLoading] = useState(false);
const navigation = useNavigate(); const navigation = useNavigate();
const [currentEmployee, setCurrentEmployee] = useState(); const [currentEmployee, setCurrentEmployee] = useState(null);
const [currentAddressLength, setCurrentAddressLength] = useState(0); const [currentAddressLength, setCurrentAddressLength] = useState(0);
const [permanentAddressLength, setPermanentAddressLength] = useState(0); const [permanentAddressLength, setPermanentAddressLength] = useState(0);
@ -157,22 +157,30 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
mode: "onChange", mode: "onChange",
}); });
const AadharNumberValue = watch("AadharNumber") || ""; const AadharNumberValue = watch("aadharNumber") || "";
const onSubmit = (data) => { const onSubmit = (data) => {
setLoading(true); setLoading(true);
if (data.email == "") {
console.log(data); data.email = null;
}
EmployeeRepository.manageEmployee(data) EmployeeRepository.manageEmployee(data)
.then((response) => { .then((response) => {
showToast("Employee details updated successfully.", "success"); showToast(
`Employee details ${
data.id == null ? "created" : "updated"
} successfully.`,
"success"
);
clearCacheKey("employeeListByProject"); clearCacheKey("employeeListByProject");
clearCacheKey("allEmployeeList"); clearCacheKey("allEmployeeList");
clearCacheKey("allInactiveEmployeeList");
clearCacheKey("employeeProfile"); clearCacheKey("employeeProfile");
setLoading(false); setLoading(false);
reset(); reset();
navigation("/employees"); // navigation("/employees");
onClosed();
}) })
.catch((error) => { .catch((error) => {
const message = const message =
@ -232,7 +240,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
className="cursor-pointer fs-6" className="cursor-pointer fs-6"
onClick={() => onClosed()} onClick={() => onClosed()}
> >
<i className='bx bx-x'></i> <i className="bx bx-x"></i>
</span> </span>
</div> </div>
<div className="card-body"> <div className="card-body">
@ -250,15 +258,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
name="FirstName" name="FirstName"
{...register("firstName")} {...register("firstName")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="FirstName" id="firstName"
placeholder="First Name" placeholder="First Name"
/> />
{errors.FirstName && ( {errors.firstName && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.FirstName.message} {errors.firstName.message}
</div> </div>
)} )}
</div>{" "} </div>{" "}
@ -269,15 +277,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text" type="text"
{...register("middleName")} {...register("middleName")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="MiddleName" id="middleName"
placeholder="Middle Name" placeholder="Middle Name"
/> />
{errors.MiddleName && ( {errors.middleName && (
<div <div
className="danger-text text-start " className="danger-text text-start "
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.MiddleName.message} {errors.middleName.message}
</div> </div>
)} )}
</div> </div>
@ -287,15 +295,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text" type="text"
{...register("lastName")} {...register("lastName")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="LastName" id="lastName"
placeholder="Last Name" placeholder="Last Name"
/> />
{errors.LastName && ( {errors.lastName && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.LastName.message} {errors.lastName.message}
</div> </div>
)} )}
</div> </div>
@ -305,7 +313,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<div className="form-text text-start">Email</div> <div className="form-text text-start">Email</div>
<input <input
type="email" type="email"
id="Email" id="email"
{...register("email")} {...register("email")}
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="example@domain.com" placeholder="example@domain.com"
@ -313,12 +321,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
aria-describedby="Email" aria-describedby="Email"
disabled={!!currentEmployee?.email} disabled={!!currentEmployee?.email}
/> />
{errors.Email && ( {errors.email && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.Email.message} {errors.email.message}
</div> </div>
)} )}
</div> </div>
@ -327,19 +335,19 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<input <input
type="text" type="text"
keyboardType="numeric" keyboardType="numeric"
id="PhoneNumber" id="phoneNumber"
{...register("phoneNumber")} {...register("phoneNumber")}
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Phone Number" placeholder="Phone Number"
inputMode="numeric" inputMode="numeric"
maxLength={10} maxLength={10}
/> />
{errors.PhoneNumber && ( {errors.phoneNumber && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.PhoneNumber.message} {errors.phoneNumber.message}
</div> </div>
)} )}
</div> </div>
@ -353,7 +361,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<select <select
className="form-select form-select-sm " className="form-select form-select-sm "
{...register("gender")} {...register("gender")}
id="Gender" id="gender"
aria-label="" aria-label=""
> >
<option disabled value=""> <option disabled value="">
@ -364,12 +372,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<option value="Other">Other</option> <option value="Other">Other</option>
</select> </select>
</div> </div>
{errors.Gender && ( {errors.gender && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.Gender.message} {errors.gender.message}
</div> </div>
)} )}
</div> </div>
@ -381,15 +389,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
className="form-control form-control-sm" className="form-control form-control-sm"
type="date" type="date"
{...register("birthDate")} {...register("birthDate")}
id="BirthDate" id="birthDate"
/> />
</div> </div>
{errors.BirthDate && ( {errors.birthDate && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.BirthDate.message} {errors.birthDate.message}
</div> </div>
)} )}
</div> </div>
@ -401,15 +409,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
className="form-control form-control-sm" className="form-control form-control-sm"
type="date" type="date"
{...register("joiningDate")} {...register("joiningDate")}
id="JoiningDate" id="joiningDate"
/> />
</div> </div>
{errors.JoiningDate && ( {errors.joiningDate && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.JoiningDate.message} {errors.joiningDate.message}
</div> </div>
)} )}
</div> </div>
@ -419,7 +427,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<div className="form-text text-start">Current Address</div> <div className="form-text text-start">Current Address</div>
<textarea <textarea
id="CurrentAddress" id="currentAddress"
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Current Address" placeholder="Current Address"
aria-label="Current Address" aria-label="Current Address"
@ -429,7 +437,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
onChange={(e) => { onChange={(e) => {
setCurrentAddressLength(e.target.value.length); setCurrentAddressLength(e.target.value.length);
// let react-hook-form still handle it // let react-hook-form still handle it
register("CurrentAddress").onChange(e); register("currentAddress").onChange(e);
}} }}
></textarea> ></textarea>
<div className="text-end muted"> <div className="text-end muted">
@ -438,12 +446,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
{500 - currentAddressLength} characters left {500 - currentAddressLength} characters left
</small> </small>
</div> </div>
{errors.CurrentAddress && ( {errors.currentAddress && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.CurrentAddress.message} {errors.currentAddress.message}
</div> </div>
)} )}
</div> </div>
@ -453,7 +461,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
</div> </div>
<textarea <textarea
id="PermanentAddress" id="permanentAddress"
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Permanent Address" placeholder="Permanent Address"
aria-label="Permanent Address" aria-label="Permanent Address"
@ -462,7 +470,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
maxLength={500} maxLength={500}
onChange={(e) => { onChange={(e) => {
setPermanentAddressLength(e.target.value.length); setPermanentAddressLength(e.target.value.length);
register("PermanentAddress").onChange(e); register("permanentAddress").onChange(e);
}} }}
></textarea> ></textarea>
<div className="text-end muted"> <div className="text-end muted">
@ -470,12 +478,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
{500 - permanentAddressLength} characters left {500 - permanentAddressLength} characters left
</small> </small>
</div> </div>
{errors.PermanentAddress && ( {errors.permanentAddress && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.PermanentAddress.message} {errors.permanentAddress.message}
</div> </div>
)} )}
</div> </div>
@ -493,7 +501,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<select <select
className="form-select form-select-sm" className="form-select form-select-sm"
{...register("jobRoleId")} {...register("jobRoleId")}
id="JobRoleId" id="jobRoleId"
aria-label="" aria-label=""
> >
<option disabled value=""> <option disabled value="">
@ -506,12 +514,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
))} ))}
</select> </select>
</div> </div>
{errors.JobRoleId && ( {errors.jobRoleId && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.JobRoleId.message} {errors.jobRoleId.message}
</div> </div>
)} )}
</div> </div>
@ -523,16 +531,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text" type="text"
{...register("emergencyContactPerson")} {...register("emergencyContactPerson")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="EmergencyContactPerson" id="emergencyContactPerson"
maxLength={50} maxLength={50}
placeholder="Contact Person" placeholder="Contact Person"
/> />
{errors.EmergencyContactPerson && ( {errors.emergencyContactPerson && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.EmergencyContactPerson.message} {errors.emergencyContactPerson.message}
</div> </div>
)} )}
</div> </div>
@ -544,17 +552,17 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text" type="text"
{...register("emergencyPhoneNumber")} {...register("emergencyPhoneNumber")}
className="form-control form-control-sm phone-mask" className="form-control form-control-sm phone-mask"
id="EmergencyPhoneNumber" id="emergencyPhoneNumber"
placeholder="Phone Number" placeholder="Phone Number"
inputMode="numeric" inputMode="numeric"
maxLength={10} maxLength={10}
/> />
{errors.EmergencyPhoneNumber && ( {errors.emergencyPhoneNumber && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.EmergencyPhoneNumber.message} {errors.emergencyPhoneNumber.message}
</div> </div>
)} )}
</div> </div>
@ -567,14 +575,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text" type="text"
{...register("aadharNumber")} {...register("aadharNumber")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="AadharNumber" id="aadharNumber"
placeholder="AADHAR Number" placeholder="AADHAR Number"
maxLength={12} maxLength={12}
inputMode="numeric" inputMode="numeric"
/> />
{errors.AadharNumber && ( {errors.aadharNumber && (
<div className="danger-text text-start"> <div className="danger-text text-start">
{errors.AadharNumber.message} {errors.aadharNumber.message}
</div> </div>
)} )}
</div> </div>
@ -585,16 +593,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text" type="text"
{...register("panNumber")} {...register("panNumber")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="PanNumber" id="panNumber"
placeholder="PAN Number" placeholder="PAN Number"
maxLength={10} maxLength={10}
/> />
{errors.PanNumber && ( {errors.panNumber && (
<div <div
className="danger-text text-start" className="danger-text text-start"
style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
> >
{errors.PanNumber.message} {errors.panNumber.message}
</div> </div>
)} )}
</div> </div>

12
src/hooks/useEmployees.js
View File

@ -209,9 +209,15 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
export const useEmployeeProfile = (employeeId) => { export const useEmployeeProfile = (employeeId) => {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(); const [error, setError] = useState();
const [employee, setEmployees] = useState(); const [employee, setEmployees] = useState(null);
const fetchData = async () => { const fetchData = async () => {
if (!employeeId) {
// Reset the state if no employeeId (e.g., opening for 'add' mode)
setEmployees(null);
setLoading(false);
return;
}
const Employee_cache = getCachedData("employeeProfile"); const Employee_cache = getCachedData("employeeProfile");
if (!Employee_cache || Employee_cache.employeeId !== employeeId) { if (!Employee_cache || Employee_cache.employeeId !== employeeId) {
EmployeeRepository.getEmployeeProfile(employeeId) EmployeeRepository.getEmployeeProfile(employeeId)
@ -231,9 +237,7 @@ export const useEmployeeProfile = (employeeId) => {
}; };
useEffect(() => { useEffect(() => {
if (employeeId) { fetchData();
fetchData(employeeId);
}
}, [employeeId]); }, [employeeId]);
return { employee, loading, error }; return { employee, loading, error };

8
src/pages/employee/EmployeeList.jsx
View File

@ -43,7 +43,7 @@ const EmployeeList = () => {
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const [filteredData, setFilteredData] = useState([]); const [filteredData, setFilteredData] = useState([]);
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [selectedEmployeeId, setSelecedEmployeeId] = useState(); const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null); const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
const [employeeLodaing, setemployeeLodaing] = useState(false); const [employeeLodaing, setemployeeLodaing] = useState(false);
@ -111,6 +111,8 @@ const EmployeeList = () => {
document.querySelector(".modal-backdrop").remove(); document.querySelector(".modal-backdrop").remove();
} }
setShowModal(false); setShowModal(false);
clearCacheKey("employeeProfile");
recallEmployeeData(showInactive);
}; };
const handleShow = () => setShowModal(true); const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false); const handleClose = () => setShowModal(false);
@ -193,7 +195,7 @@ const EmployeeList = () => {
{isCreateModalOpen && ( {isCreateModalOpen && (
<ManageEmp employeeId={modelConfig} onClosed={closeModal} /> <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
)} )}
<div {showModal && (<div
className={`modal fade ${showModal ? "show" : ""} `} className={`modal fade ${showModal ? "show" : ""} `}
tabIndex="-1" tabIndex="-1"
role="dialog" role="dialog"
@ -211,7 +213,7 @@ const EmployeeList = () => {
/> />
</div> </div>
</div> </div>
</div> </div>)}
{IsDeleteModalOpen && ( {IsDeleteModalOpen && (
<div <div