Skip to content

Commit 855f703

Browse files
wbglaeserwbglaeser
committed
updates to filter section
1 parent ab64050 commit 855f703

4 files changed

Lines changed: 71 additions & 58 deletions

File tree

‎src/ui/language/translations.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,7 @@ const translations = {
257257
administrativeLevels: "Administrative level",
258258
providingAgencies: "Providing agency",
259259
associatedLaws: "Associated law",
260+
btnClear: "Clear filters",
260261
btnClose: "Close filter",
261262
btn: "Open filter",
262263
tags: "Tag",
@@ -644,6 +645,7 @@ const translations = {
644645
administrativeLevels: "Verwaltungsebene",
645646
providingAgencies: "Zuständige Behörde",
646647
associatedLaws: "Zugehöriges Gesetz",
648+
btnReset: "Alle zurücksetzen",
647649
btnClose: "Filter schließen",
648650
btn: "Filter öffnen",
649651
tags: "Schlagwort"

‎src/ui/screens/eligibilty-overview/EligibilityOverviewScreen.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ const EligibilityOverviewScreen = ({
4545
<VBox sx={{ gap: { xs: 2, md: 4 } }}>
4646
<EligibilityOverviewFilter
4747
t={t}
48-
isDesktop={isDesktop}
4948
filterOptions={filterOptions}
5049
filters={filters}
5150
onChangeFilters={onChangeFilters}

‎src/ui/screens/eligibilty-overview/components/EligibilityOverviewFilter.js‎

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import {
33
Typography,
44
FormControl,
@@ -11,10 +11,11 @@ import {
1111
import { VBox, HBox } from '@/ui/shared-components/LayoutBoxes';
1212
import EligibilityOverviewTag from './EligibilityOverviewTag';
1313
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
14+
import CloseIcon from '@mui/icons-material/Close';
15+
import FilterAltIcon from '@mui/icons-material/FilterAlt';
1416
import theme from '@/theme';
1517

16-
const EligibilityOverviewFilter = ({ t, filterOptions, isDesktop, filters, onChangeFilters }) => {
17-
const [open, setOpen] = useState(false);
18+
const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters }) => {
1819
const handleChange = (key) => (event) => {
1920
onChangeFilters(prev => ({
2021
...prev,
@@ -41,48 +42,61 @@ const EligibilityOverviewFilter = ({ t, filterOptions, isDesktop, filters, onCha
4142
borderRadius: theme.shape.borderRadius,
4243
}}
4344
>
44-
<HBox sx={{ gap: 4, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between' }}>
45-
<Typography variant="h4" sx={{ color: 'blue.main', fontWeight: '400' }}>
46-
{t('app.browseAll.filter.title')}
47-
</Typography>
48-
{
49-
!isDesktop && (
50-
<RegularButton
51-
onClick={() => setOpen(!open)}
52-
variant={'whiteOutlinedBlue'}
53-
text={open ? 'app.browseAll.filter.btnClose' : 'app.browseAll.filter.btn'}
54-
size={'small'}
55-
/>
56-
)
57-
}
58-
{
59-
(isDesktop || open) && (
60-
<HBox sx={{ gap: 4, flexWrap: 'wrap' }}>
61-
{Object.keys(filterOptions).length > 0 && (
62-
Object.keys(filterOptions).map((key, index) => (
63-
<FormControl key={index} sx={{ minWidth: 200 }}>
64-
<InputLabel id={`${key}-label`}>{t(`app.browseAll.filter.${key}`)}</InputLabel>
65-
<Select
66-
labelId={`${key}-label`}
67-
multiple
68-
value={filters[key] || []}
69-
onChange={handleChange(key)}
70-
label={t(`app.browseAll.filter.${key}`)}
71-
renderValue={() => t(`app.browseAll.filter.${key}`)}
72-
sx={{ borderRadius: theme.shape.borderRadius }}
73-
>
74-
{filterOptions[key].map(item => (
75-
<MenuItem key={item.id} value={item.id}>
76-
<Checkbox checked={!!filters[key]?.includes(item.id)} /> <ListItemText primary={item.label} />
77-
</MenuItem>
78-
))}
79-
</Select>
80-
</FormControl>
81-
))
82-
)}
83-
</HBox>
84-
)
85-
}
45+
<HBox sx={{
46+
justifyContent: 'space-between',
47+
alignItems: 'center',
48+
flexWrap: 'wrap',
49+
gap: 2,
50+
borderBottom: '1px solid',
51+
borderColor: 'grey.300',
52+
paddingBottom: 2,
53+
}}>
54+
<HBox sx={{ gap: 1, alignItems: 'center' }}>
55+
<FilterAltIcon sx={{ color: 'black.main', fontSize: 24 }} />
56+
<Typography variant="h2" sx={{ fontWeight: 400 }}>
57+
{t('app.browseAll.filter.title')}
58+
</Typography>
59+
</HBox>
60+
<HBox sx={{ justifyContent: 'flex-end' }}>
61+
<RegularButton
62+
text={t('app.browseAll.filter.btnReset')}
63+
variant={'transparentPink'}
64+
onClick={() => onChangeFilters(() => ({}))}
65+
size='small'
66+
endIcon={<CloseIcon sx={{ fontSize: '16px' }} />}
67+
/>
68+
</HBox>
69+
</HBox>
70+
<HBox sx={{
71+
gap: 4,
72+
alignItems: 'center',
73+
flexWrap: 'wrap',
74+
justifyContent: 'space-between'
75+
}}>
76+
<HBox sx={{ gap: 4, flexWrap: 'wrap' }}>
77+
{Object.keys(filterOptions).length > 0 && (
78+
Object.keys(filterOptions).map((key, index) => (
79+
<FormControl key={index} sx={{ minWidth: 200 }}>
80+
<InputLabel id={`${key}-label`}>{t(`app.browseAll.filter.${key}`)}</InputLabel>
81+
<Select
82+
labelId={`${key}-label`}
83+
multiple
84+
value={filters[key] || []}
85+
onChange={handleChange(key)}
86+
label={t(`app.browseAll.filter.${key}`)}
87+
renderValue={() => t(`app.browseAll.filter.${key}`)}
88+
sx={{ borderRadius: theme.shape.borderRadius }}
89+
>
90+
{filterOptions[key].map(item => (
91+
<MenuItem key={item.id} value={item.id}>
92+
<Checkbox checked={!!filters[key]?.includes(item.id)} /> <ListItemText primary={item.label} />
93+
</MenuItem>
94+
))}
95+
</Select>
96+
</FormControl>
97+
))
98+
)}
99+
</HBox>
86100
</HBox>
87101
{
88102
Object.entries(groupedSelected).length > 0 && (
@@ -99,18 +113,6 @@ const EligibilityOverviewFilter = ({ t, filterOptions, isDesktop, filters, onCha
99113
</HBox>
100114
)
101115
}
102-
{
103-
(isDesktop || open) && (
104-
<HBox sx={{ justifyContent: 'flex-end' }}>
105-
<RegularButton
106-
text={'Clear filters'}
107-
variant={'greyContained'}
108-
onClick={() => onChangeFilters(() => ({}))}
109-
size='xsmall'
110-
/>
111-
</HBox>
112-
)
113-
}
114116
</VBox>
115117
);
116118
};

‎src/ui/shared-components/buttons/ButtonStyles.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,16 @@ const buttonStyles = {
8686
borderColor: "yellow.main",
8787
},
8888
},
89+
transparentPink: {
90+
backgroundColor: "transparent",
91+
color: "pink.main",
92+
borderColor: "transparent",
93+
"&:hover": {
94+
backgroundColor: "black.main",
95+
color: "white.main",
96+
borderColor: "black.main",
97+
},
98+
},
8999
default: {
90100
backgroundColor: "yellow.main",
91101
color: "black.main",

0 commit comments

Comments
 (0)