In directory Creating a tab view and add notes view.
This commit is contained in:
parent
f932a4c5a4
commit
3e0b4edf4a
165
src/components/Directory/NoteCardDirectoryEditable.jsx
Normal file
165
src/components/Directory/NoteCardDirectoryEditable.jsx
Normal file
@ -0,0 +1,165 @@
|
||||
import React, { useState } from "react";
|
||||
import ReactQuill from "react-quill";
|
||||
import moment from "moment";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
||||
import "../common/TextEditor/Editor.css";
|
||||
|
||||
const NoteCardDirectoryEditable = ({
|
||||
noteItem,
|
||||
contactId,
|
||||
onNoteUpdate,
|
||||
onNoteDelete,
|
||||
}) => {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editorValue, setEditorValue] = useState(noteItem.note);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isRestoring, setIsRestoring] = useState(false);
|
||||
|
||||
const handleUpdateNote = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const payload = {
|
||||
id: noteItem.id,
|
||||
note: editorValue,
|
||||
contactId,
|
||||
};
|
||||
const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
|
||||
|
||||
// Optional cache update
|
||||
const cachedContactProfile = getCachedData("Contact Profile");
|
||||
if (cachedContactProfile?.contactId === contactId) {
|
||||
const updatedCache = {
|
||||
...cachedContactProfile,
|
||||
data: {
|
||||
...cachedContactProfile.data,
|
||||
notes: cachedContactProfile.data.notes.map((note) =>
|
||||
note.id === noteItem.id ? response.data : note
|
||||
),
|
||||
},
|
||||
};
|
||||
cacheData("Contact Profile", updatedCache);
|
||||
}
|
||||
|
||||
// Notify parent
|
||||
onNoteUpdate?.(response.data);
|
||||
setEditing(false);
|
||||
showToast("Note updated successfully", "success");
|
||||
} catch (error) {
|
||||
showToast("Failed to update note", "error");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteOrRestore = async (shouldRestore) => {
|
||||
try {
|
||||
shouldRestore ? setIsRestoring(true) : setIsDeleting(true);
|
||||
await DirectoryRepository.DeleteNote(noteItem.id, shouldRestore);
|
||||
onNoteDelete?.(noteItem.id);
|
||||
showToast(`Note ${shouldRestore ? "restored" : "deleted"} successfully`, "success");
|
||||
} catch (error) {
|
||||
showToast("Failed to process note", "error");
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
setIsRestoring(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="card p-1 shadow-sm border-1 mb-4 rounded"
|
||||
style={{
|
||||
width: "100%",
|
||||
background: noteItem.isActive ? "#fff" : "#f8f6f6",
|
||||
}}
|
||||
key={noteItem.id}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-1">
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={noteItem?.createdBy?.firstName}
|
||||
lastName={noteItem?.createdBy?.lastName}
|
||||
className="m-0"
|
||||
/>
|
||||
<div className="d-flex flex-column ms-2">
|
||||
<span className="fw-semibold small">
|
||||
{noteItem?.createdBy?.firstName} {noteItem?.createdBy?.lastName}
|
||||
</span>
|
||||
<span className="text-muted" style={{ fontSize: "10px" }}>
|
||||
{moment
|
||||
.utc(noteItem?.createdAt)
|
||||
.add(5, "hours")
|
||||
.add(30, "minutes")
|
||||
.format("MMMM DD, YYYY [at] hh:mm A")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Action Icons */}
|
||||
<div>
|
||||
{noteItem.isActive ? (
|
||||
<>
|
||||
<i
|
||||
className="bx bxs-edit bx-sm me-2 text-primary cursor-pointer"
|
||||
onClick={() => setEditing(true)}
|
||||
title="Edit"
|
||||
></i>
|
||||
{!isDeleting ? (
|
||||
<i
|
||||
className="bx bx-trash bx-sm me-2 text-danger cursor-pointer"
|
||||
onClick={() => handleDeleteOrRestore(false)}
|
||||
title="Delete"
|
||||
></i>
|
||||
) : (
|
||||
<div className="spinner-border spinner-border-sm text-danger" />
|
||||
)}
|
||||
</>
|
||||
) : isRestoring ? (
|
||||
<i className="bx bx-loader-alt bx-spin text-primary"></i>
|
||||
) : (
|
||||
<i
|
||||
className="bx bx-recycle me-2 text-success cursor-pointer"
|
||||
onClick={() => handleDeleteOrRestore(true)}
|
||||
title="Restore"
|
||||
></i>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<hr className="mt-0 mb-2" />
|
||||
{/* Editor or Content */}
|
||||
{editing ? (
|
||||
<>
|
||||
<ReactQuill
|
||||
value={editorValue}
|
||||
onChange={setEditorValue}
|
||||
theme="snow"
|
||||
className="compact-editor"
|
||||
/>
|
||||
<div className="d-flex justify-content-end gap-3 mt-2">
|
||||
<span
|
||||
className="text-secondary cursor-pointer"
|
||||
onClick={() => setEditing(false)}
|
||||
>
|
||||
Cancel
|
||||
</span>
|
||||
<span
|
||||
className="text-primary cursor-pointer"
|
||||
onClick={handleUpdateNote}
|
||||
>
|
||||
{isLoading ? "Saving..." : "Submit"}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="px-1 pb-2 text-start" dangerouslySetInnerHTML={{ __html: noteItem.note }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoteCardDirectoryEditable;
|
||||
140
src/components/Directory/NotesCardViewDirectory.jsx
Normal file
140
src/components/Directory/NotesCardViewDirectory.jsx
Normal file
@ -0,0 +1,140 @@
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
||||
import NoteCardDirectoryEditable from "./NoteCardDirectoryEditable";
|
||||
|
||||
const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
|
||||
const [allNotes, setAllNotes] = useState([]);
|
||||
const [filteredNotes, setFilteredNotes] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const pageSize = 20;
|
||||
|
||||
const fetchNotes = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await DirectoryRepository.GetNotes(1000, 1); // fetch all for search
|
||||
const fetchedNotes = response.data?.data || [];
|
||||
setAllNotes(fetchedNotes);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch notes:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchNotes();
|
||||
}, []);
|
||||
|
||||
// Search + update pagination + exportable data
|
||||
useEffect(() => {
|
||||
const lowerSearch = searchText?.toLowerCase() || "";
|
||||
const filtered = allNotes.filter((noteItem) => {
|
||||
const plainNote = noteItem?.note?.replace(/<[^>]+>/g, "").toLowerCase();
|
||||
const fullName = `${noteItem?.contact?.firstName || ""} ${noteItem?.contact?.lastName || ""}`.toLowerCase();
|
||||
const createdDate = new Date(noteItem?.createdAt).toLocaleDateString("en-IN").toLowerCase();
|
||||
|
||||
return (
|
||||
plainNote.includes(lowerSearch) ||
|
||||
fullName.includes(lowerSearch) ||
|
||||
createdDate.includes(lowerSearch)
|
||||
);
|
||||
});
|
||||
|
||||
setFilteredNotes(filtered);
|
||||
setNotes(filtered); // for export
|
||||
setCurrentPage(1);
|
||||
setTotalPages(Math.ceil(filtered.length / pageSize));
|
||||
}, [searchText, allNotes]);
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
return filteredNotes.slice(startIndex, startIndex + pageSize);
|
||||
}, [filteredNotes, currentPage]);
|
||||
|
||||
const handlePageClick = (page) => {
|
||||
if (page !== currentPage) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <p className="mt-10 text-center">Loading notes...</p>;
|
||||
}
|
||||
|
||||
if (!filteredNotes.length) {
|
||||
return <p className="mt-10 text-center">No matching notes found</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-100 h-100"
|
||||
style={{
|
||||
padding: "1rem",
|
||||
overflowX: "auto",
|
||||
overflowY: "hidden",
|
||||
background: "#f8f9fa",
|
||||
}}
|
||||
>
|
||||
<div className="d-flex flex-column text-start" style={{ gap: "0rem", minHeight: "100%" }}>
|
||||
{currentItems.map((noteItem) => (
|
||||
<NoteCardDirectoryEditable
|
||||
key={noteItem.id}
|
||||
noteItem={noteItem}
|
||||
contactId={noteItem.contactId}
|
||||
onNoteUpdate={(updatedNote) => {
|
||||
setAllNotes((prevNotes) =>
|
||||
prevNotes.map((n) => (n.id === updatedNote.id ? updatedNote : n))
|
||||
);
|
||||
}}
|
||||
onNoteDelete={() => {
|
||||
fetchNotes(); // refresh after delete
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="d-flex justify-content-end mt-3 me-3">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<button
|
||||
className="btn btn-sm rounded-circle border"
|
||||
onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1}
|
||||
title="Previous"
|
||||
>
|
||||
«
|
||||
</button>
|
||||
|
||||
{[...Array(totalPages)].map((_, i) => {
|
||||
const page = i + 1;
|
||||
return (
|
||||
<button
|
||||
key={page}
|
||||
className={`btn btn-sm rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-outline-primary"}`}
|
||||
style={{ width: "32px", height: "32px", padding: 0 }}
|
||||
onClick={() => handlePageClick(page)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
className="btn btn-sm rounded-circle border"
|
||||
onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
title="Next"
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotesCardViewDirectory;
|
||||
@ -20,6 +20,7 @@ import DirectoryPageHeader from "./DirectoryPageHeader";
|
||||
import ManageBucket from "../../components/Directory/ManageBucket";
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import { DireProvider, useDir } from "../../Context/DireContext";
|
||||
import NotesCardViewDirectory from "../../components/Directory/NotesCardViewDirectory";
|
||||
|
||||
const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
const [projectPrefernce, setPerfence] = useState(null);
|
||||
@ -31,11 +32,12 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
const [ContactList, setContactList] = useState([]);
|
||||
const [contactCategories, setContactCategories] = useState([]);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [listView, setListView] = useState(false);
|
||||
const [viewType, setViewType] = useState("notes");
|
||||
const [selectedBucketIds, setSelectedBucketIds] = useState([]);
|
||||
const [deleteContact, setDeleteContact] = useState(null);
|
||||
const [IsDeleting, setDeleting] = useState(false);
|
||||
const [openBucketModal, setOpenBucketModal] = useState(false);
|
||||
const [notes, setNotes] = useState([]);
|
||||
|
||||
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
|
||||
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
|
||||
@ -332,8 +334,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
searchText={searchText}
|
||||
setSearchText={setSearchText}
|
||||
setIsActive={setIsActive}
|
||||
listView={listView}
|
||||
setListView={setListView}
|
||||
viewType={viewType}
|
||||
setViewType={setViewType}
|
||||
filteredBuckets={filteredBuckets}
|
||||
tempSelectedBucketIds={tempSelectedBucketIds}
|
||||
handleTempBucketChange={handleTempBucketChange}
|
||||
@ -346,56 +348,39 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
IsActive={IsActive}
|
||||
setOpenBucketModal={setOpenBucketModal}
|
||||
contactsToExport={contacts}
|
||||
notesToExport={notes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-minHeight">
|
||||
{/* Messages when listView is false */}
|
||||
{!listView && (
|
||||
<div className="d-flex flex-column justify-content-center align-items-center text-center ">
|
||||
{loading && <p className="mt-10">Loading...</p>}
|
||||
{!loading && contacts?.length === 0 && (
|
||||
{/* Common empty/loading messages */}
|
||||
{(viewType === "card" || viewType === "list" || viewType === "notes") && (
|
||||
<div className="d-flex flex-column justify-content-center align-items-center text-center">
|
||||
{/* {loading && <p className="mt-10">Loading...</p>} */}
|
||||
|
||||
{/* Notes View */}
|
||||
{/* {!loading && viewType === "notes" && notes?.length > 0 && (
|
||||
<p className="mt-10">No matching note found</p>
|
||||
)} */}
|
||||
|
||||
{/* Contact (card/list) View */}
|
||||
{!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
|
||||
<p className="mt-10">No contact found</p>
|
||||
)}
|
||||
{!loading && contacts?.length > 0 && currentItems.length === 0 && (
|
||||
<p className="mt-10">No matching contact found</p>
|
||||
)}
|
||||
{!loading &&
|
||||
(viewType === "card" || viewType === "list") &&
|
||||
contacts?.length > 0 &&
|
||||
currentItems.length === 0 && (
|
||||
<p className="mt-10">No matching contact found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Table view (listView === true) */}
|
||||
|
||||
{listView ? (
|
||||
{/* List View */}
|
||||
{viewType === "list" && (
|
||||
<div className="card cursor-pointer mt-5">
|
||||
<div className="card-body p-2 pb-1">
|
||||
<DirectoryListTableHeader>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td colSpan={10}>
|
||||
{" "}
|
||||
<p className="mt-10">Loading...</p>{" "}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading && contacts?.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>
|
||||
<p className="mt-10">No contact found</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
currentItems.length === 0 &&
|
||||
contacts?.length > 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>
|
||||
<p className="mt-10">No matching contact found</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<ListViewDirectory
|
||||
@ -413,7 +398,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</DirectoryListTableHeader>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
)}
|
||||
|
||||
{/* Card View */}
|
||||
{viewType === "card" && (
|
||||
<div className="row mt-5">
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
@ -436,15 +424,25 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notes View */}
|
||||
{viewType === "notes" && (
|
||||
<div className="mt-0">
|
||||
<NotesCardViewDirectory
|
||||
notes={notes}
|
||||
setNotes={setNotes}
|
||||
searchText={searchText}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading &&
|
||||
viewType !== "notes" &&
|
||||
contacts?.length > 0 &&
|
||||
currentItems.length > ITEMS_PER_PAGE && (
|
||||
<nav aria-label="Page navigation">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
|
||||
>
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
@ -456,9 +454,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
@ -469,11 +466,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</li>
|
||||
))}
|
||||
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
@ -485,8 +478,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Directory;
|
||||
export default Directory;
|
||||
@ -1,13 +1,12 @@
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
|
||||
|
||||
const DirectoryPageHeader = ({
|
||||
searchText,
|
||||
setSearchText,
|
||||
setIsActive,
|
||||
listView,
|
||||
setListView,
|
||||
viewType,
|
||||
setViewType,
|
||||
filteredBuckets,
|
||||
tempSelectedBucketIds,
|
||||
handleTempBucketChange,
|
||||
@ -18,54 +17,88 @@ const DirectoryPageHeader = ({
|
||||
applyFilter,
|
||||
loading,
|
||||
IsActive,
|
||||
setOpenBucketModal,
|
||||
contactsToExport, // This prop receives the paginated data (currentItems)
|
||||
contactsToExport,
|
||||
notesToExport, // ✅ Add this prop
|
||||
}) => {
|
||||
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;
|
||||
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, ""); // remove HTML tags
|
||||
const decoded = decodeHtmlEntities(stripped);
|
||||
return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); // fix non-breaking space
|
||||
};
|
||||
|
||||
const cleanName = (name) => {
|
||||
if (!name) return "";
|
||||
return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); // sanitize name
|
||||
};
|
||||
|
||||
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(', ') || '',
|
||||
}));
|
||||
}
|
||||
|
||||
// --- 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 today = new Date();
|
||||
const formattedDate = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}`;
|
||||
|
||||
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 : '',
|
||||
}));
|
||||
const filename =
|
||||
viewType === "notes"
|
||||
? `Directory_Notes_${formattedDate}`
|
||||
: `Directory_Contacts_${formattedDate}`;
|
||||
|
||||
console.log("Kaerik", simplifiedContacts)
|
||||
switch (type) {
|
||||
case "csv":
|
||||
exportToCSV(simplifiedContacts, "directory_contacts");
|
||||
exportToCSV(dataToExport, filename);
|
||||
break;
|
||||
case "excel":
|
||||
exportToExcel(simplifiedContacts, "directory_contacts");
|
||||
exportToExcel(dataToExport, filename);
|
||||
break;
|
||||
case "pdf":
|
||||
exportToPDF(simplifiedContacts, "directory_contacts");
|
||||
exportToPDF(dataToExport, filename);
|
||||
break;
|
||||
case "print":
|
||||
printTable(simplifiedContacts, "directory_contacts");
|
||||
printTable(dataToExport, filename);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@ -73,15 +106,43 @@ const DirectoryPageHeader = ({
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setFiltered(
|
||||
tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
|
||||
);
|
||||
setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
|
||||
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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 ">
|
||||
{/* 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" 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" }} />
|
||||
|
||||
{/* Controls: Search, Filter, View, Toggle, Export */}
|
||||
<div className="row mx-0 px-0 align-items-center mt-0">
|
||||
<div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4">
|
||||
|
||||
{/* Search */}
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm me-2"
|
||||
@ -90,171 +151,126 @@ const DirectoryPageHeader = ({
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: "200px" }}
|
||||
/>
|
||||
<div className="d-flex gap-2 ">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs ${!listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(false)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Card View"
|
||||
>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs ${listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(true)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="List View"
|
||||
>
|
||||
<i className="bx bx-list-ul "></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="dropdown" style={{ width: "fit-content" }}>
|
||||
<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"
|
||||
|
||||
{/* View Toggle Buttons - only for list/card */}
|
||||
{(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={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"
|
||||
}`}
|
||||
></i>
|
||||
<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>
|
||||
|
||||
{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: "320px" }}>
|
||||
<div>
|
||||
<p className="text-muted m-0 h6 ">Filter by</p>
|
||||
|
||||
{/* Bucket Filter */}
|
||||
<div className="mt-1">
|
||||
<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: "33.33%" }}
|
||||
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>
|
||||
<hr className="m-0" />
|
||||
{/* Category Filter */}
|
||||
<div className="mt-1">
|
||||
<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: "33.33%" }}
|
||||
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 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>
|
||||
</div>
|
||||
</ul>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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)}
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* Export Dropdown */}
|
||||
<div className="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-icon rounded-pill dropdown-toggle hide-arrow"
|
||||
{/* Filter */}
|
||||
<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"
|
||||
aria-label="Export options"
|
||||
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-sm"></i>
|
||||
<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: "320px" }}>
|
||||
<p className="text-muted m-0 h6">Filter by</p>
|
||||
|
||||
{/* Buckets */}
|
||||
<div className="mt-1">
|
||||
<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: "33.33%" }} 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>
|
||||
{/* Categories */}
|
||||
<div className="mt-1">
|
||||
<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: "33.33%" }} 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 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-1 d-flex justify-content-end align-items-center gap-2">
|
||||
{/* Show Inactive Toggle - only for list/card */}
|
||||
{(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>
|
||||
)}
|
||||
|
||||
{/* Export */}
|
||||
<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("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
|
||||
@ -265,11 +281,13 @@ const DirectoryPageHeader = ({
|
||||
<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>
|
||||
@ -278,4 +296,7 @@ const DirectoryPageHeader = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default DirectoryPageHeader;
|
||||
export default DirectoryPageHeader;
|
||||
|
||||
|
||||
|
||||
|
||||
@ -32,4 +32,7 @@ export const DirectoryRepository = {
|
||||
UpdateNote: (id, data) => api.put(`/api/directory/note/${id}`, data),
|
||||
DeleteNote: (id, isActive) =>
|
||||
api.delete(`/api/directory/note/${id}?active=${isActive}`),
|
||||
|
||||
GetNotes: (pageSize, pageNumber) =>
|
||||
api.get(`/api/directory/notes?pageSize=${pageSize}&pageNumber=${pageNumber}`),
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user