admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 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

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

@ -11,25 +11,24 @@ 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 } =
useEmployeesAllOrByProjectId(selectedProject);
const [projectsList, setProjectsList] = useState(projects || []); 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();
@ -38,27 +37,24 @@ const EmployeeList = () =>
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)
@ -70,8 +66,6 @@ const EmployeeList = () =>
? Math.ceil(displayData.length / itemsPerPage) ? Math.ceil(displayData.length / itemsPerPage)
: 0; : 0;
const openModal = () => { const openModal = () => {
setIsCreateModalOpen(true); setIsCreateModalOpen(true);
}; };
@ -98,7 +92,6 @@ const EmployeeList = () =>
} }
}, [modelConfig, isCreateModalOpen]); }, [modelConfig, isCreateModalOpen]);
return ( return (
<> <>
{isCreateModalOpen && ( {isCreateModalOpen && (
@ -136,13 +129,12 @@ const EmployeeList = () =>
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) &&
projects.map((item) => (
<option key={item.id} value={item.id}> <option key={item.id} value={item.id}>
{item.name} {item.name}
</option> </option>
@ -151,7 +143,6 @@ const EmployeeList = () =>
)} )}
</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"
@ -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" }}
@ -320,15 +325,37 @@ const EmployeeList = () =>
</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>} </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>} {!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) => ( {currentItems &&
!loading &&
currentItems
.sort((a, b) => b.id - a.id)
.map((item) => (
<tr className="odd" key={item.id}> <tr className="odd" key={item.id}>
<td className="sorting_1" colSpan={2}> <td className="sorting_1" colSpan={2}>
<div className="d-flex justify-content-start align-items-center user-name"> <div className="d-flex justify-content-start align-items-center user-name">
@ -338,8 +365,11 @@ const EmployeeList = () =>
></Avatar> ></Avatar>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<a <a
onClick={() =>
onClick={()=>navigate(`/employee/${item.id}?for=account`)} navigate(
`/employee/${item.id}?for=account`
)
}
className="text-heading text-truncate cursor-pointer" className="text-heading text-truncate cursor-pointer"
> >
<span className="fw-medium"> <span className="fw-medium">
@ -349,6 +379,19 @@ const EmployeeList = () =>
</div> </div>
</div> </div>
</td> </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"> <td className="text-start d-none d-sm-table-cell">
<span className="text-truncate"> <span className="text-truncate">
<i className="bx bxs-phone-call text-primary me-2"></i> <i className="bx bxs-phone-call text-primary me-2"></i>
@ -357,7 +400,8 @@ const EmployeeList = () =>
</td> </td>
<td className=" d-none d-sm-table-cell text-start"> <td className=" d-none d-sm-table-cell text-start">
<span className="text-truncate"> <span className="text-truncate">
<i className="bx bxs-wrench text-success me-2"></i>{item.jobRole || "Not Assign Yet"} <i className="bx bxs-wrench text-success me-2"></i>
{item.jobRole || "Not Assign Yet"}
</span> </span>
</td> </td>
@ -375,17 +419,30 @@ const EmployeeList = () =>
{ManageEmployee && ( {ManageEmployee && (
<td className="text-end"> <td className="text-end">
<div className="dropdown"> <div className="dropdown">
<button className="btn btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"> <button
className="btn btn-icon dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded bx-md"></i> <i className="bx bx-dots-vertical-rounded bx-md"></i>
</button> </button>
<div className="dropdown-menu dropdown-menu-end"> <div className="dropdown-menu dropdown-menu-end">
<button onClick={() => navigate(`/employee/${item.id}`)} className="dropdown-item"> <button
onClick={() =>
navigate(`/employee/${item.id}`)
}
className="dropdown-item"
>
View View
</button> </button>
<Link to={`/employee/manage/${item.id}`} className="dropdown-item"> <Link
to={`/employee/manage/${item.id}`}
className="dropdown-item"
>
Edit Edit
</Link> </Link>
<button className="dropdown-item">Suspend</button> <button className="dropdown-item">
Suspend
</button>
<button <button
className="dropdown-item" className="dropdown-item"
type="button" type="button"
@ -401,7 +458,6 @@ const EmployeeList = () =>
)} )}
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>