Add email in employee list
This commit is contained in:
parent
1019e9a32f
commit
b1fd691f37
@ -4,100 +4,93 @@ 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 { useProjects } from "../../hooks/useProjects";
|
||||
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 [selectedProject, setSelectedProject] = useState("");
|
||||
const {projects, loading: projectLoading} = useProjects()
|
||||
const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES)
|
||||
const EmployeeList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
const [selectedProject, setSelectedProject] = useState("");
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES);
|
||||
|
||||
const {employees, loading,setLoading, error} = useEmployeesAllOrByProjectId( selectedProject );
|
||||
const [ projectsList, setProjectsList ] = useState(projects || [] );
|
||||
|
||||
const [employeeList,setEmployeeList] = useState([])
|
||||
const { employees, loading, setLoading, error } =
|
||||
useEmployeesAllOrByProjectId(selectedProject);
|
||||
const [projectsList, setProjectsList] = useState(projects || []);
|
||||
|
||||
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();
|
||||
setSearchText(value);
|
||||
|
||||
|
||||
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)
|
||||
? displayData.slice(indexOfFirstItem, indexOfLastItem)
|
||||
const currentItems = Array.isArray(displayData)
|
||||
? displayData.slice(indexOfFirstItem, indexOfLastItem)
|
||||
: [];
|
||||
|
||||
|
||||
const paginate = (pageNumber) => setCurrentPage(pageNumber);
|
||||
const totalPages = Array.isArray(displayData)
|
||||
? Math.ceil(displayData.length / itemsPerPage)
|
||||
: 0;
|
||||
|
||||
|
||||
|
||||
const openModal = () => {
|
||||
setIsCreateModalOpen(true);
|
||||
};
|
||||
const openModal = () => {
|
||||
setIsCreateModalOpen(true);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setIsCreateModalOpen(false);
|
||||
|
||||
const modalElement = document.getElementById("managerole-modal");
|
||||
if (modalElement) {
|
||||
modalElement.classList.remove("show");
|
||||
modalElement.style.display = "none";
|
||||
document.body.classList.remove("modal-open");
|
||||
document.querySelector(".modal-backdrop").remove();
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfigData = (config) => {
|
||||
setModelConfig(config);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (modelConfig !== null) {
|
||||
openModal();
|
||||
}
|
||||
}, [ modelConfig, isCreateModalOpen ] );
|
||||
|
||||
const closeModal = () => {
|
||||
setIsCreateModalOpen(false);
|
||||
|
||||
const modalElement = document.getElementById("managerole-modal");
|
||||
if (modalElement) {
|
||||
modalElement.classList.remove("show");
|
||||
modalElement.style.display = "none";
|
||||
document.body.classList.remove("modal-open");
|
||||
document.querySelector(".modal-backdrop").remove();
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfigData = (config) => {
|
||||
setModelConfig(config);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (modelConfig !== null) {
|
||||
openModal();
|
||||
}
|
||||
}, [modelConfig, isCreateModalOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -126,32 +119,30 @@ const EmployeeList = () =>
|
||||
className="dataTables_length text-start"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<label>
|
||||
<label>
|
||||
<select
|
||||
id="project-select"
|
||||
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>
|
||||
) : (
|
||||
<>
|
||||
id="project-select"
|
||||
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="">All Employees</option>
|
||||
{Array.isArray(projects) && projects.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{Array.isArray(projects) &&
|
||||
projects.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</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"
|
||||
@ -287,7 +290,7 @@ const EmployeeList = () =>
|
||||
>
|
||||
Role
|
||||
</th>
|
||||
|
||||
|
||||
<th
|
||||
className="sorting d-none d-md-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" }}
|
||||
@ -319,89 +324,140 @@ const EmployeeList = () =>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <tr>
|
||||
<tbody>
|
||||
{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>}
|
||||
|
||||
{(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>
|
||||
) )}
|
||||
|
||||
)}
|
||||
{!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>
|
||||
</table>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user