integrate new ui design with api call

This commit is contained in:
Fox 2026-06-24 13:17:52 +01:00
parent ab6c443092
commit dd0c586a1f
2 changed files with 48 additions and 45 deletions

View File

@ -5,8 +5,6 @@ import { useEffect, useState } from "react";
import NumberField from "./numberField"; import NumberField from "./numberField";
import getRatingsProviders from "../functions/getRatingsProviders"; import getRatingsProviders from "../functions/getRatingsProviders";
import capitaliseFirstLetter from "../functions/capitaliseFirstLetter"; import capitaliseFirstLetter from "../functions/capitaliseFirstLetter";
import CheckIcon from '@mui/icons-material/Check';
import ClearIcon from '@mui/icons-material/Clear';
interface SidebarProps { interface SidebarProps {
filters : FilterState; filters : FilterState;
@ -51,9 +49,9 @@ export default function Sidebar(props : SidebarProps) {
onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: value}))} onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: value}))}
/> />
</Box> </Box>
<Divider />
{!props.filters.nameOnly && {!props.filters.nameOnly &&
<> <>
<Divider />
<Box sx={{ p: 2}}> <Box sx={{ p: 2}}>
<Typography component='legend'>Cities</Typography> <Typography component='legend'>Cities</Typography>
<Autocomplete <Autocomplete
@ -105,6 +103,7 @@ export default function Sidebar(props : SidebarProps) {
</Grid> </Grid>
</Box> </Box>
<Divider /> <Divider />
</>}
<Box sx={{p: 2}}> <Box sx={{p: 2}}>
<Typography component='legend'>Results per Page</Typography> <Typography component='legend'>Results per Page</Typography>
<NumberField <NumberField
@ -135,7 +134,6 @@ export default function Sidebar(props : SidebarProps) {
})} })}
</Select> </Select>
</Box> </Box>
</>}
</Paper> </Paper>
) )
} }

View File

@ -4,24 +4,29 @@ import FilterState from "../models/filterState";
import api from "./axios"; import api from "./axios";
export default async function GetSolicitors(filters : FilterState) { export default async function GetSolicitors(filters : FilterState) {
let queryString = `pageSize=${filters.resultsPerPage}&pageNumber=${filters.currentPage}`;
if (filters.namePart != null && filters.namePart !== '') {
queryString += `&nameFilter=${filters.namePart}`;
}
if (!filters.nameOnly) {
var minRating = filters.minRating; var minRating = filters.minRating;
if (minRating == null) { if (minRating == null) {
minRating = 0; minRating = 0;
} }
queryString += `&minRating=${minRating}&ratingsProvider=${filters.ratingsProvider}`;
let queryString = `pageSize=${filters.resultsPerPage}&pageNumber=${filters.currentPage}&ratingsProvider=${filters.ratingsProvider}&minRating=${minRating}`;
if (filters.cities.length > 0) { if (filters.cities.length > 0) {
queryString += '&cities=' + filters.cities.join('&cities='); queryString += '&cities=' + filters.cities.join('&cities=');
} }
}
if (filters.sortBy != null) { if (filters.sortBy != null) {
queryString += `&orderingType=${filters.sortBy}`; queryString += `&orderingType=${filters.sortBy}`;
} }
if (filters.namePart != null && filters.namePart !== '') {
queryString += `&nameFilter=${filters.namePart}`;
}
const response = await api.get(`/solicitors?${queryString}`); const response = await api.get(`/solicitors?${queryString}`);
return response.data as PaginationResponse<SolicitorSummary>; return response.data as PaginationResponse<SolicitorSummary>;
} }