From 056bd638694b6bd788780e5d95333e9e89f8ef97 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Fri, 20 Jun 2025 17:12:50 +0530 Subject: [PATCH 1/4] Adding Export button in Directory. --- src/pages/Directory/Directory.jsx | 1 + src/pages/Directory/DirectoryPageHeader.jsx | 123 +++++++++++++++++--- 2 files changed, 105 insertions(+), 19 deletions(-) diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx index eb348e10..fe013661 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/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx index 7de25693..cec3147a 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,33 +19,82 @@ 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 From 9f6d7580e3fdc24ceb2f1f101fc7e54616d26436 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Mon, 23 Jun 2025 12:22:16 +0530 Subject: [PATCH 2/4] Ensured all table headers and cells are left-aligned for consistent layout and better readability. --- .../Directory/DirectoryListTableHeader.jsx | 23 +++++++++++-------- src/pages/employee/EmployeeList.jsx | 2 +- 2 files changed, 15 insertions(+), 10 deletions(-) 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/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx index 0324ef63..60470bfd 100644 --- a/src/pages/employee/EmployeeList.jsx +++ b/src/pages/employee/EmployeeList.jsx @@ -73,7 +73,7 @@ const EmployeeList = () => { } const lowercasedText = text.toLowerCase(); return data.filter((item) => { - const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); + const fullName = `${item.firstName} ${item.lastName} ${item.lastName}`.toLowerCase(); const email = item.email ? item.email.toLowerCase() : ""; const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : ""; const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; From 589ba569f61f30f5a4c07f869af2fef45dc15f59 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Mon, 23 Jun 2025 16:46:13 +0530 Subject: [PATCH 3/4] Correction in search function in Employees. --- src/pages/employee/EmployeeList.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx index 60470bfd..884e95d2 100644 --- a/src/pages/employee/EmployeeList.jsx +++ b/src/pages/employee/EmployeeList.jsx @@ -73,7 +73,7 @@ const EmployeeList = () => { } const lowercasedText = text.toLowerCase(); return data.filter((item) => { - const fullName = `${item.firstName} ${item.lastName} ${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() : ""; From d8269cfbe8372451db9e2cb7c007250554328d95 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Mon, 23 Jun 2025 17:27:22 +0530 Subject: [PATCH 4/4] Changes in search employee when double error message is shown. --- src/pages/employee/EmployeeList.jsx | 42 +++++++++++------------------ 1 file changed, 15 insertions(+), 27 deletions(-) diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx index 884e95d2..c7d6a64f 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, @@ -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 ); @@ -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. /> @@ -727,4 +715,4 @@ const EmployeeList = () => { ); }; -export default EmployeeList; +export default EmployeeList; \ No newline at end of file