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

Ensured all table headers and cells are left-aligned for consistent layout and better readability. #214

Merged
admin merged 3 commits from Kartik_Enhancement#517 into Issues_Jun_3W 2025-06-23 12:30:17 +00:00
Conversation 2 Commits 3 Files Changed 2 +30 -37
2 changed files with 30 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/Directory/DirectoryListTableHeader.jsx
View File

@ -7,33 +7,38 @@ const DirectoryListTableHeader = ({ children }) => {
<table className="table px-2">
<thead>
<tr>
<th colSpan={2}>
<th colSpan={2} className="text-start">
<div className="d-flex align-items-center gap-1">
<span>Name</span>
</div>
</th>
<th className="px-2 text-start">
<div className="d-flex text-center align-items-center gap-1 justify-content-start">
<div className="d-flex align-items-center gap-1">
<span>Email</span>
</div>
</th>
<th className="mx-2">
<div className="d-flex align-items-center m-0 p-0 gap-1">
<th className="mx-2 text-start">
<div className="d-flex align-items-center gap-1">
<span>Phone</span>
</div>
</th>
<th colSpan={2} className="mx-2 ps-20">
Organization
<th colSpan={2} className="mx-2 ps-20 text-start">
<span>Organization</span>
</th>
<th className="mx-2 text-start">
<span>Category</span>
</th>
<th className="text-start">
<span>Action</span>
</th>
<th className="mx-2">Category</th>
<th>Action</th>
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto">
<tbody className="table-border-bottom-0 overflow-auto text-start">
{children}
</tbody>
</table>
</div>
);
};
export default DirectoryListTableHeader;

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

@ -6,13 +6,13 @@ 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 { useProfile } from "../../hooks/useProfile";
import { hasUserPermission } from "../../utils/authUtils";
import { useProjects } from "../../hooks/useProjects"; // Keep if you use projects elsewhere
import { useProfile } from "../../hooks/useProfile"; // Keep if you use profile elsewhere
import { hasUserPermission } from "../../utils/authUtils"; // Keep if you use this elsewhere
import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
import { clearCacheKey } from "../../slices/apiDataManager";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import SuspendEmp from "../../components/Employee/SuspendEmp";
import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
import {
exportToCSV,
exportToExcel,
@ -24,13 +24,9 @@ import ManageEmployee from "../../components/Employee/ManageEmployee";
import ConfirmModal from "../../components/common/ConfirmModal";
import { useSelector } from "react-redux";
import eventBus from "../../services/eventBus";
import { newlineChars } from "pdf-lib";
import { newlineChars } from "pdf-lib"; // Unused import, consider removing
const EmployeeList = () => {
// const selectedProjectId = useSelector((store) => store.localVariables.projectId);
// const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
// const { projects, loading: projectLoading } = useProjects();
const selectedProjectId = useSelector(
(store) => store.localVariables.projectId
);
@ -40,9 +36,8 @@ const EmployeeList = () => {
const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
const { employees, loading, setLoading, error, recallEmployeeData } =
// useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
useEmployeesAllOrByProjectId(
showAllEmployees ? null : selectedProjectId,
showAllEmployees ? null : selectedProjectId, // Use selectedProjectId here
showInactive
);
@ -73,7 +68,7 @@ const EmployeeList = () => {
}
const lowercasedText = text.toLowerCase();
return data.filter((item) => {
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
const email = item.email ? item.email.toLowerCase() : "";
const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
const jobRole = item.jobRole ? item.jobRole.toLowerCase() : "";
@ -105,13 +100,12 @@ const EmployeeList = () => {
setEmployeeList(sorted);
const results = applySearchFilter(sorted, searchText);
setFilteredData(results);
} else if (!loading && !employees) {
setEmployeeList([]);
setFilteredData([]);
}
}, [loading, employees, showAllEmployees, searchText, selectedProjectId]);
}, [loading, employees, showAllEmployees, searchText, selectedProjectId]); // Add selectedProjectId to dependencies
const displayData = filteredData;
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@ -140,7 +134,7 @@ const EmployeeList = () => {
}
setShowModal(false);
clearCacheKey("employeeProfile");
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
};
const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false);
@ -155,7 +149,7 @@ const EmployeeList = () => {
clearCacheKey("allInactiveEmployeeList");
clearCacheKey("employeeProfile");
// Recall data based on current filter states after deletion to refresh the table
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
setemployeeLodaing(false);
setIsDeleteModalOpen(false);
})
@ -204,7 +198,7 @@ const EmployeeList = () => {
const handleToggle = (e) => {
setShowInactive(e.target.checked);
recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject);
recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
};
const handleAllEmployeesToggle = (e) => {
@ -217,7 +211,7 @@ const EmployeeList = () => {
recallEmployeeData(false, selectedProjectId);
}
// recallEmployeeData(false, isChecked ? null : selectedProject);
// recallEmployeeData(false, isChecked ? null : selectedProject); // This line also used selectedProject
};
const handleEmployeeModel = (id) => {
@ -230,10 +224,6 @@ const EmployeeList = () => {
setIsDeleteModalOpen(true);
};
// useEffect(() => {
// setSelectedProject(selectedProjectId || "");
// }, [selectedProjectId]);
useEffect(() => {
if (!showAllEmployees) {
recallEmployeeData(showInactive, selectedProjectId);
@ -244,9 +234,9 @@ const EmployeeList = () => {
(msg) => {
if(employees.some((item) => item.id == msg.employeeId)){
setEmployeeList([]);
recallEmployeeData(showInactive);
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
}
},[employees]
},[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
);
useEffect(() => {
@ -370,8 +360,6 @@ const EmployeeList = () => {
className="form-control form-control-sm"
placeholder="Search User"
aria-controls="DataTables_Table_0"
// The 'disabled' attribute is intentionally removed here
// to keep the search box always active as requested.
/>
</label>
</div>
@ -727,4 +715,4 @@ const EmployeeList = () => {
);
};
export default EmployeeList;
export default EmployeeList;