UI changes in Directory filter and Refator the code of directory.
This commit is contained in:
parent
9dddba4e30
commit
aa358c5378
94
src/components/Directory/ContactsFilterPanel.jsx
Normal file
94
src/components/Directory/ContactsFilterPanel.jsx
Normal file
@ -0,0 +1,94 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import React, { useState, useCallback, useEffect } from "react";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import moment from "moment";
|
||||
|
||||
// replace these with your actual schema + defaults
|
||||
// import { contactsFilterSchema, defaultContactsFilterValues } from "./ContactsSchema";
|
||||
import { contactsFilterSchema,defaultContactsFilterValues } from "./contactsFilterSchema";
|
||||
import SelectMultiple from "../../components/common/SelectMultiple";
|
||||
|
||||
const ContactsFilterPanel = ({ onApply, buckets = [], categories = [] }) => {
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(contactsFilterSchema),
|
||||
defaultValues: defaultContactsFilterValues,
|
||||
});
|
||||
|
||||
const { handleSubmit, reset } = methods;
|
||||
|
||||
const handleClosePanel = useCallback(() => {
|
||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||
}, []);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(formData) => {
|
||||
onApply({
|
||||
...formData,
|
||||
// Remove startDate/endDate handling since date picker is gone
|
||||
});
|
||||
handleClosePanel();
|
||||
},
|
||||
[onApply, handleClosePanel]
|
||||
);
|
||||
|
||||
// ✅ Auto-close when navigating
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
handleClosePanel();
|
||||
}, [location, handleClosePanel]);
|
||||
|
||||
const onClear = useCallback(() => {
|
||||
reset(defaultContactsFilterValues);
|
||||
setResetKey((prev) => prev + 1);
|
||||
onApply(defaultContactsFilterValues);
|
||||
}, [onApply, reset]);
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="text-start mb-1">
|
||||
{/* Buckets */}
|
||||
<div className="text-start mb-2">
|
||||
<SelectMultiple
|
||||
name="bucketIds"
|
||||
label="Buckets"
|
||||
options={buckets}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div className="text-start mb-2">
|
||||
<SelectMultiple
|
||||
name="categoryIds"
|
||||
label="Categories"
|
||||
options={categories}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-xs"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-xs">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsFilterPanel;
|
||||
71
src/components/Directory/NotesFilterPanel.jsx
Normal file
71
src/components/Directory/NotesFilterPanel.jsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import React, { useState, useCallback } from "react";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { defaultNotesFilterValues,notesFilterSchema } from "./notesFilterSchema";
|
||||
import SelectMultiple from "../../components/common/SelectMultiple";
|
||||
|
||||
const NotesFilterPanel = ({ onApply, creators = [], organizations = [] }) => {
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(notesFilterSchema),
|
||||
defaultValues: defaultNotesFilterValues,
|
||||
});
|
||||
|
||||
const { handleSubmit, reset } = methods;
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(formData) => {
|
||||
onApply(formData);
|
||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||
},
|
||||
[onApply]
|
||||
);
|
||||
|
||||
const onClear = useCallback(() => {
|
||||
reset(defaultNotesFilterValues);
|
||||
setResetKey((prev) => prev + 1);
|
||||
onApply(defaultNotesFilterValues);
|
||||
}, [onApply, reset]);
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="text-start mb-2">
|
||||
<SelectMultiple
|
||||
name="creators"
|
||||
label="Created By"
|
||||
options={creators.map((c) => ({ id: c, name: c }))}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-start mb-2">
|
||||
<SelectMultiple
|
||||
name="organizations"
|
||||
label="Organizations"
|
||||
options={organizations.map((o) => ({ id: o, name: o }))}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-xs"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-xs">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotesFilterPanel;
|
||||
15
src/components/Directory/contactsFilterSchema.js
Normal file
15
src/components/Directory/contactsFilterSchema.js
Normal file
@ -0,0 +1,15 @@
|
||||
import { z } from "zod";
|
||||
|
||||
export const contactsFilterSchema = z.object({
|
||||
startDate: z.string().optional(),
|
||||
endDate: z.string().optional(),
|
||||
bucketIds: z.array(z.number()).optional(),
|
||||
categoryIds: z.array(z.number()).optional(),
|
||||
});
|
||||
|
||||
export const defaultContactsFilterValues = {
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
bucketIds: [],
|
||||
categoryIds: [],
|
||||
};
|
||||
11
src/components/Directory/notesFilterSchema.js
Normal file
11
src/components/Directory/notesFilterSchema.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { z } from "zod";
|
||||
|
||||
export const notesFilterSchema = z.object({
|
||||
creators: z.array(z.string()).optional(),
|
||||
organizations: z.array(z.string()).optional(),
|
||||
});
|
||||
|
||||
export const defaultNotesFilterValues = {
|
||||
creators: [],
|
||||
organizations: [],
|
||||
};
|
||||
@ -134,9 +134,14 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
setSelectedContact(null);
|
||||
setOpen_contact(null);
|
||||
};
|
||||
const [selectedCategoryIds, setSelectedCategoryIds] = useState(
|
||||
contactCategory.map((category) => category.id)
|
||||
);
|
||||
// const [selectedCategoryIds, setSelectedCategoryIds] = useState(
|
||||
// contactCategory.map((category) => category.id)
|
||||
// );
|
||||
|
||||
const [selectedCategoryIds, setSelectedCategoryIds] = useState([]);
|
||||
const filtered = tempSelectedBucketIds.length + tempSelectedCategoryIds.length;
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setContactList(contacts);
|
||||
@ -200,13 +205,21 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
setSelectedCategoryIds(tempSelectedCategoryIds);
|
||||
};
|
||||
|
||||
// const clearFilter = () => {
|
||||
// setTempSelectedBucketIds([]);
|
||||
// setTempSelectedCategoryIds([]);
|
||||
// setSelectedBucketIds([]);
|
||||
// setSelectedCategoryIds([]);
|
||||
// };
|
||||
const clearFilter = () => {
|
||||
setTempSelectedBucketIds([]);
|
||||
setTempSelectedCategoryIds([]);
|
||||
setSelectedBucketIds([]);
|
||||
setSelectedCategoryIds([]);
|
||||
setFilterAppliedNotes([]); // reset notes filter
|
||||
};
|
||||
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
filteredContacts,
|
||||
ITEMS_PER_PAGE
|
||||
@ -351,8 +364,11 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
loading={loading}
|
||||
IsActive={IsActive}
|
||||
setOpenBucketModal={setOpenBucketModal}
|
||||
contactsToExport={contacts}
|
||||
notesToExport={notes}
|
||||
// contactsToExport={contacts}
|
||||
// notesToExport={notes}
|
||||
filtered={filtered}
|
||||
contactsToExport={filteredContacts}
|
||||
notesToExport={filterAppliedNotes.length > 0 ? filterAppliedNotes : notes}
|
||||
selectedNoteNames={selectedNoteNames}
|
||||
setSelectedNoteNames={setSelectedNoteNames}
|
||||
notesForFilter={notes}
|
||||
@ -395,7 +411,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
)}
|
||||
|
||||
{viewType === "card" && (
|
||||
<div className="row mt-10">
|
||||
<div className="row mt-5">
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<div
|
||||
@ -427,7 +443,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewType === "notes" && (
|
||||
{/* {viewType === "notes" && (
|
||||
<div className="mt-0">
|
||||
<NotesCardViewDirectory
|
||||
notes={notes}
|
||||
@ -437,8 +453,21 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
filterAppliedNotes={filterAppliedNotes}
|
||||
/>
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
{viewType === "notes" && (
|
||||
<div className="mt-0">
|
||||
<NotesCardViewDirectory
|
||||
notes={filterAppliedNotes.length > 0 ? filterAppliedNotes : notes}
|
||||
setNotesForFilter={setNotes}
|
||||
searchText={searchText}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
filterAppliedNotes={filterAppliedNotes}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading &&
|
||||
viewType !== "notes" &&
|
||||
@ -489,4 +518,4 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Directory;
|
||||
export default Directory;
|
||||
|
||||
@ -1,591 +1,288 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import NotesFilterPanel from "../../components/Directory/NotesFilterPanel";
|
||||
import ContactsFilterPanel from "../../components/Directory/ContactsFilterPanel";
|
||||
|
||||
const DirectoryPageHeader = ({
|
||||
searchText,
|
||||
setSearchText,
|
||||
setIsActive,
|
||||
viewType,
|
||||
setViewType,
|
||||
filteredBuckets,
|
||||
tempSelectedBucketIds,
|
||||
handleTempBucketChange,
|
||||
filteredCategories,
|
||||
tempSelectedCategoryIds,
|
||||
handleTempCategoryChange,
|
||||
clearFilter,
|
||||
applyFilter,
|
||||
loading,
|
||||
IsActive,
|
||||
contactsToExport,
|
||||
notesToExport,
|
||||
selectedNoteNames,
|
||||
setSelectedNoteNames,
|
||||
notesForFilter,
|
||||
setFilterAppliedNotes
|
||||
searchText,
|
||||
setSearchText,
|
||||
setIsActive,
|
||||
viewType,
|
||||
setViewType,
|
||||
filteredBuckets,
|
||||
tempSelectedBucketIds,
|
||||
filteredCategories,
|
||||
tempSelectedCategoryIds,
|
||||
loading,
|
||||
IsActive,
|
||||
contactsToExport,
|
||||
notesToExport,
|
||||
notesForFilter,
|
||||
setFilterAppliedNotes,
|
||||
setAppliedContactFilters,
|
||||
}) => {
|
||||
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([]);
|
||||
const [filteredCount, setFilteredCount] = useState(0);
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
|
||||
useEffect(() => {
|
||||
setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
|
||||
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
||||
// 🟢 Count filters for badge
|
||||
useEffect(() => {
|
||||
setFilteredCount(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
|
||||
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
||||
|
||||
// New state to track active filters for notes
|
||||
const [notesFilterCount, setNotesFilterCount] = useState(0);
|
||||
// ----------------- EXPORT HANDLER -----------------
|
||||
const handleExport = (type) => {
|
||||
let dataToExport = [];
|
||||
|
||||
useEffect(() => {
|
||||
// Calculate the number of active filters for notes
|
||||
setNotesFilterCount(selectedCreators.length + selectedOrgs.length);
|
||||
}, [selectedCreators, selectedOrgs]);
|
||||
if (viewType === "notes") {
|
||||
if (!notesToExport || notesToExport.length === 0) return;
|
||||
|
||||
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]);
|
||||
const decodeHtmlEntities = (html) => {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.innerHTML = html;
|
||||
return textarea.value;
|
||||
};
|
||||
|
||||
// Separate effect to clear selection only when switching away from notes
|
||||
useEffect(() => {
|
||||
if (viewType !== "notes" && selectedNoteNames.length > 0) {
|
||||
setSelectedNoteNames([]);
|
||||
}
|
||||
}, [viewType]);
|
||||
const cleanNoteText = (html) => {
|
||||
if (!html) return "";
|
||||
const stripped = html.replace(/<[^>]+>/g, "");
|
||||
const decoded = decodeHtmlEntities(stripped);
|
||||
return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const creatorsSet = new Set();
|
||||
const orgsSet = new Set();
|
||||
const cleanName = (name) => {
|
||||
if (!name) return "";
|
||||
return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
|
||||
};
|
||||
|
||||
notesForFilter.forEach((note) => {
|
||||
const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
|
||||
if (creator) creatorsSet.add(creator);
|
||||
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) return;
|
||||
|
||||
const org = note.organizationName;
|
||||
if (org) orgsSet.add(org);
|
||||
});
|
||||
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(", ") || "",
|
||||
}));
|
||||
}
|
||||
|
||||
setAllCreators([...creatorsSet].sort());
|
||||
setAllOrganizations([...orgsSet].sort());
|
||||
setFilteredOrganizations([...orgsSet].sort());
|
||||
}, [notesForFilter])
|
||||
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}`;
|
||||
|
||||
const handleToggleNoteName = (name) => {
|
||||
setSelectedNoteNames(prevSelectedNames => {
|
||||
if (prevSelectedNames.includes(name)) {
|
||||
return prevSelectedNames.filter(n => n !== name);
|
||||
} else {
|
||||
return [...prevSelectedNames, name];
|
||||
}
|
||||
});
|
||||
};
|
||||
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 updateFilteredOrganizations = () => {
|
||||
if (selectedCreators.length === 0) {
|
||||
setFilteredOrganizations(allOrganizations);
|
||||
return;
|
||||
}
|
||||
// ----------------- FILTER PANELS -----------------
|
||||
const handleApplyContactsFilter = useCallback(
|
||||
(values) => {
|
||||
setAppliedContactFilters(values);
|
||||
},
|
||||
[setAppliedContactFilters]
|
||||
);
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
const handleApplyNotesFilter = useCallback(
|
||||
(values) => {
|
||||
setFilterAppliedNotes(values);
|
||||
},
|
||||
[setFilterAppliedNotes]
|
||||
);
|
||||
|
||||
// dynamically switch offcanvas filter panel
|
||||
const filterPanelElement = useMemo(() => {
|
||||
if (viewType === "notes") {
|
||||
return <NotesFilterPanel onApply={handleApplyNotesFilter} notes={notesForFilter} />;
|
||||
}
|
||||
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" : ""} fs-6`}
|
||||
onClick={() => setViewType("notes")}
|
||||
type="button"
|
||||
>
|
||||
<i className="bx bx-note me-1"></i> Notes
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<button
|
||||
// Corrected: Apply 'active' if viewType is either 'card' or 'list'
|
||||
className={`nav-link ${viewType === "card" || viewType === "list" ? "active" : ""} fs-6`}
|
||||
onClick={() => setViewType("card")} // You might want to default to 'card' when switching to contacts
|
||||
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-2">
|
||||
<div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-2">
|
||||
|
||||
<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", height: "30px" }}
|
||||
/>
|
||||
|
||||
{/* Filter by funnel icon for Notes view */}
|
||||
{viewType === "notes" && (
|
||||
<div className="dropdown" 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={`bx bx-slider-alt ${notesFilterCount > 0 ? "text-primary" : "text-muted"}`}></i>
|
||||
{notesFilterCount > 0 && (
|
||||
<span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
|
||||
{notesFilterCount}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
|
||||
<div className="dropdown-menu p-0" style={{ minWidth: "550px" }}>
|
||||
{/* Scrollable Filter Content */}
|
||||
<div
|
||||
className="p-3"
|
||||
style={{
|
||||
maxHeight: "300px",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
whiteSpace: "normal"
|
||||
}}
|
||||
>
|
||||
{allCreators.length === 0 && filteredOrganizations.length === 0 ? (
|
||||
<div className="text-center text-muted py-5">
|
||||
No filter found
|
||||
</div>
|
||||
) : (
|
||||
<div className="d-flex gap-3">
|
||||
{/* Created By */}
|
||||
<div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
|
||||
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
|
||||
<p className="text-muted mb-2 pt-2">Created By</p>
|
||||
</div>
|
||||
{allCreators.map((name, idx) => (
|
||||
<div className="form-check mb-1" key={`creator-${idx}`}>
|
||||
<input
|
||||
className="form-check-input form-check-input-sm"
|
||||
type="checkbox"
|
||||
id={`creator-${idx}`}
|
||||
checked={selectedCreators.includes(name)}
|
||||
onChange={() => handleToggleCreator(name)}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
<label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
|
||||
{name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Organization */}
|
||||
<div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden" }}>
|
||||
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
|
||||
<p className="text-muted mb-2 pt-2">Organization</p>
|
||||
</div>
|
||||
{filteredOrganizations.map((org, idx) => (
|
||||
<div className="form-check mb-1" key={`org-${idx}`}>
|
||||
<input
|
||||
className="form-check-input form-check-input-sm"
|
||||
type="checkbox"
|
||||
id={`org-${idx}`}
|
||||
checked={selectedOrgs.includes(org)}
|
||||
onChange={() => handleToggleOrg(org)}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
<label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
|
||||
{org}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Sticky Footer Buttons */}
|
||||
<div
|
||||
className="d-flex justify-content-end gap-2 p-2 "
|
||||
style={{
|
||||
background: "#fff",
|
||||
position: "sticky",
|
||||
bottom: 0
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className="btn btn-xs btn-secondary"
|
||||
onClick={() => {
|
||||
setSelectedCreators([]);
|
||||
setSelectedOrgs([]);
|
||||
setFilteredOrganizations(allOrganizations);
|
||||
setFilterAppliedNotes(notesForFilter);
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs 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-sm p-1 ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
|
||||
onClick={() => setViewType("card")}
|
||||
>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
|
||||
onClick={() => setViewType("list")}
|
||||
>
|
||||
<i className="bx bx-list-ul"></i>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filter by funnel icon for Contacts view (retains numerical badge) */}
|
||||
{viewType !== "notes" && (
|
||||
<div className="dropdown" 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={`bx bx-slider-alt ${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>
|
||||
|
||||
{filteredBuckets.length === 0 && filteredCategories.length === 0 ? (
|
||||
<div className="text-center text-muted py-5">
|
||||
No filter found
|
||||
</div>
|
||||
) : (
|
||||
<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 form-check-input-sm"
|
||||
type="checkbox"
|
||||
id={`bucket-${id}`}
|
||||
checked={tempSelectedBucketIds.includes(id)}
|
||||
onChange={() => handleTempBucketChange(id)}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
<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 form-check-input-sm"
|
||||
type="checkbox"
|
||||
id={`cat-${id}`}
|
||||
checked={tempSelectedCategoryIds.includes(id)}
|
||||
onChange={() => handleTempCategoryChange(id)}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
<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={(e) => {
|
||||
clearFilter();
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-primary"
|
||||
onClick={(e) => {
|
||||
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>
|
||||
</>
|
||||
<ContactsFilterPanel
|
||||
onApply={handleApplyContactsFilter}
|
||||
buckets={[]}
|
||||
categories={[]}
|
||||
/>
|
||||
);
|
||||
}, [viewType, notesForFilter, handleApplyContactsFilter, handleApplyNotesFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
setShowTrigger(true);
|
||||
setOffcanvasContent(
|
||||
viewType === "notes" ? "Notes Filters" : "Contacts Filters",
|
||||
filterPanelElement
|
||||
);
|
||||
return () => {
|
||||
setShowTrigger(false);
|
||||
setOffcanvasContent("", null);
|
||||
};
|
||||
}, [viewType, filterPanelElement]);
|
||||
|
||||
// ----------------- UI -----------------
|
||||
return (
|
||||
<>
|
||||
{/* Top Tabs */}
|
||||
<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">
|
||||
<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">
|
||||
<button
|
||||
className={`nav-link ${viewType !== "notes" ? "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" />
|
||||
|
||||
{/* Search + Filter Trigger + View Toggle */}
|
||||
<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-2">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control"
|
||||
placeholder={viewType === "notes" ? "Search Notes..." : "Search Contacts..."}
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: "200px", height: "30px" }}
|
||||
/>
|
||||
|
||||
{/* View toggles */}
|
||||
{viewType !== "notes" && (
|
||||
<div className="d-flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
|
||||
onClick={() => setViewType("card")}
|
||||
>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
|
||||
onClick={() => setViewType("list")}
|
||||
>
|
||||
<i className="bx bx-list-ul"></i>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Export + Toggle inactive */}
|
||||
<div className="col-12 col-md-6 mb-2 px-5 d-flex justify-content-end align-items-center gap-2">
|
||||
{(viewType === "card" || viewType === "list") && (
|
||||
<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"
|
||||
>
|
||||
<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;
|
||||
Loading…
x
Reference in New Issue
Block a user