Compare commits
No commits in common. "85b8abbea39b00d11e3f26c322662bb2255ca211" and "9ee309bf486c711b70006c716c86b31b1c778673" have entirely different histories.
85b8abbea3
...
9ee309bf48
@ -318,60 +318,54 @@ const DirectoryPageHeader = ({
|
|||||||
whiteSpace: "normal"
|
whiteSpace: "normal"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{allCreators.length === 0 && filteredOrganizations.length === 0 ? (
|
<div className="d-flex gap-3">
|
||||||
<div className="text-center text-muted py-5">
|
{/* Created By */}
|
||||||
No filter found
|
<div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
|
||||||
</div>
|
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
|
||||||
) : (
|
<p className="text-muted mb-2 pt-2">Created By</p>
|
||||||
<div className="d-flex gap-3">
|
|
||||||
{/* Created By */}
|
|
||||||
<div style={{ flexBasis: "30%", 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
|
|
||||||
className="form-check-input form-check-input-sm"
|
|
||||||
type="checkbox"
|
|
||||||
id={`creator-${idx}`}
|
|
||||||
checked={selectedCreators.includes(name)}
|
|
||||||
onChange={() => handleToggleCreator(name)}
|
|
||||||
style={{ width: "1rem", height: "1rem" }}
|
|
||||||
/>
|
|
||||||
<label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
|
|
||||||
{name}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
{allCreators.map((name, idx) => (
|
||||||
|
<div className="form-check mb-1" key={`creator-${idx}`}>
|
||||||
|
<input
|
||||||
|
className="form-check-input form-check-input-sm"
|
||||||
|
type="checkbox"
|
||||||
|
id={`creator-${idx}`}
|
||||||
|
checked={selectedCreators.includes(name)}
|
||||||
|
onChange={() => handleToggleCreator(name)}
|
||||||
|
style={{ width: "1rem", height: "1rem" }}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
|
||||||
|
{name}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Organization */}
|
{/* Organization */}
|
||||||
<div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden" }}>
|
<div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden", }}>
|
||||||
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
|
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
|
||||||
<p className="text-muted mb-2 pt-2">Organization</p>
|
<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
|
|
||||||
className="form-check-input form-check-input-sm"
|
|
||||||
type="checkbox"
|
|
||||||
id={`org-${idx}`}
|
|
||||||
checked={selectedOrgs.includes(org)}
|
|
||||||
onChange={() => handleToggleOrg(org)}
|
|
||||||
style={{ width: "1rem", height: "1rem" }}
|
|
||||||
/>
|
|
||||||
<label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
|
|
||||||
{org}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
{filteredOrganizations.map((org, idx) => (
|
||||||
|
<div className="form-check mb-1" key={`org-${idx}`}>
|
||||||
|
<input
|
||||||
|
className="form-check-input form-check-input-sm"
|
||||||
|
type="checkbox"
|
||||||
|
id={`org-${idx}`}
|
||||||
|
checked={selectedOrgs.includes(org)}
|
||||||
|
onChange={() => handleToggleOrg(org)}
|
||||||
|
style={{ width: "1rem", height: "1rem" }}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
|
||||||
|
{org}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* Sticky Footer Buttons */}
|
{/* Sticky Footer Buttons */}
|
||||||
<div
|
<div
|
||||||
className="d-flex justify-content-end gap-2 p-2 "
|
className="d-flex justify-content-end gap-2 p-2 "
|
||||||
@ -446,74 +440,54 @@ const DirectoryPageHeader = ({
|
|||||||
<ul className="dropdown-menu p-3" style={{ width: "700px" }}>
|
<ul className="dropdown-menu p-3" style={{ width: "700px" }}>
|
||||||
<p className="text-muted m-0 h6">Filter by</p>
|
<p className="text-muted m-0 h6">Filter by</p>
|
||||||
|
|
||||||
{filteredBuckets.length === 0 && filteredCategories.length === 0 ? (
|
<div className="d-flex flex-nowrap">
|
||||||
<div className="text-center text-muted py-5">
|
<div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
|
||||||
No filter found
|
<p className="text-small mb-1">Buckets</p>
|
||||||
</div>
|
<div className="d-flex flex-wrap">
|
||||||
) : (
|
{filteredBuckets.map(({ id, name }) => (
|
||||||
<div className="d-flex flex-nowrap">
|
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
|
||||||
<div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
|
<input
|
||||||
<p className="text-small mb-1">Buckets</p>
|
className="form-check-input form-check-input-sm"
|
||||||
<div className="d-flex flex-wrap">
|
type="checkbox"
|
||||||
{filteredBuckets.map(({ id, name }) => (
|
id={`bucket-${id}`}
|
||||||
<div
|
checked={tempSelectedBucketIds.includes(id)}
|
||||||
className="form-check me-3 mb-1"
|
onChange={() => handleTempBucketChange(id)}
|
||||||
style={{ minWidth: "calc(50% - 15px)" }}
|
style={{ width: "1rem", height: "1rem" }}
|
||||||
key={id}
|
/>
|
||||||
>
|
<label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
|
||||||
<input
|
{name}
|
||||||
className="form-check-input form-check-input-sm"
|
</label>
|
||||||
type="checkbox"
|
</div>
|
||||||
id={`bucket-${id}`}
|
))}
|
||||||
checked={tempSelectedBucketIds.includes(id)}
|
|
||||||
onChange={() => handleTempBucketChange(id)}
|
|
||||||
style={{ width: "1rem", height: "1rem" }}
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="form-check-label text-nowrap text-small"
|
|
||||||
htmlFor={`bucket-${id}`}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</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 form-check-input-sm"
|
|
||||||
type="checkbox"
|
|
||||||
id={`cat-${id}`}
|
|
||||||
checked={tempSelectedCategoryIds.includes(id)}
|
|
||||||
onChange={() => handleTempCategoryChange(id)}
|
|
||||||
style={{ width: "1rem", height: "1rem" }}
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="form-check-label text-nowrap text-small"
|
|
||||||
htmlFor={`cat-${id}`}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 form-check-input-sm"
|
||||||
|
type="checkbox"
|
||||||
|
id={`cat-${id}`}
|
||||||
|
checked={tempSelectedCategoryIds.includes(id)}
|
||||||
|
onChange={() => handleTempCategoryChange(id)}
|
||||||
|
style={{ width: "1rem", height: "1rem" }}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
|
||||||
|
{name}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="d-flex justify-content-end gap-2 mt-1">
|
<div className="d-flex justify-content-end gap-2 mt-1">
|
||||||
<button
|
<button
|
||||||
className="btn btn-xs btn-secondary"
|
className="btn btn-xs btn-secondary"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
|
// e.stopPropagation();
|
||||||
clearFilter();
|
clearFilter();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -529,7 +503,6 @@ const DirectoryPageHeader = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user