117 lines
3.6 KiB
JavaScript
117 lines
3.6 KiB
JavaScript
// NotesPage.jsx
|
|
import React, { useEffect, useState } from "react";
|
|
import { useFab } from "../../Context/FabContext";
|
|
import { useNotes } from "../../hooks/useDirectory";
|
|
import NoteFilterPanel from "./NoteFilterPanel";
|
|
import { defaultNotesFilter } from "../../components/Directory/DirectorySchema";
|
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|
import { useDebounce } from "../../utils/appUtils";
|
|
import NoteCardDirectoryEditable from "../../components/Directory/NoteCardDirectoryEditable";
|
|
import Pagination from "../../components/common/Pagination";
|
|
import { NoteCardSkeleton } from "../../components/Directory/DirectoryPageSkeleton";
|
|
|
|
const NotesPage = ({ projectId, searchText, onExport }) => {
|
|
const [filters, setFilter] = useState(defaultNotesFilter);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const debouncedSearch = useDebounce(searchText, 500);
|
|
|
|
const { data, isLoading, isError, error } = useNotes(
|
|
projectId,
|
|
ITEMS_PER_PAGE,
|
|
currentPage,
|
|
filters,
|
|
debouncedSearch
|
|
);
|
|
|
|
const { setOffcanvasContent, setShowTrigger } = useFab();
|
|
|
|
const clearFilter = () => {
|
|
setFilter(defaultNotesFilter);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setShowTrigger(true);
|
|
setOffcanvasContent(
|
|
"Notes Filters",
|
|
<NoteFilterPanel onApply={setFilter} clearFilter={clearFilter} />
|
|
);
|
|
|
|
return () => {
|
|
setShowTrigger(false);
|
|
setOffcanvasContent("", null);
|
|
};
|
|
}, []);
|
|
|
|
// 🔹 Format data for export
|
|
const formatExportData = (notes) => {
|
|
return notes.map((n) => ({
|
|
ContactName: n.contactName || "",
|
|
Note: n.note ? n.note.replace(/<[^>]+>/g, "") : "", // strip HTML tags
|
|
Organization: n.organizationName || "",
|
|
CreatedBy: n.createdBy
|
|
? `${n.createdBy.firstName || ""} ${n.createdBy.lastName || ""}`.trim()
|
|
: "",
|
|
CreatedAt: n.createdAt ? new Date(n.createdAt).toLocaleString() : "",
|
|
UpdatedBy: n.updatedBy
|
|
? `${n.updatedBy.firstName || ""} ${n.updatedBy.lastName || ""}`.trim()
|
|
: "",
|
|
UpdatedAt: n.updatedAt ? new Date(n.updatedAt).toLocaleString() : "",
|
|
}));
|
|
};
|
|
|
|
// 🔹 Pass formatted notes to parent for export
|
|
useEffect(() => {
|
|
if (data?.data && onExport) {
|
|
onExport(formatExportData(data.data));
|
|
}
|
|
}, [data?.data]);
|
|
|
|
const paginate = (page) => {
|
|
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
setCurrentPage(page);
|
|
}
|
|
};
|
|
|
|
if (isError) return <div>{error.message}</div>;
|
|
if (isLoading) return <NoteCardSkeleton />;
|
|
|
|
return (
|
|
<div className="d-flex flex-column text-start mt-3">
|
|
{data?.data?.length > 0 ? (
|
|
<>
|
|
{data.data.map((noteItem) => (
|
|
<NoteCardDirectoryEditable
|
|
key={noteItem.id}
|
|
noteItem={noteItem}
|
|
contactId={noteItem.contactId}
|
|
/>
|
|
))}
|
|
|
|
<div className="col-12 d-flex justify-content-start mt-3">
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={data.totalPages}
|
|
onPageChange={paginate}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
// Card for "No notes available"
|
|
<div
|
|
className="card text-center d-flex align-items-center justify-content-center"
|
|
style={{ height: "200px" }}
|
|
>
|
|
<p className="text-muted mb-0">
|
|
{debouncedSearch
|
|
? `No notes found matching "${searchText}"`
|
|
: Object.keys(filters).some((k) => filters[k] && filters[k].length)
|
|
? "No notes found for the applied filters."
|
|
: "No notes available."}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotesPage; |