Add email in employee list
This commit is contained in:
parent
1019e9a32f
commit
b1fd691f37
@ -4,32 +4,31 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import ManageEmp from "../../components/Employee/ManageRole";
|
||||
import {useEmployeesAllOrByProjectId} from "../../hooks/useEmployees";
|
||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import {hasUserPermission} from "../../utils/authUtils";
|
||||
import {MANAGE_EMPLOYEES} from "../../utils/constants";
|
||||
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
|
||||
import { hasUserPermission } from "../../utils/authUtils";
|
||||
import { MANAGE_EMPLOYEES } from "../../utils/constants";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
|
||||
const EmployeeList = () =>
|
||||
{
|
||||
const {profile:loginUser}= useProfile()
|
||||
const EmployeeList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
const [selectedProject, setSelectedProject] = useState("");
|
||||
const {projects, loading: projectLoading} = useProjects()
|
||||
const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES)
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES);
|
||||
|
||||
const {employees, loading,setLoading, error} = useEmployeesAllOrByProjectId( selectedProject );
|
||||
const [ projectsList, setProjectsList ] = useState(projects || [] );
|
||||
const { employees, loading, setLoading, error } =
|
||||
useEmployeesAllOrByProjectId(selectedProject);
|
||||
const [projectsList, setProjectsList] = useState(projects || []);
|
||||
|
||||
const [employeeList,setEmployeeList] = useState([])
|
||||
const [employeeList, setEmployeeList] = useState([]);
|
||||
const [modelConfig, setModelConfig] = useState();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage] = useState(5);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
|
||||
const [searchText,setSearchText] = useState("")
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const navigate = useNavigate()
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSearch = (e) => {
|
||||
const value = e.target.value.toLowerCase();
|
||||
@ -38,27 +37,24 @@ const EmployeeList = () =>
|
||||
if (!employeeList.length) return;
|
||||
|
||||
const results = employeeList.filter((item) =>
|
||||
Object.values(item).some((field) =>
|
||||
field && field.toString().toLowerCase().includes(value)
|
||||
Object.values(item).some(
|
||||
(field) => field && field.toString().toLowerCase().includes(value)
|
||||
)
|
||||
);
|
||||
|
||||
setFilteredData(results);
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage( 1 )
|
||||
setCurrentPage(1);
|
||||
|
||||
if (!loading && Array.isArray(employees)) {
|
||||
setEmployeeList(employees);
|
||||
setFilteredData( employees );
|
||||
setFilteredData(employees);
|
||||
}
|
||||
|
||||
}, [loading, employees, selectedProject]);
|
||||
|
||||
|
||||
const displayData = searchText ? filteredData : employeeList
|
||||
const displayData = searchText ? filteredData : employeeList;
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = Array.isArray(displayData)
|
||||
@ -70,8 +66,6 @@ const EmployeeList = () =>
|
||||
? Math.ceil(displayData.length / itemsPerPage)
|
||||
: 0;
|
||||
|
||||
|
||||
|
||||
const openModal = () => {
|
||||
setIsCreateModalOpen(true);
|
||||
};
|
||||
@ -96,8 +90,7 @@ const EmployeeList = () =>
|
||||
if (modelConfig !== null) {
|
||||
openModal();
|
||||
}
|
||||
}, [ modelConfig, isCreateModalOpen ] );
|
||||
|
||||
}, [modelConfig, isCreateModalOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -129,20 +122,19 @@ const EmployeeList = () =>
|
||||
<label>
|
||||
<select
|
||||
id="project-select"
|
||||
onChange={(e)=>setSelectedProject(e.target.value)}
|
||||
onChange={(e) => setSelectedProject(e.target.value)}
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
value={selectedProject || ""}
|
||||
>
|
||||
{projectLoading ? (
|
||||
<option value="Loading" >
|
||||
Loading...
|
||||
</option>
|
||||
<option value="Loading">Loading...</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}>
|
||||
{item.name}
|
||||
</option>
|
||||
@ -151,7 +143,6 @@ const EmployeeList = () =>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -224,8 +215,9 @@ const EmployeeList = () =>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
|
||||
className={`btn btn-sm add-new btn-primary ${!ManageEmployee && 'd-none'}`}
|
||||
className={`btn btn-sm add-new btn-primary ${
|
||||
!ManageEmployee && "d-none"
|
||||
}`}
|
||||
tabIndex="0"
|
||||
type="button"
|
||||
>
|
||||
@ -265,6 +257,17 @@ const EmployeeList = () =>
|
||||
>
|
||||
Name
|
||||
</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
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
@ -309,7 +312,9 @@ const EmployeeList = () =>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className={`sorting_disabled ${!ManageEmployee && 'd-none'}`}
|
||||
className={`sorting_disabled ${
|
||||
!ManageEmployee && "d-none"
|
||||
}`}
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
style={{ width: "50px" }}
|
||||
@ -320,15 +325,37 @@ const EmployeeList = () =>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <tr>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<p>Loading...</p>
|
||||
</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>}
|
||||
</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) => (
|
||||
{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">
|
||||
@ -338,8 +365,11 @@ const EmployeeList = () =>
|
||||
></Avatar>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
|
||||
onClick={()=>navigate(`/employee/${item.id}?for=account`)}
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/employee/${item.id}?for=account`
|
||||
)
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<span className="fw-medium">
|
||||
@ -349,6 +379,19 @@ const EmployeeList = () =>
|
||||
</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>
|
||||
@ -357,7 +400,8 @@ const EmployeeList = () =>
|
||||
</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"}
|
||||
<i className="bx bxs-wrench text-success me-2"></i>
|
||||
{item.jobRole || "Not Assign Yet"}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
@ -375,17 +419,30 @@ const EmployeeList = () =>
|
||||
{ManageEmployee && (
|
||||
<td className="text-end">
|
||||
<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>
|
||||
</button>
|
||||
<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
|
||||
</button>
|
||||
<Link to={`/employee/manage/${item.id}`} className="dropdown-item">
|
||||
<Link
|
||||
to={`/employee/manage/${item.id}`}
|
||||
className="dropdown-item"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
<button className="dropdown-item">Suspend</button>
|
||||
<button className="dropdown-item">
|
||||
Suspend
|
||||
</button>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
type="button"
|
||||
@ -400,8 +457,7 @@ const EmployeeList = () =>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
) )}
|
||||
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user