Changes in Directory in Filter, removing unnessary gaps and changing color of HideEditor.
This commit is contained in:
parent
a96d3696bb
commit
9554caf25f
@ -115,7 +115,7 @@ const NoteCardDirectoryEditable = ({
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div
|
||||
className="card p-1 shadow-sm border-1 mb-4 p-4 rounded"
|
||||
className="card shadow-sm border-1 mb-3 p-4 rounded"
|
||||
style={{
|
||||
width: "100%",
|
||||
background: noteItem.isActive ? "#fff" : "#f8f6f6",
|
||||
@ -127,7 +127,7 @@ const NoteCardDirectoryEditable = ({
|
||||
<div className="d-flex align-items-center">
|
||||
|
||||
<Avatar
|
||||
size="xs"
|
||||
size="xxs"
|
||||
firstName={noteItem?.createdBy?.firstName}
|
||||
lastName={noteItem?.createdBy?.lastName}
|
||||
className="m-0"
|
||||
@ -136,7 +136,7 @@ const NoteCardDirectoryEditable = ({
|
||||
<div className="d-flex ms-0 align-middle cursor-pointer" onClick={() =>contactProfile(noteItem.contactId)}>
|
||||
<span>
|
||||
<span className="fw-bold "> {noteItem?.contactName} </span> <span className="text-muted font-weight-normal">
|
||||
( {noteItem?.organizationName})
|
||||
({noteItem?.organizationName})
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -220,7 +220,7 @@ const NoteCardDirectoryEditable = ({
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
className="px-10 pb-2 text-start"
|
||||
className="mx-4 px-10 text-start"
|
||||
dangerouslySetInnerHTML={{ __html: noteItem.note }}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -133,11 +133,11 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
|
||||
style={{ marginBottom: '70px' }}>
|
||||
{/* Previous Button */}
|
||||
<button
|
||||
className="btn btn-sm rounded-circle border text-secondary" // Added text-secondary for lighter color, kept btn-sm for smaller size like in image
|
||||
className="btn btn-sm rounded-circle border text-secondary"
|
||||
onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1}
|
||||
title="Previous"
|
||||
style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
|
||||
style={{ width: "30px", height: "30px", padding: 0, fontSize: "0.75rem" }} // Adjusted width, height, and font size
|
||||
>
|
||||
«
|
||||
</button>
|
||||
@ -148,10 +148,8 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
|
||||
return (
|
||||
<button
|
||||
key={page}
|
||||
// Changed btn-sm to just btn, adjusted class for active/inactive state backgrounds and text colors
|
||||
className={`btn rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-light text-secondary"
|
||||
}`}
|
||||
style={{ width: "38px", height: "38px", padding: 0, fontSize: "1rem", lineHeight: "1" }} // Adjusted size and font for better fit
|
||||
className={`btn rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-light text-secondary"}`}
|
||||
style={{ width: "30px", height: "30px", padding: 0, fontSize: "0.75rem", lineHeight: "1" }} // Adjusted width, height, and font size
|
||||
onClick={() => handlePageClick(page)}
|
||||
>
|
||||
{page}
|
||||
@ -161,11 +159,11 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
|
||||
|
||||
{/* Next Button */}
|
||||
<button
|
||||
className="btn btn-sm rounded-circle border text-secondary" // Added text-secondary for lighter color, kept btn-sm
|
||||
className="btn btn-sm rounded-circle border text-secondary"
|
||||
onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
title="Next"
|
||||
style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
|
||||
style={{ width: "30px", height: "30px", padding: 0, fontSize: "0.75rem" }} // Adjusted width, height, and font size
|
||||
>
|
||||
»
|
||||
</button>
|
||||
|
||||
@ -135,7 +135,7 @@ const NotesDirectory = ({
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<span
|
||||
className={`btn btn-sm ${addNote ? "btn-danger" : "btn-primary"}`}
|
||||
className={`btn btn-sm ${addNote ? "btn-secondary" : "btn-primary"}`}
|
||||
onClick={() => setAddNote(!addNote)}
|
||||
>
|
||||
{addNote ? "Hide Editor" : "Add a Note"}
|
||||
|
||||
@ -37,6 +37,13 @@ const DirectoryPageHeader = ({
|
||||
setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
|
||||
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
||||
|
||||
// New state to track active filters for notes
|
||||
const [notesFilterCount, setNotesFilterCount] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
// Calculate the number of active filters for notes
|
||||
setNotesFilterCount(selectedCreators.length + selectedOrgs.length);
|
||||
}, [selectedCreators, selectedOrgs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (viewType === "notes") {
|
||||
@ -125,10 +132,6 @@ const DirectoryPageHeader = ({
|
||||
setSelectedOrgs(updated);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
updateFilteredOrganizations();
|
||||
}, [selectedCreators]);
|
||||
|
||||
const handleExport = (type) => {
|
||||
let dataToExport = [];
|
||||
|
||||
@ -284,34 +287,42 @@ const DirectoryPageHeader = ({
|
||||
placeholder={viewType === "notes" ? "Search Notes..." : "Search Contact..."}
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: "200px",height: "30px" }}
|
||||
style={{ width: "200px", height: "30px" }}
|
||||
/>
|
||||
|
||||
{/* Filter by funnel icon for Notes view */}
|
||||
{viewType === "notes" && (
|
||||
<div className="dropdown" style={{ width: "fit-content", minWidth: "400px" }}>
|
||||
<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 ${selectedCreators.length > 0 || selectedOrgs.length > 0 ? "text-primary" : "text-muted"}`}></i>
|
||||
<i className={`fa-solid fa-filter ms-1 fs-5 ${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: "600px" }}>
|
||||
{/* Scrollable Filter Content */}
|
||||
<div
|
||||
className="dropdown-menu p-3"
|
||||
className="p-3"
|
||||
style={{
|
||||
minWidth: "600px",
|
||||
maxHeight: "400px",
|
||||
maxHeight: "300px",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
whiteSpace: "normal"
|
||||
}}
|
||||
>
|
||||
<div className="d-flex">
|
||||
<div className="d-flex gap-3">
|
||||
{/* Created By */}
|
||||
<div className="pe-3" style={{ flex: 1 }}>
|
||||
<p className="text-muted mb-1">Created By</p>
|
||||
<div style={{ flex: 1, 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
|
||||
@ -329,8 +340,10 @@ const DirectoryPageHeader = ({
|
||||
</div>
|
||||
|
||||
{/* Organization */}
|
||||
<div className="ps-3" style={{ flex: 1 }}>
|
||||
<p className="text-muted mb-1">Organization</p>
|
||||
<div style={{ flex: 1, maxHeight: "260px", overflowY: "auto" }}>
|
||||
<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
|
||||
@ -348,12 +361,20 @@ const DirectoryPageHeader = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="d-flex justify-content-end gap-2 mt-1">
|
||||
</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={(e) => {
|
||||
// e.stopPropagation();
|
||||
onClick={() => {
|
||||
setSelectedCreators([]);
|
||||
setSelectedOrgs([]);
|
||||
setFilteredOrganizations(allOrganizations);
|
||||
@ -364,7 +385,7 @@ const DirectoryPageHeader = ({
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-primary"
|
||||
onClick={(e) => {
|
||||
onClick={() => {
|
||||
applyCombinedFilter();
|
||||
}}
|
||||
>
|
||||
@ -372,7 +393,6 @@ const DirectoryPageHeader = ({
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user