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

Merge pull request 'Ensured all table headers and cells are left-aligned for consistent layout and better readability.' (#214) from Kartik_Enhancement#517 into Issues_Jun_3W

Browse Source 
Reviewed-on: #214
This commit is contained in:
Gitea Admin 2025-06-23 12:30:16 +00:00
commit 8f919436aa
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"> <table className="table px-2">
<thead> <thead>
<tr> <tr>
<th colSpan={2}> <th colSpan={2} className="text-start">
<div className="d-flex align-items-center gap-1"> <div className="d-flex align-items-center gap-1">
<span>Name</span> <span>Name</span>
</div> </div>
</th> </th>
<th className="px-2 text-start"> <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> <span>Email</span>
</div> </div>
</th> </th>
<th className="mx-2"> <th className="mx-2 text-start">
<div className="d-flex align-items-center m-0 p-0 gap-1"> <div className="d-flex align-items-center gap-1">
<span>Phone</span> <span>Phone</span>
</div> </div>
</th> </th>
<th colSpan={2} className="mx-2 ps-20"> <th colSpan={2} className="mx-2 ps-20 text-start">
Organization <span>Organization</span>
</th>
<th className="mx-2 text-start">
<span>Category</span>
</th>
<th className="text-start">
<span>Action</span>
</th> </th>
<th className="mx-2">Category</th>
<th>Action</th>
</tr> </tr>
</thead> </thead>
<tbody className="table-border-bottom-0 overflow-auto"> <tbody className="table-border-bottom-0 overflow-auto text-start">
{children} {children}
</tbody> </tbody>
</table> </table>
</div> </div>
); );
}; };
export default DirectoryListTableHeader; 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 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"; // Keep if you use projects elsewhere
import { useProfile } from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile"; // Keep if you use profile elsewhere
import { hasUserPermission } from "../../utils/authUtils"; import { hasUserPermission } from "../../utils/authUtils"; // Keep if you use this elsewhere
import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants"; import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
import { clearCacheKey } from "../../slices/apiDataManager"; import { clearCacheKey } from "../../slices/apiDataManager";
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import SuspendEmp from "../../components/Employee/SuspendEmp"; import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
import { import {
exportToCSV, exportToCSV,
exportToExcel, exportToExcel,
@ -24,13 +24,9 @@ import ManageEmployee from "../../components/Employee/ManageEmployee";
import ConfirmModal from "../../components/common/ConfirmModal"; import ConfirmModal from "../../components/common/ConfirmModal";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import { newlineChars } from "pdf-lib"; import { newlineChars } from "pdf-lib"; // Unused import, consider removing
const EmployeeList = () => { const EmployeeList = () => {
// const selectedProjectId = useSelector((store) => store.localVariables.projectId);
// const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
// const { projects, loading: projectLoading } = useProjects();
const selectedProjectId = useSelector( const selectedProjectId = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
); );
@ -40,9 +36,8 @@ const EmployeeList = () => {
const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES); const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
const { employees, loading, setLoading, error, recallEmployeeData } = const { employees, loading, setLoading, error, recallEmployeeData } =
// useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
useEmployeesAllOrByProjectId( useEmployeesAllOrByProjectId(
showAllEmployees ? null : selectedProjectId, showAllEmployees ? null : selectedProjectId, // Use selectedProjectId here
showInactive showInactive
); );
@ -73,7 +68,7 @@ const EmployeeList = () => {
} }
const lowercasedText = text.toLowerCase(); const lowercasedText = text.toLowerCase();
return data.filter((item) => { 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 email = item.email ? item.email.toLowerCase() : "";
const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : ""; const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; const jobRole = item.jobRole ? item.jobRole.toLowerCase() : "";
@ -105,13 +100,12 @@ const EmployeeList = () => {
setEmployeeList(sorted); setEmployeeList(sorted);
const results = applySearchFilter(sorted, searchText); const results = applySearchFilter(sorted, searchText);
setFilteredData(results); setFilteredData(results);
} else if (!loading && !employees) { } else if (!loading && !employees) {
setEmployeeList([]); setEmployeeList([]);
setFilteredData([]); setFilteredData([]);
} }
}, [loading, employees, showAllEmployees, searchText, selectedProjectId]); }, [loading, employees, showAllEmployees, searchText, selectedProjectId]); // Add selectedProjectId to dependencies
const displayData = filteredData; const displayData = filteredData;
const indexOfLastItem = currentPage * itemsPerPage; const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@ -140,7 +134,7 @@ const EmployeeList = () => {
} }
setShowModal(false); setShowModal(false);
clearCacheKey("employeeProfile"); clearCacheKey("employeeProfile");
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject); recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
}; };
const handleShow = () => setShowModal(true); const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false); const handleClose = () => setShowModal(false);
@ -155,7 +149,7 @@ const EmployeeList = () => {
clearCacheKey("allInactiveEmployeeList"); clearCacheKey("allInactiveEmployeeList");
clearCacheKey("employeeProfile"); clearCacheKey("employeeProfile");
// Recall data based on current filter states after deletion to refresh the table // 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); setemployeeLodaing(false);
setIsDeleteModalOpen(false); setIsDeleteModalOpen(false);
}) })
@ -204,7 +198,7 @@ const EmployeeList = () => {
const handleToggle = (e) => { const handleToggle = (e) => {
setShowInactive(e.target.checked); setShowInactive(e.target.checked);
recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject); recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
}; };
const handleAllEmployeesToggle = (e) => { const handleAllEmployeesToggle = (e) => {
@ -217,7 +211,7 @@ const EmployeeList = () => {
recallEmployeeData(false, selectedProjectId); recallEmployeeData(false, selectedProjectId);
} }
// recallEmployeeData(false, isChecked ? null : selectedProject); // recallEmployeeData(false, isChecked ? null : selectedProject); // This line also used selectedProject
}; };
const handleEmployeeModel = (id) => { const handleEmployeeModel = (id) => {
@ -230,10 +224,6 @@ const EmployeeList = () => {
setIsDeleteModalOpen(true); setIsDeleteModalOpen(true);
}; };
// useEffect(() => {
// setSelectedProject(selectedProjectId || "");
// }, [selectedProjectId]);
useEffect(() => { useEffect(() => {
if (!showAllEmployees) { if (!showAllEmployees) {
recallEmployeeData(showInactive, selectedProjectId); recallEmployeeData(showInactive, selectedProjectId);
@ -244,9 +234,9 @@ const EmployeeList = () => {
(msg) => { (msg) => {
if(employees.some((item) => item.id == msg.employeeId)){ if(employees.some((item) => item.id == msg.employeeId)){
setEmployeeList([]); setEmployeeList([]);
recallEmployeeData(showInactive); recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
} }
},[employees] },[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
); );
useEffect(() => { useEffect(() => {
@ -370,8 +360,6 @@ const EmployeeList = () => {
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Search User" placeholder="Search User"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
// The 'disabled' attribute is intentionally removed here
// to keep the search box always active as requested.
/> />
</label> </label>
</div> </div>
@ -727,4 +715,4 @@ const EmployeeList = () => {
); );
}; };
export default EmployeeList; export default EmployeeList;