diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx index 975792f7..af6535b8 100644 --- a/src/pages/Directory/Directory.jsx +++ b/src/pages/Directory/Directory.jsx @@ -345,6 +345,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => { loading={loading} IsActive={IsActive} setOpenBucketModal={setOpenBucketModal} + contactsToExport={contacts} /> diff --git a/src/pages/Directory/DirectoryListTableHeader.jsx b/src/pages/Directory/DirectoryListTableHeader.jsx index 3c53e02d..a2321e9b 100644 --- a/src/pages/Directory/DirectoryListTableHeader.jsx +++ b/src/pages/Directory/DirectoryListTableHeader.jsx @@ -7,33 +7,38 @@ const DirectoryListTableHeader = ({ children }) => { - - - + + - - - + {children}
+
Name
-
+
Email
-
+
+
Phone
- Organization + + Organization + + Category + + Action CategoryAction
); }; + export default DirectoryListTableHeader; diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx index 119d7708..691a1699 100644 --- a/src/pages/Directory/DirectoryPageHeader.jsx +++ b/src/pages/Directory/DirectoryPageHeader.jsx @@ -1,4 +1,6 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; +import { ITEMS_PER_PAGE } from "../../utils/constants"; +import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils"; const DirectoryPageHeader = ({ searchText, @@ -17,17 +19,67 @@ const DirectoryPageHeader = ({ loading, IsActive, setOpenBucketModal, + contactsToExport, // This prop receives the paginated data (currentItems) }) => { - const [filtered, setFiltered] = useState(); + const [filtered, setFiltered] = useState(0); + + const handleExport = (type) => { + // Check if there's data to export + if (!contactsToExport || contactsToExport.length === 0) { + console.warn("No data to export. The current view is empty."); + // Optionally, you might want to show a user-friendly toast message here + // showToast("No data to export on the current page.", "info"); + return; + } + + // --- Core Change: Map contactsToExport to a simplified format --- + // const simplifiedContacts = contactsToExport.map(contact => ({ + // Name: contact.name || '', + // Organization: contact.organization || '', // Added Organization + // Email: contact.contactEmails && contact.contactEmails.length > 0 ? contact.contactEmails[0].emailAddress : '', + // Phone: contact.contactPhones && contact.contactPhones.length > 0 ? contact.contactPhones[0].phoneNumber : '', // Changed 'Contact' to 'Phone' for clarity + // Category: contact.contactCategory ? contact.contactCategory.name : '', // Changed 'Role' to 'Category' + // })); + + const simplifiedContacts = contactsToExport.map(contact => ({ + Name: contact.name || '', + Organization: contact.organization || '', + Email: contact.contactEmails && contact.contactEmails.length > 0 + ? contact.contactEmails.map(email => email.emailAddress).join(', ') + : '', + Phone: contact.contactPhones && contact.contactPhones.length > 0 + ? contact.contactPhones.map(phone => phone.phoneNumber).join(', ') + : '', + Category: contact.contactCategory ? contact.contactCategory.name : '', + })); + + console.log("Kaerik", simplifiedContacts) + switch (type) { + case "csv": + exportToCSV(simplifiedContacts, "directory_contacts"); + break; + case "excel": + exportToExcel(simplifiedContacts, "directory_contacts"); + break; + case "pdf": + exportToPDF(simplifiedContacts, "directory_contacts"); + break; + case "print": + printTable(simplifiedContacts, "directory_contacts"); + break; + default: + break; + } + }; useEffect(() => { setFiltered( tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length ); }, [tempSelectedBucketIds, tempSelectedCategoryIds]); + return ( <> - {/*
vikas
*/}
setSearchText(e.target.value)} style={{ width: "200px" }} /> -
+
-
-
); }; -export default DirectoryPageHeader; +export default DirectoryPageHeader; \ No newline at end of file diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx index 314db19d..002f09d2 100644 --- a/src/pages/employee/EmployeeList.jsx +++ b/src/pages/employee/EmployeeList.jsx @@ -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, @@ -28,10 +28,6 @@ import { newlineChars } from "pdf-lib"; import GlobalModel from "../../components/common/GlobalModel"; 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 ); @@ -41,9 +37,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 ); @@ -74,7 +69,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() : ""; @@ -106,13 +101,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; @@ -141,7 +135,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); @@ -156,7 +150,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); }) @@ -205,7 +199,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) => { @@ -230,10 +224,6 @@ const handleAllEmployeesToggle = (e) => { setIsDeleteModalOpen(true); }; - // useEffect(() => { - // setSelectedProject(selectedProjectId || ""); - // }, [selectedProjectId]); - useEffect(() => { if (!showAllEmployees) { recallEmployeeData(showInactive, selectedProjectId); @@ -244,9 +234,9 @@ const handleAllEmployeesToggle = (e) => { (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(() => { @@ -379,8 +369,6 @@ const handleAllEmployeesToggle = (e) => { 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. />
@@ -736,4 +724,4 @@ const handleAllEmployeesToggle = (e) => { ); }; -export default EmployeeList; +export default EmployeeList; \ No newline at end of file