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

Add email in employee list

Browse Source
This commit is contained in:
Vikas Nale 2025-04-09 13:15:11 +05:30
parent 1019e9a32f
commit b1fd691f37
1 changed files with 223 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,100 +4,93 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
import Avatar from "../../components/common/Avatar"; import Avatar from "../../components/common/Avatar";
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
import ManageEmp from "../../components/Employee/ManageRole"; import ManageEmp from "../../components/Employee/ManageRole";
import {useEmployeesAllOrByProjectId} from "../../hooks/useEmployees"; import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
import { useProjects } from "../../hooks/useProjects"; import { useProjects } from "../../hooks/useProjects";
import { useProfile } from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile";
import {hasUserPermission} from "../../utils/authUtils"; import { hasUserPermission } from "../../utils/authUtils";
import {MANAGE_EMPLOYEES} from "../../utils/constants"; import { MANAGE_EMPLOYEES } from "../../utils/constants";
import {useHasUserPermission} from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
const EmployeeList = () => const EmployeeList = () => {
{ const { profile: loginUser } = useProfile();
const {profile:loginUser}= useProfile() const [selectedProject, setSelectedProject] = useState("");
const [selectedProject, setSelectedProject] = useState(""); const { projects, loading: projectLoading } = useProjects();
const {projects, loading: projectLoading} = useProjects() const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES);
const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES)
const {employees, loading,setLoading, error} = useEmployeesAllOrByProjectId( selectedProject ); const { employees, loading, setLoading, error } =
const [ projectsList, setProjectsList ] = useState(projects || [] ); useEmployeesAllOrByProjectId(selectedProject);
const [projectsList, setProjectsList] = useState(projects || []);
const [employeeList,setEmployeeList] = useState([])
const [employeeList, setEmployeeList] = useState([]);
const [modelConfig, setModelConfig] = useState(); const [modelConfig, setModelConfig] = useState();
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(5); const [itemsPerPage] = useState(5);
const [isCreateModalOpen, setIsCreateModalOpen ] = useState( false ); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [searchText,setSearchText] = useState("") const [searchText, setSearchText] = useState("");
const [filteredData, setFilteredData] = useState([]); const [filteredData, setFilteredData] = useState([]);
const navigate = useNavigate() const navigate = useNavigate();
const handleSearch = (e) => { const handleSearch = (e) => {
const value = e.target.value.toLowerCase(); const value = e.target.value.toLowerCase();
setSearchText(value); setSearchText(value);
if (!employeeList.length) return; if (!employeeList.length) return;
const results = employeeList.filter((item) => const results = employeeList.filter((item) =>
Object.values(item).some((field) => Object.values(item).some(
field && field.toString().toLowerCase().includes(value) (field) => field && field.toString().toLowerCase().includes(value)
) )
); );
setFilteredData(results); setFilteredData(results);
}; };
useEffect(() => { useEffect(() => {
setCurrentPage( 1 ) setCurrentPage(1);
if (!loading && Array.isArray(employees)) { if (!loading && Array.isArray(employees)) {
setEmployeeList(employees); setEmployeeList(employees);
setFilteredData( employees ); setFilteredData(employees);
} }
}, [loading, employees, selectedProject]); }, [loading, employees, selectedProject]);
const displayData = searchText ? filteredData : employeeList const displayData = searchText ? filteredData : employeeList;
const indexOfLastItem = currentPage * itemsPerPage; const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = Array.isArray(displayData) const currentItems = Array.isArray(displayData)
? displayData.slice(indexOfFirstItem, indexOfLastItem) ? displayData.slice(indexOfFirstItem, indexOfLastItem)
: []; : [];
const paginate = (pageNumber) => setCurrentPage(pageNumber); const paginate = (pageNumber) => setCurrentPage(pageNumber);
const totalPages = Array.isArray(displayData) const totalPages = Array.isArray(displayData)
? Math.ceil(displayData.length / itemsPerPage) ? Math.ceil(displayData.length / itemsPerPage)
: 0; : 0;
const openModal = () => {
setIsCreateModalOpen(true);
const openModal = () => { };
setIsCreateModalOpen(true);
};
const closeModal = () => { const closeModal = () => {
setIsCreateModalOpen(false); setIsCreateModalOpen(false);
const modalElement = document.getElementById("managerole-modal"); const modalElement = document.getElementById("managerole-modal");
if (modalElement) { if (modalElement) {
modalElement.classList.remove("show"); modalElement.classList.remove("show");
modalElement.style.display = "none"; modalElement.style.display = "none";
document.body.classList.remove("modal-open"); document.body.classList.remove("modal-open");
document.querySelector(".modal-backdrop").remove(); document.querySelector(".modal-backdrop").remove();
} }
}; };
const handleConfigData = (config) => { const handleConfigData = (config) => {
setModelConfig(config); setModelConfig(config);
}; };
useEffect(() => { useEffect(() => {
if (modelConfig !== null) { if (modelConfig !== null) {
openModal(); openModal();
} }
}, [ modelConfig, isCreateModalOpen ] ); }, [modelConfig, isCreateModalOpen]);
return ( return (
<> <>
@ -126,32 +119,30 @@ const EmployeeList = () =>
className="dataTables_length text-start" className="dataTables_length text-start"
id="DataTables_Table_0_length" id="DataTables_Table_0_length"
> >
<label> <label>
<select <select
id="project-select" id="project-select"
onChange={(e)=>setSelectedProject(e.target.value)} onChange={(e) => setSelectedProject(e.target.value)}
name="DataTables_Table_0_length" name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
className="form-select form-select-sm" className="form-select form-select-sm"
value={selectedProject || ""} value={selectedProject || ""}
> >
{projectLoading ? ( {projectLoading ? (
<option value="Loading" > <option value="Loading">Loading...</option>
Loading... ) : (
</option> <>
) : (
<>
<option value="">All Employees</option> <option value="">All Employees</option>
{Array.isArray(projects) && projects.map((item) => ( {Array.isArray(projects) &&
<option key={item.id} value={item.id}> projects.map((item) => (
{item.name} <option key={item.id} value={item.id}>
</option> {item.name}
))} </option>
</> ))}
)} </>
)}
</select> </select>
</label> </label>
</div> </div>
</div> </div>
</div> </div>
@ -224,8 +215,9 @@ const EmployeeList = () =>
</li> </li>
</ul> </ul>
<button <button
className={`btn btn-sm add-new btn-primary ${
className={`btn btn-sm add-new btn-primary ${!ManageEmployee && 'd-none'}`} !ManageEmployee && "d-none"
}`}
tabIndex="0" tabIndex="0"
type="button" type="button"
> >
@ -265,6 +257,17 @@ const EmployeeList = () =>
> >
Name Name
</th> </th>
<th
className="sorting sorting_desc d-none d-sm-table-cell"
tabIndex="0"
aria-controls="DataTables_Table_0"
rowSpan="1"
colSpan="1"
aria-label="User: activate to sort column ascending"
aria-sort="descending"
>
Email
</th>
<th <th
className="sorting sorting_desc d-none d-sm-table-cell" className="sorting sorting_desc d-none d-sm-table-cell"
tabIndex="0" tabIndex="0"
@ -287,7 +290,7 @@ const EmployeeList = () =>
> >
Role Role
</th> </th>
<th <th
className="sorting d-none d-md-table-cell" className="sorting d-none d-md-table-cell"
tabIndex="0" tabIndex="0"
@ -309,7 +312,9 @@ const EmployeeList = () =>
Status Status
</th> </th>
<th <th
className={`sorting_disabled ${!ManageEmployee && 'd-none'}`} className={`sorting_disabled ${
!ManageEmployee && "d-none"
}`}
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
style={{ width: "50px" }} style={{ width: "50px" }}
@ -319,89 +324,140 @@ const EmployeeList = () =>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{loading && <tr> {loading && (
<tr>
<td colSpan={8}> <td colSpan={8}>
<p>Loading...</p> <p>Loading...</p>
</td> </td>
</tr>}
{!loading && employeeList?.length === 0 && (<td colSpan={8} style={{ paddingTop: '20px', textAlign: 'center' }}>No Data Found</td> )}
{( !loading && employeeList && currentItems.length === 0 && employeeList.length !==0 ) && <td colSpan={8}><small className="muted">'{searchText}' employee not found</small> </td>}
{(currentItems && !loading) && currentItems.sort((a, b) => b.id - a.id).map((item) => (
<tr className="odd" key={item.id}>
<td className="sorting_1" colSpan={2}>
<div className="d-flex justify-content-start align-items-center user-name">
<Avatar
firstName={item.firstName}
lastName={item.lastName}
></Avatar>
<div className="d-flex flex-column">
<a
onClick={()=>navigate(`/employee/${item.id}?for=account`)}
className="text-heading text-truncate cursor-pointer"
>
<span className="fw-medium">
{item.firstName} {item.lastName}
</span>
</a>
</div>
</div>
</td>
<td className="text-start d-none d-sm-table-cell">
<span className="text-truncate">
<i className="bx bxs-phone-call text-primary me-2"></i>
{item.phoneNumber}
</span>
</td>
<td className=" d-none d-sm-table-cell text-start">
<span className="text-truncate">
<i className="bx bxs-wrench text-success me-2"></i>{item.jobRole || "Not Assign Yet"}
</span>
</td>
<td className=" d-none d-md-table-cell">
{moment(item.joiningDate).format("DD-MMM-YYYY")}
</td>
<td>
<span
className="badge bg-label-success"
text-capitalized=""
>
Active
</span>
</td>
{ManageEmployee && (
<td className="text-end">
<div className="dropdown">
<button className="btn btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
<i className="bx bx-dots-vertical-rounded bx-md"></i>
</button>
<div className="dropdown-menu dropdown-menu-end">
<button onClick={() => navigate(`/employee/${item.id}`)} className="dropdown-item">
View
</button>
<Link to={`/employee/manage/${item.id}`} className="dropdown-item">
Edit
</Link>
<button className="dropdown-item">Suspend</button>
<button
className="dropdown-item"
type="button"
data-bs-toggle="modal"
data-bs-target="#managerole-modal"
onClick={() => handleConfigData(item.id)}
>
Manage Role
</button>
</div>
</div>
</td>
)}
</tr> </tr>
) )} )}
{!loading && employeeList?.length === 0 && (
<td
colSpan={8}
style={{ paddingTop: "20px", textAlign: "center" }}
>
No Data Found
</td>
)}
{!loading &&
employeeList &&
currentItems.length === 0 &&
employeeList.length !== 0 && (
<td colSpan={8}>
<small className="muted">
'{searchText}' employee not found
</small>{" "}
</td>
)}
{currentItems &&
!loading &&
currentItems
.sort((a, b) => b.id - a.id)
.map((item) => (
<tr className="odd" key={item.id}>
<td className="sorting_1" colSpan={2}>
<div className="d-flex justify-content-start align-items-center user-name">
<Avatar
firstName={item.firstName}
lastName={item.lastName}
></Avatar>
<div className="d-flex flex-column">
<a
onClick={() =>
navigate(
`/employee/${item.id}?for=account`
)
}
className="text-heading text-truncate cursor-pointer"
>
<span className="fw-medium">
{item.firstName} {item.lastName}
</span>
</a>
</div>
</div>
</td>
<td className="text-start d-none d-sm-table-cell">
{item.email ? (
<span className="text-truncate">
<i className="bx bxs-envelope text-primary me-2"></i>
{item.email}
</span>
) : (
<span className="text-truncate text-italic">
NA
</span>
)}
</td>
<td className="text-start d-none d-sm-table-cell">
<span className="text-truncate">
<i className="bx bxs-phone-call text-primary me-2"></i>
{item.phoneNumber}
</span>
</td>
<td className=" d-none d-sm-table-cell text-start">
<span className="text-truncate">
<i className="bx bxs-wrench text-success me-2"></i>
{item.jobRole || "Not Assign Yet"}
</span>
</td>
<td className=" d-none d-md-table-cell">
{moment(item.joiningDate).format("DD-MMM-YYYY")}
</td>
<td>
<span
className="badge bg-label-success"
text-capitalized=""
>
Active
</span>
</td>
{ManageEmployee && (
<td className="text-end">
<div className="dropdown">
<button
className="btn btn-icon dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded bx-md"></i>
</button>
<div className="dropdown-menu dropdown-menu-end">
<button
onClick={() =>
navigate(`/employee/${item.id}`)
}
className="dropdown-item"
>
View
</button>
<Link
to={`/employee/manage/${item.id}`}
className="dropdown-item"
>
Edit
</Link>
<button className="dropdown-item">
Suspend
</button>
<button
className="dropdown-item"
type="button"
data-bs-toggle="modal"
data-bs-target="#managerole-modal"
onClick={() => handleConfigData(item.id)}
>
Manage Role
</button>
</div>
</div>
</td>
)}
</tr>
))}
</tbody> </tbody>
</table> </table>