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