Merge branch 'Issues_Jun_3W' of https://git.marcoaiot.com/admin/marco.pms.web into Issues_Jun_3W
This commit is contained in:
Pramod Mahajan
commit
237fea186b
@ -345,6 +345,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
loading={loading}
|
||||
IsActive={IsActive}
|
||||
setOpenBucketModal={setOpenBucketModal}
|
||||
contactsToExport={contacts}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
{/* <div className="row">vikas</div> */}
|
||||
<div className="row mx-0 px-0 align-items-center mt-2">
|
||||
<div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
|
||||
<input
|
||||
@ -38,12 +90,11 @@ const DirectoryPageHeader = ({
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: "200px" }}
|
||||
/>
|
||||
<div className="d-flex gap-2">
|
||||
<div className="d-flex gap-2 ">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${
|
||||
!listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
className={`btn btn-xs ${!listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(false)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
@ -55,9 +106,8 @@ const DirectoryPageHeader = ({
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${
|
||||
listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
className={`btn btn-xs ${listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(true)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
@ -76,9 +126,8 @@ const DirectoryPageHeader = ({
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className={`fa-solid fa-filter ms-1 fs-5 ${
|
||||
filtered > 0 ? "text-primary" : "text-muted"
|
||||
}`}
|
||||
className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"
|
||||
}`}
|
||||
></i>
|
||||
|
||||
{filtered > 0 && (
|
||||
@ -170,27 +219,63 @@ const DirectoryPageHeader = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
|
||||
<label className="switch switch-primary align-self-start mb-2">
|
||||
<div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end align-items-center gap-0">
|
||||
<label className="switch switch-primary mb-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="switch-input me-3"
|
||||
onChange={() => setIsActive(!IsActive)}
|
||||
value={IsActive}
|
||||
checked={!IsActive}
|
||||
disabled={loading}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className=" list-inline-item ms-12 ">
|
||||
<span className="ms-12 ">
|
||||
Show Inactive Contacts
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{/* Export Dropdown */}
|
||||
<div className="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-icon rounded-pill dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="Export options"
|
||||
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-sm"></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("print"); }}>
|
||||
<i className="bx bx-printer me-1"></i> Print
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("csv"); }}>
|
||||
<i className="bx bx-file me-1"></i> CSV
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("excel"); }}>
|
||||
<i className="bx bxs-file-export me-1"></i> Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
|
||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DirectoryPageHeader;
|
||||
export default DirectoryPageHeader;
|
||||
@ -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.
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@ -736,4 +724,4 @@ const handleAllEmployeesToggle = (e) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeeList;
|
||||
export default EmployeeList;
|
||||
Loading…
x
Reference in New Issue
Block a user