Adding Change Password button on Employee Profile Page.
This commit is contained in:
parent
c2c9fd01fc
commit
a480c3b111
@ -17,6 +17,8 @@ import { useNavigate } from "react-router-dom";
|
|||||||
import Avatar from "../../components/common/Avatar";
|
import Avatar from "../../components/common/Avatar";
|
||||||
import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
|
import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
|
||||||
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
||||||
|
import { useChangePassword } from "../../components/Context/ChangePasswordContext";
|
||||||
|
|
||||||
const EmployeeProfile = () => {
|
const EmployeeProfile = () => {
|
||||||
const projectID = useSelector((store) => store.localVariables.projectId);
|
const projectID = useSelector((store) => store.localVariables.projectId);
|
||||||
const { employeeId } = useParams();
|
const { employeeId } = useParams();
|
||||||
@ -27,17 +29,17 @@ const EmployeeProfile = () => {
|
|||||||
const tab = SearchParams.get("for");
|
const tab = SearchParams.get("for");
|
||||||
const [activePill, setActivePill] = useState(tab);
|
const [activePill, setActivePill] = useState(tab);
|
||||||
const [currentEmployee, setCurrentEmployee] = useState();
|
const [currentEmployee, setCurrentEmployee] = useState();
|
||||||
const [showModal, setShowModal] = useState(false);
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
|
||||||
const handlePillClick = (pillKey) => {
|
const handlePillClick = (pillKey) => {
|
||||||
setActivePill(pillKey);
|
setActivePill(pillKey);
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeModal = () => {
|
const closeModal = () => {
|
||||||
setShowModal(false);
|
setShowModal(false);
|
||||||
fetchEmployeeProfile(employeeId);
|
fetchEmployeeProfile(employeeId);
|
||||||
};
|
};
|
||||||
const handleShow = () => setShowModal(true);
|
const handleShow = () => setShowModal(true);
|
||||||
|
|
||||||
const fetchEmployeeProfile = async (employeeID) => {
|
const fetchEmployeeProfile = async (employeeID) => {
|
||||||
try {
|
try {
|
||||||
@ -95,177 +97,184 @@ const EmployeeProfile = () => {
|
|||||||
if (loading) {
|
if (loading) {
|
||||||
return <div>Loading...</div>;
|
return <div>Loading...</div>;
|
||||||
}
|
}
|
||||||
|
const { openChangePassword } = useChangePassword();
|
||||||
return (
|
return (
|
||||||
<> {showModal && (<div
|
<> {showModal && (<div
|
||||||
className={`modal fade ${showModal ? "show" : ""} `}
|
className={`modal fade ${showModal ? "show" : ""} `}
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
style={{ display: showModal ? "block" : "none" }}
|
style={{ display: showModal ? "block" : "none" }}
|
||||||
aria-hidden={!showModal}
|
aria-hidden={!showModal}
|
||||||
>
|
>
|
||||||
<div className="modal-dialog modal-xl modal-dialog-centered ">
|
<div className="modal-dialog modal-xl modal-dialog-centered ">
|
||||||
<div
|
<div
|
||||||
className="modal-content overflow-y-auto overflow-x-hidden"
|
className="modal-content overflow-y-auto overflow-x-hidden"
|
||||||
style={{ maxHeight: "90vh" }}
|
style={{ maxHeight: "90vh" }}
|
||||||
>
|
>
|
||||||
<ManageEmployee
|
<ManageEmployee
|
||||||
employeeId={employeeId}
|
employeeId={employeeId}
|
||||||
onClosed={closeModal}
|
onClosed={closeModal}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>)}
|
</div>
|
||||||
|
</div>)}
|
||||||
|
|
||||||
<div className="container-xxl flex-grow-1 container-p-y">
|
<div className="container-xxl flex-grow-1 container-p-y">
|
||||||
<Breadcrumb
|
<Breadcrumb
|
||||||
data={[
|
data={[
|
||||||
{ label: "Home", link: "/dashboard" },
|
{ label: "Home", link: "/dashboard" },
|
||||||
{ label: "Employees", link: "/employees" },
|
{ label: "Employees", link: "/employees" },
|
||||||
{ label: "Profile", link: null },
|
{ label: "Profile", link: null },
|
||||||
]}
|
]}
|
||||||
></Breadcrumb>
|
></Breadcrumb>
|
||||||
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
|
<div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 mb-4">
|
<div className="col-12 mb-4">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="d-flex flex-row flex-lg-column">
|
<div className="d-flex flex-row flex-lg-column">
|
||||||
<div className="d-flex flex-column justify-content-center align-items-center text-center">
|
<div className="d-flex flex-column justify-content-center align-items-center text-center">
|
||||||
<Avatar
|
<Avatar
|
||||||
firstName={`${currentEmployee?.firstName}`}
|
firstName={`${currentEmployee?.firstName}`}
|
||||||
lastName={`${currentEmployee?.lastName}`}
|
lastName={`${currentEmployee?.lastName}`}
|
||||||
size={"lg"}
|
size={"lg"}
|
||||||
/>
|
/>
|
||||||
<div className="py-2">
|
<div className="py-2">
|
||||||
<p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
|
<p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="w-100 d-flex flex-column justify-content-start">
|
||||||
<div className="w-100 d-flex flex-column justify-content-start">
|
<div className="mt-3 w-100">
|
||||||
<div className="mt-3 w-100">
|
<h6 className="mb-2 text-muted text-start">
|
||||||
<h6 className="mb-2 text-muted text-start">
|
Employee Info
|
||||||
Employee Info
|
</h6>
|
||||||
</h6>
|
<table className="table table-borderless mb-3">
|
||||||
<table className="table table-borderless mb-3">
|
<tbody>
|
||||||
<tbody>
|
<tr>
|
||||||
<tr>
|
<td className="fw-medium text-start">Email:</td>
|
||||||
<td className="fw-medium text-start">Email:</td>
|
<td className="text-start">
|
||||||
<td className="text-start">
|
{currentEmployee?.email || <em>NA</em>}
|
||||||
{currentEmployee?.email || <em>NA</em>}
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td className="fw-medium text-start">
|
||||||
<td className="fw-medium text-start">
|
Phone Number:
|
||||||
Phone Number:
|
</td>
|
||||||
</td>
|
<td className="text-start">
|
||||||
<td className="text-start">
|
{currentEmployee?.phoneNumber || <em>NA</em>}
|
||||||
{currentEmployee?.phoneNumber || <em>NA</em>}
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td className="fw-medium text-start">
|
||||||
<td className="fw-medium text-start">
|
Emergency Contact Person:
|
||||||
Emergency Contact Person:
|
</td>
|
||||||
</td>
|
<td className="text-start">
|
||||||
<td className="text-start">
|
{currentEmployee?.emergencyContactPerson || (
|
||||||
{currentEmployee?.emergencyContactPerson || (
|
<em>NA</em>
|
||||||
<em>NA</em>
|
)}
|
||||||
)}
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td className="fw-medium text-start">
|
||||||
<td className="fw-medium text-start">
|
Emergency Contact Number:
|
||||||
Emergency Contact Number:
|
</td>
|
||||||
</td>
|
<td className="text-start">
|
||||||
<td className="text-start">
|
{currentEmployee?.emergencyPhoneNumber || (
|
||||||
{currentEmployee?.emergencyPhoneNumber || (
|
<em>NA</em>
|
||||||
<em>NA</em>
|
)}
|
||||||
)}
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
</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>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="btn btn-primary btn-block"
|
||||||
|
onClick={() => handleShow()}
|
||||||
|
>
|
||||||
|
Edit Profile
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-primary btn-block mt-2"
|
||||||
|
onClick={() => openChangePassword()}
|
||||||
|
>
|
||||||
|
Change Password
|
||||||
|
</button>
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
className="btn btn-primary btn-block"
|
|
||||||
onClick={() =>
|
|
||||||
handleShow()
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Edit Profile
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
|
<div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<EmployeeNav
|
<EmployeeNav
|
||||||
onPillClick={handlePillClick}
|
onPillClick={handlePillClick}
|
||||||
activePill={activePill}
|
activePill={activePill}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="row row-bordered g-0">{renderContent()}</div>
|
<div className="row row-bordered g-0">{renderContent()}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user