Skip to content

Commit

Permalink
Merge pull request #149 Remove Checkbox From Single Select Filters
Browse files Browse the repository at this point in the history 
Remove Checkbox From Single Select Filters #141
  • Loading branch information
@eddiesarevalo
eddiesarevalo authored Jan 16, 2025
2 parents e05c7b3 + c19e192 commit 9ea4090
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 121 deletions.
226 changes: 139 additions & 87 deletions apps/frontend/src/components/Filters/Filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export type FilterProps = {
title: string;
options: FilterOptionProps[];
onChecked: (event: ChangeEvent<HTMLInputElement>) => void;
onCheckedRadio: (event: ChangeEvent<HTMLInputElement>) => void;
onCheckedRadio: (name: string, checked: boolean, value: string) => void;
collapseAll?: boolean;
variant: FilterVariant;
};
Expand Down Expand Up @@ -72,102 +72,154 @@ const Filter = ({
return isIncluded;
};

const isASingleSelected = (
possibleOptions: FilterOptionProps[],
filterVariant: FilterVariant
) => {
let isSingleAndSelected = false;
if (filterVariant === "single") {
possibleOptions.forEach((option) => {
if (option.value !== "all" && option.isChecked === true) {
isSingleAndSelected = true;
}
});
}

return isSingleAndSelected;
};

useEffect(() => {
setIsCollapsed(collapseAll);
}, [collapseAll]);

return (
<div>
<Box>
<Grid
container
spacing={2}
alignItems="center"
sx={{ paddingBottom: 0 }}
>
<Grid item xs={10}>
<Typography variant="h8" weight="semibold">
{displayTitle.toUpperCase()}
</Typography>
</Grid>
<Grid item xs={2} className="pds-search-filter-dropdown-button-grid">
<IconButton aria-label="star" onClick={handleCollapseClick}>
{isCollapsed ? <IconArrowCircleDown /> : <IconArrowCircleUp />}
</IconButton>
</Grid>
</Grid>
</Box>

{!isCollapsed ? (
<Grid
container
spacing={2}
alignItems="center"
sx={{ paddingBottom: 0 }}
>
<Grid item xs={12}>
<TextField
className="pds-filter-textfield"
id="subfilter"
value={subFilter}
variant="standard"
onChange={onSubFilterChange}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<IconSearch />
</InputAdornment>
),
}}
/>
</Grid>
</Grid>
) : (
<></>
)}

{!isCollapsed ? (
<Box className="pds-search-filter-checkbox-container">
{options.map((option) =>
titleIncludesSubFilter(option.title, subFilter) ? (
<Box
className="pds-search-filter-checkbox-box"
sx={{
cursor: "pointer",
display: "flex",
alignItems: "start",
}}
<>
{!isASingleSelected(options, variant) ? (
<div>
<Box>
<Grid
container
spacing={2}
alignItems="center"
sx={{ paddingBottom: 0 }}
>
<Grid item xs={10}>
<Typography variant="h8" weight="semibold">
{displayTitle.toUpperCase()}
</Typography>
</Grid>
<Grid
item
xs={2}
className="pds-search-filter-dropdown-button-grid"
>
<Checkbox
sx={{ padding: 0 }}
onChange={variant === "single" ? onCheckedRadio : onChecked}
name={option.value}
value={value}
checked={option.isChecked}
disabled={
option.isChecked && option.title === "all" ? true : false
}
<IconButton aria-label="star" onClick={handleCollapseClick}>
{isCollapsed ? (
<IconArrowCircleDown />
) : (
<IconArrowCircleUp />
)}
</IconButton>
</Grid>
</Grid>
</Box>
{!isCollapsed ? (
<Grid
container
spacing={2}
alignItems="center"
sx={{ paddingBottom: 0 }}
>
<Grid item xs={12}>
<TextField
className="pds-filter-textfield"
id="subfilter"
value={subFilter}
variant="standard"
onChange={onSubFilterChange}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<IconSearch />
</InputAdornment>
),
}}
/>
<Typography variant="h6" weight="regular">
{option.title.toUpperCase()}

<span className="pds-search-filter-count-span">
{option.title === "all"
? ""
: " (" + option.resultsFound + ")"}
</span>
</Typography>
</Box>
) : (
<></>
)
</Grid>
</Grid>
) : (
<></>
)}
</Box>
{!isCollapsed ? (
<Box className="pds-search-filter-checkbox-container">
{options.map((option) =>
titleIncludesSubFilter(option.title, subFilter) ? (
<Box
className="pds-search-filter-checkbox-box"
sx={{
cursor: "pointer",
display: "flex",
alignItems: "start",
}}
>
{variant !== "single" ? (
<>
<Checkbox
sx={{ padding: 0 }}
onChange={onChecked}
name={option.value}
value={value}
checked={option.isChecked}
disabled={option.isChecked && option.title === "all"}
/>
<Typography variant="h6" weight="regular">
{option.title.toUpperCase()}

<span className="pds-search-filter-count-span">
{option.title === "all"
? ""
: " (" + option.resultsFound + ")"}
</span>
</Typography>
</>
) : (
<div>
<Typography
variant="h6"
weight="regular"
onClick={() =>
onCheckedRadio(
option.value,
!option.isChecked,
value
)
}
>
{option.title.toUpperCase()}

<span className="pds-search-filter-count-span">
{option.title === "all"
? ""
: " (" + option.resultsFound + ")"}
</span>
</Typography>
</div>
)}
</Box>
) : (
<></>
)
)}
</Box>
) : (
""
)}
<Divider />
</div>
) : (
""
<></>
)}
<Divider />
</div>
</>
);
};

Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/src/components/Filters/Filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Chip, Typography } from "@nasapds/wds-react";
export type FiltersProps = {
filters: FilterProps[];
onChecked: (event: ChangeEvent<HTMLInputElement>) => void;
onCheckedRadio: (event: ChangeEvent<HTMLInputElement>) => void;
onCheckedRadio: (name: string, checked: boolean, value: string) => void;
onFilterChipDelete: (value: string, parentValue: string) => void;
onFilterClear: () => void;
collapseAll?: boolean;
Expand Down Expand Up @@ -41,7 +41,7 @@ const Filters = ({
filter.options.forEach((option) => {
if (option.value !== "all" && option.isChecked) {
const optionProps = {
title: option.title,
title: filter.displayTitle + " : " + option.title,
value: option.value,
resultsFound: option.resultsFound,
isChecked: option.isChecked,
Expand Down
Loading

0 comments on commit 9ea4090

Please sign in to comment.