Adding Change Password button on Employee Profile Page. #198
@ -212,15 +212,16 @@ const ChangePasswordPage = ({ onClose }) => {
|
||||
<p className="p-0 m-0">Password must be:</p>
|
||||
<p className="p-0 m-0">- at least 8 characters long</p>
|
||||
<p className="p-0 m-0">
|
||||
- must contain at least one uppercase letter
|
||||
- must contain one uppercase, one lowercase letter, at least one
|
||||
number, at least one special character
|
||||
</p>
|
||||
<p className="p-0 m-0">
|
||||
{/* <p className="p-0 m-0">
|
||||
- must contain at least one lowercase letter
|
||||
</p>
|
||||
<p className="p-0 m-0">- must contain at least one number</p>
|
||||
<p className="p-0 m-0">
|
||||
- must contain at least one special character
|
||||
</p>
|
||||
</p> */}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -10,6 +10,8 @@ import {
|
||||
useEmployees,
|
||||
useEmployeesByProject,
|
||||
} from "../../hooks/useEmployees";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
|
||||
import { useSelector } from "react-redux";
|
||||
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
||||
@ -17,7 +19,11 @@ import { useNavigate } from "react-router-dom";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
|
||||
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
||||
import { useChangePassword } from "../../components/Context/ChangePasswordContext";
|
||||
|
||||
const EmployeeProfile = () => {
|
||||
const { profile } = useProfile();
|
||||
|
||||
const projectID = useSelector((store) => store.localVariables.projectId);
|
||||
const { employeeId } = useParams();
|
||||
// const {employee,loading} = useEmployeeProfile(employeeId)
|
||||
@ -27,17 +33,17 @@ const EmployeeProfile = () => {
|
||||
const tab = SearchParams.get("for");
|
||||
const [activePill, setActivePill] = useState(tab);
|
||||
const [currentEmployee, setCurrentEmployee] = useState();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const handlePillClick = (pillKey) => {
|
||||
setActivePill(pillKey);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setShowModal(false);
|
||||
fetchEmployeeProfile(employeeId);
|
||||
};
|
||||
const handleShow = () => setShowModal(true);
|
||||
const closeModal = () => {
|
||||
setShowModal(false);
|
||||
fetchEmployeeProfile(employeeId);
|
||||
};
|
||||
const handleShow = () => setShowModal(true);
|
||||
|
||||
const fetchEmployeeProfile = async (employeeID) => {
|
||||
try {
|
||||
@ -95,179 +101,190 @@ const EmployeeProfile = () => {
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
const { openChangePassword } = useChangePassword();
|
||||
return (
|
||||
<> {showModal && (<div
|
||||
className={`modal fade ${showModal ? "show" : ""} `}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: showModal ? "block" : "none" }}
|
||||
aria-hidden={!showModal}
|
||||
>
|
||||
<div className="modal-dialog modal-xl modal-dialog-centered ">
|
||||
<div
|
||||
className="modal-content overflow-y-auto overflow-x-hidden"
|
||||
style={{ maxHeight: "90vh" }}
|
||||
>
|
||||
<ManageEmployee
|
||||
employeeId={employeeId}
|
||||
onClosed={closeModal}
|
||||
/>
|
||||
<>
|
||||
{" "}
|
||||
{showModal && (
|
||||
<div
|
||||
className={`modal fade ${showModal ? "show" : ""} `}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: showModal ? "block" : "none" }}
|
||||
aria-hidden={!showModal}
|
||||
>
|
||||
<div className="modal-dialog modal-xl modal-dialog-centered ">
|
||||
<div
|
||||
className="modal-content overflow-y-auto overflow-x-hidden"
|
||||
style={{ maxHeight: "90vh" }}
|
||||
>
|
||||
<ManageEmployee employeeId={employeeId} onClosed={closeModal} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
)}
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Employees", link: "/employees" },
|
||||
{ label: "Profile", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Employees", link: "/employees" },
|
||||
{ label: "Profile", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
|
||||
<div className="row">
|
||||
<div className="col-12 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="d-flex flex-row flex-lg-column">
|
||||
<div className="d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<Avatar
|
||||
firstName={`${currentEmployee?.firstName}`}
|
||||
lastName={`${currentEmployee?.lastName}`}
|
||||
size={"lg"}
|
||||
/>
|
||||
<div className="py-2">
|
||||
<p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
|
||||
<div className="row">
|
||||
<div className="col-12 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="d-flex flex-row flex-lg-column">
|
||||
<div className="d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<Avatar
|
||||
firstName={`${currentEmployee?.firstName}`}
|
||||
lastName={`${currentEmployee?.lastName}`}
|
||||
size={"lg"}
|
||||
/>
|
||||
<div className="py-2">
|
||||
<p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100 d-flex flex-column justify-content-start">
|
||||
<div className="mt-3 w-100">
|
||||
<h6 className="mb-2 text-muted text-start">
|
||||
Employee Info
|
||||
</h6>
|
||||
<table className="table table-borderless mb-3">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">Email:</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.email || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Phone Number:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.phoneNumber || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Emergency Contact Person:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.emergencyContactPerson || (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Emergency Contact Number:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.emergencyPhoneNumber || (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<div className="w-100 d-flex flex-column justify-content-start">
|
||||
<div className="mt-3 w-100">
|
||||
<h6 className="mb-2 text-muted text-start">
|
||||
Employee Info
|
||||
</h6>
|
||||
<table className="table table-borderless mb-3">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">Email:</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.email || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Phone Number:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.phoneNumber || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Emergency Contact Person:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.emergencyContactPerson || (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Emergency Contact Number:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.emergencyPhoneNumber || (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td className="fw-medium text-start">Gender:</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.gender || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Birth Date:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.birthDate ? (
|
||||
new Date(
|
||||
currentEmployee.birthDate
|
||||
).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Gender:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.gender || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Birth Date:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.birthDate ? (
|
||||
new Date(
|
||||
currentEmployee.birthDate
|
||||
).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Joining Date:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.joiningDate ? (
|
||||
new Date(
|
||||
currentEmployee.joiningDate
|
||||
).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Job Role:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.jobRole || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">Address:</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.currentAddress || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Joining Date:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.joiningDate ? (
|
||||
new Date(
|
||||
currentEmployee.joiningDate
|
||||
).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Job Role:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.jobRole || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Address:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.currentAddress || (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary btn-block"
|
||||
onClick={() => handleShow()}
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
{currentEmployee?.id == profile?.employeeInfo?.id && (
|
||||
<button
|
||||
className="btn btn-outline-primary btn-block mt-2"
|
||||
onClick={() => openChangePassword()}
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary btn-block"
|
||||
onClick={() =>
|
||||
handleShow()
|
||||
}
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
|
||||
<div className="row">
|
||||
<EmployeeNav
|
||||
onPillClick={handlePillClick}
|
||||
activePill={activePill}
|
||||
/>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="row row-bordered g-0">{renderContent()}</div>
|
||||
<div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
|
||||
<div className="row">
|
||||
<EmployeeNav
|
||||
onPillClick={handlePillClick}
|
||||
activePill={activePill}
|
||||
/>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="row row-bordered g-0">{renderContent()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user