Skip to content

Commit c7c4636

Browse files
jaje800jaje800
committed
more fancy forms
1 parent de157f5 commit c7c4636

File tree

1 file changed

+130
-79
lines changed

1 file changed

+130
-79
lines changed

‎src/components/Filter/Filter.jsx‎

Lines changed: 130 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react'
22
import {
3+
Chip,
4+
Divider,
35
FormControl,
46
FormControlLabel,
57
FormHelperText,
@@ -9,7 +11,8 @@ import {
911
Select,
1012
Slider,
1113
Stack,
12-
Switch
14+
Switch,
15+
Typography
1316
} from '@mui/material'
1417
import { ThemeProvider, createTheme } from '@mui/material/styles'
1518
import { useSelector } from 'react-redux'
@@ -18,6 +21,7 @@ import { setSelectedProductFilters } from '../../redux/slices/mainSlice'
1821
import { store } from '../../redux/store'
1922
import { newSearch } from '../../utils/searchHelper'
2023
import './Filter.css'
24+
import { Box } from '@mui/system'
2125

2226
const Filter = () => {
2327
// State that should contain the selected filters
@@ -86,33 +90,49 @@ const Filter = () => {
8690
const constraint =
8791
_selectedProductData.constraints.properties[constraintName]
8892
if (constraint.type === 'integer') {
93+
const marks = [
94+
{
95+
value: constraint.minimum,
96+
label: constraint.minimum
97+
},
98+
{
99+
value: constraint.maximum,
100+
label: constraint.minimum
101+
}
102+
]
103+
89104
filterContainer.push(
90105
<FormControl key={constraintName} sx={{ marginTop: 4 }}>
91-
<InputLabel
92-
htmlFor={constraintName}
93-
sx={{ color: '#FFF', paddingTop: 2 }}
94-
>
95-
{constraint.title}
96-
</InputLabel>
97-
<Slider
98-
id={constraintName}
99-
name={constraintName}
100-
valueLabelDisplay="on"
101-
min={constraint.minimum}
102-
max={constraint.maximum}
103-
value={_selectedProductFilters[constraintName] || 0}
104-
onChange={(event, newValue) => {
105-
store.dispatch(
106-
setSelectedProductFilters({
107-
..._selectedProductFilters,
108-
[constraintName]: newValue
109-
})
110-
)
111-
}}
112-
required={_selectedProductData.constraints.required.includes(
113-
constraintName
114-
)}
106+
<FormControlLabel
107+
control={
108+
<Slider
109+
id={constraintName}
110+
name={constraintName}
111+
valueLabelDisplay="auto"
112+
min={constraint.minimum}
113+
max={constraint.maximum}
114+
value={_selectedProductFilters[constraintName] || 0}
115+
onChange={(event, newValue) => {
116+
store.dispatch(
117+
setSelectedProductFilters({
118+
..._selectedProductFilters,
119+
[constraintName]: newValue
120+
})
121+
)
122+
}}
123+
required={_selectedProductData.constraints.required.includes(
124+
constraintName
125+
)}
126+
/>
127+
}
128+
label={constraint.title}
129+
labelPlacement="top"
115130
/>
131+
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
132+
<Typography variant="body2">{constraint.minimum}</Typography>
133+
<Typography variant="body2">{constraint.maximum}</Typography>
134+
135+
</Box>
116136
<FormHelperText sx={{ color: '#FFF', paddingTop: 3.5 }}>
117137
{constraint.description}
118138
</FormHelperText>
@@ -130,6 +150,28 @@ const Filter = () => {
130150
>
131151
{constraint.title}
132152
</InputLabel>
153+
<FormControlLabel
154+
control={
155+
<Switch
156+
id={constraintName}
157+
name={constraintName}
158+
aria-describedby={constraintName}
159+
checked={
160+
_selectedProductFilters[constraintName] || constraint.default
161+
}
162+
onChange={(event) => {
163+
store.dispatch(
164+
setSelectedProductFilters({
165+
..._selectedProductFilters,
166+
[constraintName]: event.target.checked
167+
})
168+
)
169+
}}
170+
/>
171+
}
172+
label={constraint.title}
173+
labelPlacement="top"
174+
/>
133175
<Slider
134176
id={constraintName}
135177
name={constraintName}
@@ -156,28 +198,29 @@ const Filter = () => {
156198
if (constraint.type === 'string') {
157199
filterContainer.push(
158200
<FormControl key={constraintName}>
159-
<InputLabel
160-
htmlFor={constraintName}
161-
sx={{ color: '#FFF', paddingTop: 0 }}
162-
>
163-
{constraint.title}
164-
</InputLabel>
165-
<Input
166-
id={constraintName}
167-
name={constraintName}
168-
aria-describedby={constraintName}
169-
required={_selectedProductData.constraints.required.includes(
170-
constraintName
171-
)}
172-
onChange={(event, newValue) => {
173-
store.dispatch(
174-
setSelectedProductFilters({
175-
..._selectedProductFilters,
176-
[constraintName]: event.target.value
177-
})
178-
)
179-
}}
201+
<FormControlLabel
202+
control={
203+
<Input
204+
id={constraintName}
205+
name={constraintName}
206+
aria-describedby={constraintName}
207+
required={_selectedProductData.constraints.required.includes(
208+
constraintName
209+
)}
210+
onChange={(event, newValue) => {
211+
store.dispatch(
212+
setSelectedProductFilters({
213+
..._selectedProductFilters,
214+
[constraintName]: event.target.value
215+
})
216+
)
217+
}}
218+
/>
219+
}
220+
label={constraint.title}
221+
labelPlacement="top"
180222
/>
223+
181224
<FormHelperText>{constraint.description}</FormHelperText>
182225
</FormControl>
183226
)
@@ -230,29 +273,31 @@ const Filter = () => {
230273

231274
filterContainer.push(
232275
<FormControl key={constraintName}>
233-
<InputLabel
234-
htmlFor={constraintName}
235-
sx={{ color: '#FFF', paddingTop: 0 }}
236-
>
237-
{constraint.title}
238-
</InputLabel>
239-
<Select
240-
id={constraintName}
241-
name={constraintName}
242-
required={_selectedProductData.constraints.required.includes(
243-
constraintName
244-
)}
245-
onChange={(event) => {
246-
store.dispatch(
247-
setSelectedProductFilters({
248-
..._selectedProductFilters,
249-
[constraintName]: event.target.value
250-
})
251-
)
252-
}}
253-
>
254-
{options}
255-
</Select>
276+
<FormControlLabel
277+
control={
278+
<Select
279+
id={constraintName}
280+
name={constraintName}
281+
required={_selectedProductData.constraints.required.includes(
282+
constraintName
283+
)}
284+
fullWidth
285+
onChange={(event) => {
286+
store.dispatch(
287+
setSelectedProductFilters({
288+
..._selectedProductFilters,
289+
[constraintName]: event.target.value
290+
})
291+
)
292+
}}
293+
>
294+
{options}
295+
</Select>
296+
}
297+
label={constraint.title}
298+
labelPlacement="top"
299+
/>
300+
256301
<FormHelperText>{constraint.description}</FormHelperText>
257302
</FormControl>
258303
)
@@ -270,17 +315,23 @@ const Filter = () => {
270315

271316
return (
272317
<ThemeProvider theme={theme}>
273-
<div style={{ padding: '15px' }} data-testid="Search">
274-
<form onSubmit={processSearchBtn}>
318+
<form onSubmit={processSearchBtn}>
319+
<Divider sx={{ background: 'white'}}>
320+
<Chip
321+
label="Constraints"
322+
size="small"
323+
sx={{ backgroundColor: 'white' }}
324+
/>
325+
</Divider>
326+
<div style={{ padding: '15px' }} data-testid="Search">
275327
<Stack gap={4}>{filterContainer}</Stack>
276-
277-
<div className="" style={{ marginTop: 24 }}>
278-
<button className={`actionButton searchButton`} type="submit">
279-
Find Opportunities
280-
</button>
281-
</div>
282-
</form>
283-
</div>
328+
</div>
329+
<div className="" style={{ marginTop: 24 }}>
330+
<button className={`actionButton searchButton`} type="submit">
331+
Find Opportunities
332+
</button>
333+
</div>
334+
</form>
284335
</ThemeProvider>
285336
)
286337
}

0 commit comments

Comments
 (0)