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

Merge pull request 'Adding Export button in Directory.' (#213) from Kartik_Task#512_Exportbutton into Issues_Jun_3W

Browse Source 
Reviewed-on: #213
This commit is contained in:
Gitea Admin 2025-06-23 12:28:45 +00:00
commit a682f20f81
2 changed files with 105 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Directory/Directory.jsx
View File

@ -345,6 +345,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
loading={loading}
IsActive={IsActive}
setOpenBucketModal={setOpenBucketModal}
contactsToExport={contacts}
/>
</div>
</div>

115
src/pages/Directory/DirectoryPageHeader.jsx
View File

@ -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,32 +19,81 @@ 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
type="search"
className="form-control"
className="form-control me-2"
placeholder="Search Contact..."
value={searchText}
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"
@ -55,8 +106,7 @@ 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"
@ -76,8 +126,7 @@ 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>
@ -170,23 +219,59 @@ 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>
</>