fox/interviews_InfoTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

try new layout again

Browse Source
This commit is contained in:
Fox 2026-06-24 13:14:18 +01:00
parent 7c5b884db0
commit ab6c443092
1 changed files with 96 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
frontend/src/components/sidebar.tsx
View File

@ -1,4 +1,4 @@
import { Autocomplete, Box, Divider, Grid, InputLabel, MenuItem, Paper, Rating, Select, SelectChangeEvent, TextField, ToggleButton, Typography } from "@mui/material";
import { Autocomplete, Box, Divider, Grid, InputLabel, MenuItem, Paper, Rating, Select, SelectChangeEvent, Switch, TextField, ToggleButton, Typography } from "@mui/material";
import getCities from "../functions/getCities";
import FilterState from "../models/filterState";
import { useEffect, useState } from "react";
@ -35,111 +35,107 @@ export default function Sidebar(props : SidebarProps) {
<Typography variant='h5' component='h2'>Filter Conveyancers</Typography>
</Box>
<Box sx={{ p: 2}}>
<Grid container spacing={1} sx={{width: '100%'}}>
<Grid size={10}>
<Typography component='legend'>Firm Name</Typography>
<TextField
label='Firm Name'
variant='standard'
value={props.filters.namePart}
onChange={e => props.onChange(Object.assign({}, {...props.filters}, {namePart: (e.target as any).value}))}
/>
</Grid>
<Grid size={2}>
<ToggleButton
value="check"
selected={props.filters.nameOnly}
onChange={() => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: !props.filters.nameOnly}))}
>
{props.filters.nameOnly
? <CheckIcon color='success' />
: <ClearIcon color='error' />}
</ToggleButton>
</Grid>
</Grid>
<Typography component='legend'>Firm Name</Typography>
<TextField
label='Firm Name'
variant='standard'
value={props.filters.namePart}
onChange={e => props.onChange(Object.assign({}, {...props.filters}, {namePart: (e.target as any).value}))}
/>
</Box>
<Divider />
<Box sx={{ p: 2}}>
<Typography component='legend'>Cities</Typography>
<Autocomplete
multiple
options={cities}
value={props.filters.cities}
getOptionLabel={capitaliseFirstLetter}
onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {cities: value}))}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Cities"
placeholder=""
/>
)}
<Typography component='legend'>Search by Firm Name Only</Typography>
<Switch
value={props.filters.nameOnly}
onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: value}))}
/>
</Box>
<Divider />
<Box sx={{p: 2}}>
<Grid container spacing={1} sx={{width: '100%'}}>
<Grid size={6}>
<Typography component='legend'>Min. Rating</Typography>
<Rating
name='Min. Rating'
precision={0.5}
value={props.filters.minRating}
size='medium'
onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {minRating: value}))}
/>
</Grid>
<Grid size={6}>
<InputLabel id='ratings-label'>Rating Provider</InputLabel>
<Select
labelId='ratings-label'
value={props.filters.ratingsProvider}
onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {ratingsProvider: (e.target as any).value}))}
>
{ratingsProviders.map(provider => {
return (
<MenuItem
value={provider}
selected={provider === props.filters.ratingsProvider}>{capitaliseFirstLetter(provider)}
</MenuItem>
)
})}
</Select>
</Grid>
</Grid>
</Box>
<Divider />
<Box sx={{p: 2}}>
<Typography component='legend'>Results per Page</Typography>
<NumberField
label=""
value={props.filters.resultsPerPage}
onValueChange={value => props.onChange(Object.assign({}, {...props.filters}, {resultsPerPage: value, currentPage: 1}))}
min={10}
max={40}
/>
</Box>
<Divider />
<Box sx={{p: 2}}>
<InputLabel id='sort-label'>Sort By</InputLabel>
<Select
labelId='sort-label'
value={props.filters.sortBy}
onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {sortBy: (e.target as any).value}))}
>
{sortingOptions.map(option => {
return (
<MenuItem
value={option.value}
selected={option.value === props.filters.sortBy}
{!props.filters.nameOnly &&
<>
<Divider />
<Box sx={{ p: 2}}>
<Typography component='legend'>Cities</Typography>
<Autocomplete
multiple
options={cities}
value={props.filters.cities}
getOptionLabel={capitaliseFirstLetter}
onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {cities: value}))}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Cities"
placeholder=""
/>
)}
/>
</Box>
<Divider />
<Box sx={{p: 2}}>
<Grid container spacing={1} sx={{width: '100%'}}>
<Grid size={6}>
<Typography component='legend'>Min. Rating</Typography>
<Rating
name='Min. Rating'
precision={0.5}
value={props.filters.minRating}
size='medium'
onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {minRating: value}))}
/>
</Grid>
<Grid size={6}>
<InputLabel id='ratings-label'>Rating Provider</InputLabel>
<Select
labelId='ratings-label'
value={props.filters.ratingsProvider}
onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {ratingsProvider: (e.target as any).value}))}
>
{option.name}
</MenuItem>
)
})}
</Select>
</Box>
{ratingsProviders.map(provider => {
return (
<MenuItem
value={provider}
selected={provider === props.filters.ratingsProvider}>{capitaliseFirstLetter(provider)}
</MenuItem>
)
})}
</Select>
</Grid>
</Grid>
</Box>
<Divider />
<Box sx={{p: 2}}>
<Typography component='legend'>Results per Page</Typography>
<NumberField
label=""
value={props.filters.resultsPerPage}
onValueChange={value => props.onChange(Object.assign({}, {...props.filters}, {resultsPerPage: value, currentPage: 1}))}
min={10}
max={40}
/>
</Box>
<Divider />
<Box sx={{p: 2}}>
<InputLabel id='sort-label'>Sort By</InputLabel>
<Select
labelId='sort-label'
value={props.filters.sortBy}
onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {sortBy: (e.target as any).value}))}
>
{sortingOptions.map(option => {
return (
<MenuItem
value={option.value}
selected={option.value === props.filters.sortBy}
>
{option.name}
</MenuItem>
)
})}
</Select>
</Box>
</>}
</Paper>
)
}