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

28
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,8 +35,6 @@ 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%'}}>
<Grid size={10}>
<Typography component='legend'>Firm Name</Typography> <Typography component='legend'>Firm Name</Typography>
<TextField <TextField
label='Firm Name' label='Firm Name'
@ -44,20 +42,17 @@ export default function Sidebar(props : SidebarProps) {
value={props.filters.namePart} value={props.filters.namePart}
onChange={e => props.onChange(Object.assign({}, {...props.filters}, {namePart: (e.target as any).value}))} 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 />
<Box sx={{ p: 2}}>
<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>
{!props.filters.nameOnly &&
<>
<Divider /> <Divider />
<Box sx={{ p: 2}}> <Box sx={{ p: 2}}>
<Typography component='legend'>Cities</Typography> <Typography component='legend'>Cities</Typography>
@ -140,6 +135,7 @@ export default function Sidebar(props : SidebarProps) {
})} })}
</Select> </Select>
</Box> </Box>
</>}
</Paper> </Paper>
) )
} }