Adding filteration according to names.
This commit is contained in:
parent
3e0b4edf4a
commit
52b796700d
@ -5,6 +5,7 @@ import Avatar from "../common/Avatar";
|
||||
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
||||
import ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
|
||||
import "../common/TextEditor/Editor.css";
|
||||
|
||||
const NoteCardDirectoryEditable = ({
|
||||
@ -18,6 +19,7 @@ const NoteCardDirectoryEditable = ({
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isRestoring, setIsRestoring] = useState(false);
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
|
||||
const handleUpdateNote = async () => {
|
||||
try {
|
||||
@ -29,7 +31,6 @@ const NoteCardDirectoryEditable = ({
|
||||
};
|
||||
const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
|
||||
|
||||
// Optional cache update
|
||||
const cachedContactProfile = getCachedData("Contact Profile");
|
||||
if (cachedContactProfile?.contactId === contactId) {
|
||||
const updatedCache = {
|
||||
@ -43,8 +44,7 @@ const NoteCardDirectoryEditable = ({
|
||||
};
|
||||
cacheData("Contact Profile", updatedCache);
|
||||
}
|
||||
|
||||
// Notify parent
|
||||
|
||||
onNoteUpdate?.(response.data);
|
||||
setEditing(false);
|
||||
showToast("Note updated successfully", "success");
|
||||
@ -55,111 +55,156 @@ const NoteCardDirectoryEditable = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteOrRestore = async (shouldRestore) => {
|
||||
const suspendEmployee = async () => {
|
||||
try {
|
||||
shouldRestore ? setIsRestoring(true) : setIsDeleting(true);
|
||||
await DirectoryRepository.DeleteNote(noteItem.id, shouldRestore);
|
||||
setIsDeleting(true);
|
||||
await DirectoryRepository.DeleteNote(noteItem.id, false);
|
||||
onNoteDelete?.(noteItem.id);
|
||||
showToast(`Note ${shouldRestore ? "restored" : "deleted"} successfully`, "success");
|
||||
setIsDeleteModalOpen(false);
|
||||
showToast("Note deleted successfully", "success");
|
||||
} catch (error) {
|
||||
showToast("Failed to process note", "error");
|
||||
showToast("Failed to delete note", "error");
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestore = async () => {
|
||||
try {
|
||||
setIsRestoring(true);
|
||||
await DirectoryRepository.DeleteNote(noteItem.id, true);
|
||||
onNoteDelete?.(noteItem.id);
|
||||
showToast("Note restored successfully", "success");
|
||||
} catch (error) {
|
||||
showToast("Failed to restore note", "error");
|
||||
} finally {
|
||||
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
|
||||
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-0">
|
||||
<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>
|
||||
</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 ? (
|
||||
|
||||
{/* Action Icons */}
|
||||
<div>
|
||||
{noteItem.isActive ? (
|
||||
<>
|
||||
<i
|
||||
className="bx bx-trash bx-sm me-2 text-danger cursor-pointer"
|
||||
onClick={() => handleDeleteOrRestore(false)}
|
||||
title="Delete"
|
||||
className="bx bxs-edit bx-sm me-2 text-primary cursor-pointer"
|
||||
onClick={() => setEditing(true)}
|
||||
title="Edit"
|
||||
></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>
|
||||
{!isDeleting ? (
|
||||
<i
|
||||
className="bx bx-trash bx-sm me-2 text-danger cursor-pointer"
|
||||
onClick={() => setIsDeleteModalOpen(true)}
|
||||
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={handleRestore}
|
||||
title="Restore"
|
||||
></i>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="px-1 pb-2 text-start" dangerouslySetInnerHTML={{ __html: noteItem.note }} />
|
||||
</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-10 pb-2 text-start"
|
||||
dangerouslySetInnerHTML={{ __html: noteItem.note }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Delete Confirm Modal */}
|
||||
{isDeleteModalOpen && (
|
||||
<div
|
||||
className={`modal fade ${isDeleteModalOpen ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{
|
||||
display: isDeleteModalOpen ? "block" : "none",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
}}
|
||||
aria-hidden="false"
|
||||
>
|
||||
<ConfirmModal
|
||||
type={"delete"}
|
||||
header={"Delete Note"}
|
||||
message={"Are you sure you want to delete this note?"}
|
||||
onSubmit={suspendEmployee}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
loading={isDeleting}
|
||||
paramData={noteItem}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoteCardDirectoryEditable;
|
||||
export default NoteCardDirectoryEditable;
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo } from "react";
|
||||
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
||||
import NoteCardDirectoryEditable from "./NoteCardDirectoryEditable";
|
||||
|
||||
const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
|
||||
const NotesCardViewDirectory = ({ notes, setNotes, searchText, selectedNoteNames }) => { // ✅ Changed to array
|
||||
const [allNotes, setAllNotes] = useState([]);
|
||||
const [filteredNotes, setFilteredNotes] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@ -13,7 +13,7 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
|
||||
const fetchNotes = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await DirectoryRepository.GetNotes(1000, 1); // fetch all for search
|
||||
const response = await DirectoryRepository.GetNotes(1000, 1);
|
||||
const fetchedNotes = response.data?.data || [];
|
||||
setAllNotes(fetchedNotes);
|
||||
} catch (error) {
|
||||
@ -27,26 +27,33 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
|
||||
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 fullName = `${noteItem?.createdBy?.firstName || ""} ${noteItem?.createdBy?.lastName || ""}`.trim(); // Get full name
|
||||
const lowerFullName = fullName.toLowerCase(); // Convert to lowercase for comparison
|
||||
const createdDate = new Date(noteItem?.createdAt).toLocaleDateString("en-IN").toLowerCase();
|
||||
|
||||
return (
|
||||
const matchesSearch =
|
||||
plainNote.includes(lowerSearch) ||
|
||||
fullName.includes(lowerSearch) ||
|
||||
createdDate.includes(lowerSearch)
|
||||
);
|
||||
lowerFullName.includes(lowerSearch) ||
|
||||
createdDate.includes(lowerSearch);
|
||||
|
||||
// ✅ Filter logic for multiple selected names
|
||||
const matchesNameFilter =
|
||||
selectedNoteNames.length === 0 || // If no names are selected, all notes pass this filter
|
||||
selectedNoteNames.includes(fullName); // Check if the note's creator is in the selected names array
|
||||
|
||||
return matchesSearch && matchesNameFilter;
|
||||
});
|
||||
|
||||
setFilteredNotes(filtered);
|
||||
setNotes(filtered); // for export
|
||||
setNotes(filtered);
|
||||
setCurrentPage(1);
|
||||
setTotalPages(Math.ceil(filtered.length / pageSize));
|
||||
}, [searchText, allNotes]);
|
||||
}, [searchText, allNotes, selectedNoteNames]); // ✅ Add selectedNoteNames to dependencies
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
@ -70,14 +77,8 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
|
||||
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%" }}>
|
||||
<div className="d-flex flex-column text-start mt-4" style={{ gap: "0rem", minHeight: "100%" }}>
|
||||
{currentItems.map((noteItem) => (
|
||||
<NoteCardDirectoryEditable
|
||||
key={noteItem.id}
|
||||
@ -89,13 +90,12 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
|
||||
);
|
||||
}}
|
||||
onNoteDelete={() => {
|
||||
fetchNotes(); // refresh after delete
|
||||
fetchNotes();
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="d-flex justify-content-end mt-3 me-3">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
@ -137,4 +137,4 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default NotesCardViewDirectory;
|
||||
export default NotesCardViewDirectory;
|
||||
@ -39,6 +39,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
const [openBucketModal, setOpenBucketModal] = useState(false);
|
||||
const [notes, setNotes] = useState([]);
|
||||
|
||||
// ✅ Changed to an array for multiple selections
|
||||
const [selectedNoteNames, setSelectedNoteNames] = useState([]);
|
||||
|
||||
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
|
||||
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
|
||||
const { setActions } = useFab();
|
||||
@ -73,8 +76,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
setIsOpenModal(false);
|
||||
}
|
||||
|
||||
// cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
|
||||
// setContactList(updatedContacts);
|
||||
refetch(IsActive, prefernceContacts);
|
||||
refetchBucket();
|
||||
} catch (error) {
|
||||
@ -251,6 +252,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
|
||||
return () => setActions([]);
|
||||
}, [IsPage, buckets]);
|
||||
|
||||
useEffect(() => {
|
||||
setPerfence(prefernceContacts);
|
||||
}, [prefernceContacts]);
|
||||
@ -328,7 +330,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="card p-0 mb-2 ">
|
||||
<div className="card p-0 mb-0">
|
||||
<div className="card-body p-1 pb-0">
|
||||
<DirectoryPageHeader
|
||||
searchText={searchText}
|
||||
@ -349,21 +351,14 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
setOpenBucketModal={setOpenBucketModal}
|
||||
contactsToExport={contacts}
|
||||
notesToExport={notes}
|
||||
selectedNoteNames={selectedNoteNames}
|
||||
setSelectedNoteNames={setSelectedNoteNames}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-minHeight">
|
||||
{/* Common empty/loading messages */}
|
||||
<div className="card-minHeight mt-0">
|
||||
{(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>
|
||||
)}
|
||||
@ -376,7 +371,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* List View */}
|
||||
{viewType === "list" && (
|
||||
<div className="card cursor-pointer mt-5">
|
||||
<div className="card-body p-2 pb-1">
|
||||
@ -400,9 +394,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Card View */}
|
||||
{viewType === "card" && (
|
||||
<div className="row mt-5">
|
||||
<div className="row mt-4">
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<div
|
||||
@ -424,13 +417,13 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notes View */}
|
||||
{viewType === "notes" && (
|
||||
<div className="mt-0">
|
||||
<NotesCardViewDirectory
|
||||
notes={notes}
|
||||
setNotes={setNotes}
|
||||
searchText={searchText}
|
||||
selectedNoteNames={selectedNoteNames}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -478,7 +471,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -18,10 +18,43 @@ const DirectoryPageHeader = ({
|
||||
loading,
|
||||
IsActive,
|
||||
contactsToExport,
|
||||
notesToExport, // ✅ Add this prop
|
||||
notesToExport,
|
||||
selectedNoteNames, // ✅ Changed to array
|
||||
setSelectedNoteNames, // ✅ Changed to array
|
||||
}) => {
|
||||
const [filtered, setFiltered] = useState(0);
|
||||
|
||||
const [noteCreators, setNoteCreators] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
|
||||
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
||||
|
||||
useEffect(() => {
|
||||
if (viewType === "notes" && 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()); // Sort names for consistent display
|
||||
} else {
|
||||
setNoteCreators([]);
|
||||
setSelectedNoteNames([]); // Reset to empty array for multiple selection
|
||||
}
|
||||
}, [notesToExport, viewType, setSelectedNoteNames]); // Add setSelectedNoteNames to dependencies
|
||||
|
||||
// ✅ New handler for multiple name selections
|
||||
const handleToggleNoteName = (name) => {
|
||||
setSelectedNoteNames(prevSelectedNames => {
|
||||
if (prevSelectedNames.includes(name)) {
|
||||
return prevSelectedNames.filter(n => n !== name);
|
||||
} else {
|
||||
return [...prevSelectedNames, name];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleExport = (type) => {
|
||||
let dataToExport = [];
|
||||
|
||||
@ -39,14 +72,14 @@ const DirectoryPageHeader = ({
|
||||
|
||||
const cleanNoteText = (html) => {
|
||||
if (!html) return "";
|
||||
const stripped = html.replace(/<[^>]+>/g, ""); // remove HTML tags
|
||||
const stripped = html.replace(/<[^>]+>/g, "");
|
||||
const decoded = decodeHtmlEntities(stripped);
|
||||
return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); // fix non-breaking space
|
||||
return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
|
||||
};
|
||||
|
||||
const cleanName = (name) => {
|
||||
if (!name) return "";
|
||||
return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); // sanitize name
|
||||
return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
|
||||
};
|
||||
|
||||
dataToExport = notesToExport.map(note => ({
|
||||
@ -105,13 +138,8 @@ const DirectoryPageHeader = ({
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
|
||||
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
||||
|
||||
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">
|
||||
@ -138,21 +166,68 @@ const DirectoryPageHeader = ({
|
||||
</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">
|
||||
<div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">
|
||||
|
||||
{/* Search */}
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm me-2"
|
||||
placeholder="Search Contact..."
|
||||
className="form-control me-0"
|
||||
placeholder={viewType === "notes" ? "Search Notes..." : "Search Contact..."}
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: "200px" }}
|
||||
/>
|
||||
|
||||
{/* View Toggle Buttons - only for list/card */}
|
||||
{/* Name Filter Dropdown - now with checkboxes */}
|
||||
{viewType === "notes" && noteCreators.length > 0 && (
|
||||
<div className="dropdown" style={{ width: "fit-content" }}>
|
||||
<button
|
||||
className="btn btn-sm btn-outline-secondary dropdown-toggle" // Added btn-sm for small size
|
||||
type="button"
|
||||
id="notesNameFilterDropdown"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{selectedNoteNames.length > 0
|
||||
? `Names (${selectedNoteNames.length})`
|
||||
: "Filter by Name"}
|
||||
</button>
|
||||
<ul className="dropdown-menu p-2" aria-labelledby="notesNameFilterDropdown">
|
||||
{/* Option to clear all selections */}
|
||||
<li>
|
||||
<a
|
||||
className={`dropdown-item ${selectedNoteNames.length === 0 ? "active" : ""}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setSelectedNoteNames([]); // Clear all
|
||||
}}
|
||||
>
|
||||
All Names
|
||||
</a>
|
||||
</li>
|
||||
<li><hr className="dropdown-divider" /></li>
|
||||
{noteCreators.map((name, index) => (
|
||||
<li key={index}>
|
||||
<div className="form-check dropdown-item p-0">
|
||||
<input
|
||||
className="form-check-input ms-2"
|
||||
type="checkbox"
|
||||
id={`name-filter-${index}`}
|
||||
checked={selectedNoteNames.includes(name)}
|
||||
onChange={() => handleToggleNoteName(name)}
|
||||
/>
|
||||
<label className="form-check-label ms-1" htmlFor={`name-filter-${index}`}>
|
||||
{name}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{(viewType === "card" || viewType === "list") && (
|
||||
<div className="d-flex gap-2">
|
||||
|
||||
@ -174,75 +249,76 @@ const DirectoryPageHeader = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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"
|
||||
>
|
||||
<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>
|
||||
{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: "320px" }}>
|
||||
<p className="text-muted m-0 h6">Filter by</p>
|
||||
<ul className="dropdown-menu p-3" style={{ width: "700px" }}>
|
||||
<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 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>
|
||||
{/* 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 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>
|
||||
|
||||
<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 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 */}
|
||||
<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
|
||||
@ -260,7 +336,6 @@ const DirectoryPageHeader = ({
|
||||
</label>
|
||||
)}
|
||||
|
||||
{/* Export */}
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
||||
@ -282,21 +357,19 @@ const DirectoryPageHeader = ({
|
||||
</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>
|
||||
)}
|
||||
<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;
|
||||
|
||||
|
||||
|
||||
export default DirectoryPageHeader;
|
||||
Loading…
x
Reference in New Issue
Block a user