502 lines
18 KiB
JavaScript
502 lines
18 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
|
|
|
|
const DirectoryPageHeader = ({
|
|
searchText,
|
|
setSearchText,
|
|
setIsActive,
|
|
viewType,
|
|
setViewType,
|
|
filteredBuckets,
|
|
tempSelectedBucketIds,
|
|
handleTempBucketChange,
|
|
filteredCategories,
|
|
tempSelectedCategoryIds,
|
|
handleTempCategoryChange,
|
|
clearFilter,
|
|
applyFilter,
|
|
loading,
|
|
IsActive,
|
|
contactsToExport,
|
|
notesToExport,
|
|
selectedNoteNames,
|
|
setSelectedNoteNames,
|
|
notesForFilter,
|
|
setFilterAppliedNotes
|
|
}) => {
|
|
const [filtered, setFiltered] = useState(0);
|
|
const [filteredNotes, setFilteredNotes] = useState([]);
|
|
const [noteCreators, setNoteCreators] = useState([]);
|
|
const [allCreators, setAllCreators] = useState([]);
|
|
const [allOrganizations, setAllOrganizations] = useState([]);
|
|
const [filteredOrganizations, setFilteredOrganizations] = useState([]);
|
|
const [selectedCreators, setSelectedCreators] = useState([]);
|
|
const [selectedOrgs, setSelectedOrgs] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
|
|
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
|
|
|
|
|
useEffect(() => {
|
|
if (viewType === "notes") {
|
|
if (notesToExport && notesToExport.length > 0) {
|
|
const uniqueNames = [...new Set(notesToExport.map(note => {
|
|
const firstName = note.createdBy?.firstName || "";
|
|
const lastName = note.createdBy?.lastName || "";
|
|
return `${firstName} ${lastName}`.trim();
|
|
}).filter(name => name !== ""))];
|
|
setNoteCreators(uniqueNames.sort());
|
|
} else {
|
|
setNoteCreators([]);
|
|
}
|
|
} else {
|
|
setNoteCreators([]);
|
|
}
|
|
}, [notesToExport, viewType]);
|
|
|
|
// Separate effect to clear selection only when switching away from notes
|
|
useEffect(() => {
|
|
if (viewType !== "notes" && selectedNoteNames.length > 0) {
|
|
setSelectedNoteNames([]);
|
|
}
|
|
}, [viewType]);
|
|
|
|
useEffect(() => {
|
|
const creatorsSet = new Set();
|
|
const orgsSet = new Set();
|
|
|
|
notesForFilter.forEach((note) => {
|
|
const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
|
|
if (creator) creatorsSet.add(creator);
|
|
|
|
const org = note.organizationName;
|
|
if (org) orgsSet.add(org);
|
|
});
|
|
|
|
setAllCreators([...creatorsSet].sort());
|
|
setAllOrganizations([...orgsSet].sort());
|
|
setFilteredOrganizations([...orgsSet].sort());
|
|
}, [notesForFilter])
|
|
|
|
|
|
const handleToggleNoteName = (name) => {
|
|
setSelectedNoteNames(prevSelectedNames => {
|
|
if (prevSelectedNames.includes(name)) {
|
|
return prevSelectedNames.filter(n => n !== name);
|
|
} else {
|
|
return [...prevSelectedNames, name];
|
|
}
|
|
});
|
|
};
|
|
|
|
const updateFilteredOrganizations = () => {
|
|
if (selectedCreators.length === 0) {
|
|
setFilteredOrganizations(allOrganizations);
|
|
return;
|
|
}
|
|
|
|
const filteredOrgsSet = new Set();
|
|
notesForFilter.forEach((note) => {
|
|
const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
|
|
if (selectedCreators.includes(creator)) {
|
|
if (note.organizationName) {
|
|
filteredOrgsSet.add(note.organizationName);
|
|
}
|
|
}
|
|
});
|
|
|
|
setFilteredOrganizations([...filteredOrgsSet].sort());
|
|
};
|
|
|
|
const handleToggleCreator = (name) => {
|
|
const updated = selectedCreators.includes(name)
|
|
? selectedCreators.filter((n) => n !== name)
|
|
: [...selectedCreators, name];
|
|
|
|
setSelectedCreators(updated);
|
|
};
|
|
|
|
const handleToggleOrg = (name) => {
|
|
const updated = selectedOrgs.includes(name)
|
|
? selectedOrgs.filter((n) => n !== name)
|
|
: [...selectedOrgs, name];
|
|
|
|
setSelectedOrgs(updated);
|
|
};
|
|
|
|
useEffect(() => {
|
|
updateFilteredOrganizations();
|
|
}, [selectedCreators]);
|
|
|
|
const handleExport = (type) => {
|
|
let dataToExport = [];
|
|
|
|
if (viewType === "notes") {
|
|
if (!notesToExport || notesToExport.length === 0) {
|
|
console.warn("No notes to export.");
|
|
return;
|
|
}
|
|
|
|
const decodeHtmlEntities = (html) => {
|
|
const textarea = document.createElement("textarea");
|
|
textarea.innerHTML = html;
|
|
return textarea.value;
|
|
};
|
|
|
|
const cleanNoteText = (html) => {
|
|
if (!html) return "";
|
|
const stripped = html.replace(/<[^>]+>/g, "");
|
|
const decoded = decodeHtmlEntities(stripped);
|
|
return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
|
|
};
|
|
|
|
const cleanName = (name) => {
|
|
if (!name) return "";
|
|
return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
|
|
};
|
|
|
|
dataToExport = notesToExport.map(note => ({
|
|
"Name": cleanName(`${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`),
|
|
"Notes": cleanNoteText(note.note),
|
|
"Created At": note.createdAt
|
|
? new Date(note.createdAt).toLocaleString("en-IN")
|
|
: "",
|
|
"Updated At": note.updatedAt
|
|
? new Date(note.updatedAt).toLocaleString("en-IN")
|
|
: "",
|
|
"Updated By": cleanName(
|
|
`${note.updatedBy?.firstName || ""} ${note.updatedBy?.lastName || ""}`
|
|
),
|
|
}));
|
|
|
|
} else {
|
|
if (!contactsToExport || contactsToExport.length === 0) {
|
|
console.warn("No contacts to export.");
|
|
return;
|
|
}
|
|
|
|
dataToExport = contactsToExport.map(contact => ({
|
|
Name: contact.name || '',
|
|
Organization: contact.organization || '',
|
|
Email: contact.contactEmails?.map(email => email.emailAddress).join(', ') || '',
|
|
Phone: contact.contactPhones?.map(phone => phone.phoneNumber).join(', ') || '',
|
|
Category: contact.contactCategory?.name || '',
|
|
Tags: contact.tags?.map(tag => tag.name).join(', ') || '',
|
|
}));
|
|
}
|
|
|
|
const today = new Date();
|
|
const formattedDate = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}`;
|
|
|
|
const filename =
|
|
viewType === "notes"
|
|
? `Directory_Notes_${formattedDate}`
|
|
: `Directory_Contacts_${formattedDate}`;
|
|
|
|
switch (type) {
|
|
case "csv":
|
|
exportToCSV(dataToExport, filename);
|
|
break;
|
|
case "excel":
|
|
exportToExcel(dataToExport, filename);
|
|
break;
|
|
case "pdf":
|
|
exportToPDF(dataToExport, filename);
|
|
break;
|
|
case "print":
|
|
printTable(dataToExport, filename);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
const applyCombinedFilter = () => {
|
|
const lowerSearch = searchText?.toLowerCase() || "";
|
|
|
|
const filtered = notesForFilter.filter((noteItem) => {
|
|
const creator = `${noteItem.createdBy?.firstName || ""} ${noteItem.createdBy?.lastName || ""}`.trim();
|
|
const org = noteItem.organizationName;
|
|
|
|
const matchesCreator = selectedCreators.length === 0 || selectedCreators.includes(creator);
|
|
const matchesOrg = selectedOrgs.length === 0 || selectedOrgs.includes(org);
|
|
|
|
const plainNote = noteItem?.note?.replace(/<[^>]+>/g, "").toLowerCase();
|
|
|
|
const stringValues = [];
|
|
const extractStrings = (obj) => {
|
|
for (const key in obj) {
|
|
const value = obj[key];
|
|
if (typeof value === "string") {
|
|
stringValues.push(value.toLowerCase());
|
|
} else if (typeof value === "object" && value !== null) {
|
|
extractStrings(value);
|
|
}
|
|
}
|
|
};
|
|
extractStrings(noteItem);
|
|
stringValues.push(plainNote, creator.toLowerCase());
|
|
|
|
const matchesSearch = stringValues.some((val) => val.includes(lowerSearch));
|
|
|
|
return matchesCreator && matchesOrg && matchesSearch;
|
|
});
|
|
|
|
setFilteredNotes(filtered);
|
|
setFilterAppliedNotes(filtered);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="row mx-0 px-0 align-items-center mt-0">
|
|
<div className="col-12 col-md-6 mb-0 px-1 d-flex align-items-center gap-4">
|
|
<ul className="nav nav-tabs mb-0" role="tablist">
|
|
<li className="nav-item" role="presentation">
|
|
<button
|
|
className={`nav-link ${viewType === "notes" ? "active" : ""}`}
|
|
onClick={() => setViewType("notes")}
|
|
type="button"
|
|
>
|
|
<i className="bx bx-note me-1"></i> Notes
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" role="presentation">
|
|
<button
|
|
className={`nav-link ${viewType === "card" ? "active" : ""}`}
|
|
onClick={() => setViewType("card")}
|
|
type="button"
|
|
>
|
|
<i className="bx bx-user me-1"></i> Contacts
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<hr className="my-0 mb-2" style={{ borderTop: "1px solid #dee2e6" }} />
|
|
|
|
<div className="row mx-0 px-0 align-items-center mt-0">
|
|
<div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">
|
|
|
|
<input
|
|
type="search"
|
|
className="form-control me-0"
|
|
placeholder={viewType === "notes" ? "Search Notes..." : "Search Contact..."}
|
|
value={searchText}
|
|
onChange={(e) => setSearchText(e.target.value)}
|
|
style={{ width: "200px" }}
|
|
/>
|
|
|
|
{/* Filter by funnel icon for Notes view */}
|
|
{viewType === "notes" && (
|
|
<div className="dropdown" style={{ width: "fit-content", minWidth: "400px" }}> {/* Added minWidth here */}
|
|
<a
|
|
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i className={`fa-solid fa-filter ms-1 fs-5 ${selectedCreators.length > 0 || selectedOrgs.length > 0 ? "text-primary" : "text-muted"}`}></i>
|
|
{/* Removed the numerical badge for notes filter */}
|
|
</a>
|
|
|
|
<div className="dropdown-menu p-3" style={{ width: "300px", maxHeight: "400px", overflowY: "auto" }}>
|
|
<p className="text-muted mb-1">Created By</p>
|
|
{allCreators.map((name, idx) => (
|
|
<div className="form-check mb-1" key={`creator-${idx}`}>
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
id={`creator-${idx}`}
|
|
checked={selectedCreators.includes(name)}
|
|
onChange={() => handleToggleCreator(name)}
|
|
/>
|
|
<label className="form-check-label" htmlFor={`creator-${idx}`}>
|
|
{name}
|
|
</label>
|
|
</div>
|
|
))}
|
|
|
|
<p className="text-muted mt-3 mb-1">Organization</p>
|
|
{filteredOrganizations.map((org, idx) => (
|
|
<div className="form-check mb-1" key={`org-${idx}`}>
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
id={`org-${idx}`}
|
|
checked={selectedOrgs.includes(org)}
|
|
onChange={() => handleToggleOrg(org)}
|
|
/>
|
|
<label className="form-check-label" htmlFor={`org-${idx}`}>
|
|
{org}
|
|
</label>
|
|
</div>
|
|
))}
|
|
|
|
<div className="d-flex justify-content-between mt-2">
|
|
<button
|
|
className="btn btn-sm btn-outline-danger"
|
|
onClick={() => {
|
|
setSelectedCreators([]);
|
|
setSelectedOrgs([]);
|
|
setFilteredOrganizations(allOrganizations);
|
|
setFilterAppliedNotes(notesForFilter);
|
|
|
|
}}
|
|
>
|
|
Clear
|
|
</button>
|
|
<button className="btn btn-sm btn-primary" onClick={applyCombinedFilter}>
|
|
Apply Filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
|
|
{(viewType === "card" || viewType === "list") && (
|
|
<div className="d-flex gap-2">
|
|
|
|
<button
|
|
type="button"
|
|
className={`btn btn-xs ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
|
|
onClick={() => setViewType("card")}
|
|
>
|
|
<i className="bx bx-grid-alt"></i>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`btn btn-xs ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
|
|
onClick={() => setViewType("list")}
|
|
>
|
|
<i className="bx bx-list-ul me-1"></i>
|
|
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filter by funnel icon for Contacts view (retains numerical badge) */}
|
|
{viewType !== "notes" && (
|
|
<div className="dropdown-center" style={{ width: "fit-content" }}>
|
|
<a
|
|
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"}`}></i>
|
|
{filtered > 0 && (
|
|
<span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
|
|
{filtered}
|
|
</span>
|
|
)}
|
|
</a>
|
|
|
|
<ul className="dropdown-menu p-3" style={{ width: "700px" }}>
|
|
<p className="text-muted m-0 h6">Filter by</p>
|
|
|
|
<div className="d-flex flex-nowrap">
|
|
<div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
|
|
<p className="text-small mb-1">Buckets</p>
|
|
<div className="d-flex flex-wrap">
|
|
{filteredBuckets.map(({ id, name }) => (
|
|
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
id={`bucket-${id}`}
|
|
checked={tempSelectedBucketIds.includes(id)}
|
|
onChange={() => handleTempBucketChange(id)}
|
|
/>
|
|
<label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
|
|
{name}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="mt-1" style={{ flexBasis: "50%" }}>
|
|
<p className="text-small mb-1">Categories</p>
|
|
<div className="d-flex flex-wrap">
|
|
{filteredCategories.map(({ id, name }) => (
|
|
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
id={`cat-${id}`}
|
|
checked={tempSelectedCategoryIds.includes(id)}
|
|
onChange={() => handleTempCategoryChange(id)}
|
|
/>
|
|
<label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
|
|
{name}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-end gap-2 mt-1">
|
|
<button className="btn btn-xs btn-secondary" onClick={clearFilter}>Clear</button>
|
|
<button className="btn btn-xs btn-primary" onClick={applyFilter}>Apply Filter</button>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div className="col-12 col-md-6 mb-2 px-5 d-flex justify-content-end align-items-center gap-2">
|
|
{(viewType === "list" || viewType === "card") && (
|
|
<label className="switch switch-primary mb-0">
|
|
<input
|
|
type="checkbox"
|
|
className="switch-input me-3"
|
|
onChange={() => setIsActive(!IsActive)}
|
|
checked={!IsActive}
|
|
disabled={loading}
|
|
/>
|
|
<span className="switch-toggle-slider">
|
|
<span className="switch-on"></span>
|
|
<span className="switch-off"></span>
|
|
</span>
|
|
<span className="ms-12">Show Inactive Contacts</span>
|
|
</label>
|
|
)}
|
|
|
|
<div className="btn-group">
|
|
<button
|
|
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i className="bx bx-export me-2 bx-sm"></i>Export
|
|
</button>
|
|
<ul className="dropdown-menu">
|
|
<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>
|
|
{viewType !== "notes" && (
|
|
<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; |