upadating directory filter in design.

This commit is contained in:
Kartik sharma 2025-06-27 16:57:57 +05:30
parent 77cd8357cd
commit 45dadc88a2
2 changed files with 53 additions and 32 deletions

View File

@ -115,7 +115,7 @@ const NoteCardDirectoryEditable = ({
</GlobalModel>
)}
<div
className="card p-1 shadow-sm border-1 mb-4 rounded"
className="card p-1 shadow-sm border-1 mb-4 p-4 rounded"
style={{
width: "100%",
background: noteItem.isActive ? "#fff" : "#f8f6f6",

View File

@ -299,40 +299,61 @@ const DirectoryPageHeader = ({
{/* Removed the numerical badge for notes filter */}
</a>
<div className="dropdown-menu p-3" style={{ width: "300px", maxHeight: "400px", overflowY: "auto" }}>
<p className="text-muted mb-1">Created By</p>
{allCreators.map((name, idx) => (
<div className="form-check mb-1" key={`creator-${idx}`}>
<input
className="form-check-input"
type="checkbox"
id={`creator-${idx}`}
checked={selectedCreators.includes(name)}
onChange={() => handleToggleCreator(name)}
/>
<label className="form-check-label" htmlFor={`creator-${idx}`}>
{name}
</label>
<div
className="dropdown-menu p-3"
style={{
minWidth: "600px",
maxHeight: "400px",
overflowY: "auto",
overflowX: "hidden",
whiteSpace: "normal"
}}
>
<div className="d-flex">
{/* Created By */}
<div className="pe-3" style={{ flex: 1 }}>
<p className="text-muted mb-1">Created By</p>
{allCreators.map((name, idx) => (
<div className="form-check mb-1" key={`creator-${idx}`}>
<input
className="form-check-input"
type="checkbox"
id={`creator-${idx}`}
checked={selectedCreators.includes(name)}
onChange={() => handleToggleCreator(name)}
/>
<label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
{name}
</label>
</div>
))}
</div>
))}
<p className="text-muted mt-3 mb-1">Organization</p>
{filteredOrganizations.map((org, idx) => (
<div className="form-check mb-1" key={`org-${idx}`}>
<input
className="form-check-input"
type="checkbox"
id={`org-${idx}`}
checked={selectedOrgs.includes(org)}
onChange={() => handleToggleOrg(org)}
/>
<label className="form-check-label" htmlFor={`org-${idx}`}>
{org}
</label>
{/* Divider */}
<div style={{ width: "1px", backgroundColor: "#dee2e6", margin: "0 12px" }}></div>
{/* Organization */}
<div className="ps-3" style={{ flex: 1 }}>
<p className="text-muted mb-1">Organization</p>
{filteredOrganizations.map((org, idx) => (
<div className="form-check mb-1" key={`org-${idx}`}>
<input
className="form-check-input"
type="checkbox"
id={`org-${idx}`}
checked={selectedOrgs.includes(org)}
onChange={() => handleToggleOrg(org)}
/>
<label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
{org}
</label>
</div>
))}
</div>
))}
</div>
<div className="d-flex justify-content-between mt-2">
{/* Buttons */}
<div className="d-flex justify-content-between mt-3">
<button
className="btn btn-sm btn-outline-danger"
onClick={() => {
@ -340,7 +361,6 @@ const DirectoryPageHeader = ({
setSelectedOrgs([]);
setFilteredOrganizations(allOrganizations);
setFilterAppliedNotes(notesForFilter);
}}
>
Clear
@ -350,6 +370,7 @@ const DirectoryPageHeader = ({
</button>
</div>
</div>
</div>
)}