Add summary step to the wizard
This commit is contained in:
parent
727dfbe818
commit
bb561b0529
4 changed files with 171 additions and 4 deletions
51
frontend/package-lock.json
generated
51
frontend/package-lock.json
generated
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.4.1",
|
"@emotion/react": "^11.4.1",
|
||||||
"@emotion/styled": "^11.3.0",
|
"@emotion/styled": "^11.3.0",
|
||||||
|
"@mui/icons-material": "^5.0.4",
|
||||||
"@mui/material": "^5.0.2",
|
"@mui/material": "^5.0.2",
|
||||||
"@testing-library/jest-dom": "^5.14.1",
|
"@testing-library/jest-dom": "^5.14.1",
|
||||||
"@testing-library/react": "^11.2.7",
|
"@testing-library/react": "^11.2.7",
|
||||||
|
@ -2834,6 +2835,38 @@
|
||||||
"node": ">=6.9.0"
|
"node": ">=6.9.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@mui/icons-material": {
|
||||||
|
"version": "5.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.0.4.tgz",
|
||||||
|
"integrity": "sha512-pW/2bjRGnBZujoLdtH/C+ghT0Tmlk9HmZHF6HuALuVOnRiHF9VwrcNrx0FLHYT0aMARZR4dBA15nU/53R1YNeQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.15.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@mui/material": "^5.0.0",
|
||||||
|
"@types/react": "^16.8.6 || ^17.0.0",
|
||||||
|
"react": "^17.0.2"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@mui/icons-material/node_modules/@babel/runtime": {
|
||||||
|
"version": "7.15.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
|
||||||
|
"integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
|
||||||
|
"dependencies": {
|
||||||
|
"regenerator-runtime": "^0.13.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@mui/material": {
|
"node_modules/@mui/material": {
|
||||||
"version": "5.0.2",
|
"version": "5.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.2.tgz",
|
||||||
|
@ -25645,6 +25678,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@mui/icons-material": {
|
||||||
|
"version": "5.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.0.4.tgz",
|
||||||
|
"integrity": "sha512-pW/2bjRGnBZujoLdtH/C+ghT0Tmlk9HmZHF6HuALuVOnRiHF9VwrcNrx0FLHYT0aMARZR4dBA15nU/53R1YNeQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.15.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": {
|
||||||
|
"version": "7.15.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
|
||||||
|
"integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
|
||||||
|
"requires": {
|
||||||
|
"regenerator-runtime": "^0.13.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@mui/material": {
|
"@mui/material": {
|
||||||
"version": "5.0.2",
|
"version": "5.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.2.tgz",
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.4.1",
|
"@emotion/react": "^11.4.1",
|
||||||
"@emotion/styled": "^11.3.0",
|
"@emotion/styled": "^11.3.0",
|
||||||
|
"@mui/icons-material": "^5.0.4",
|
||||||
"@mui/material": "^5.0.2",
|
"@mui/material": "^5.0.2",
|
||||||
"@testing-library/jest-dom": "^5.14.1",
|
"@testing-library/jest-dom": "^5.14.1",
|
||||||
"@testing-library/react": "^11.2.7",
|
"@testing-library/react": "^11.2.7",
|
||||||
|
|
|
@ -1,12 +1,99 @@
|
||||||
import { useEffect } from 'react';
|
import * as React from 'react';
|
||||||
|
import Accordion from '@mui/material/Accordion';
|
||||||
|
import AccordionSummary from '@mui/material/AccordionSummary';
|
||||||
|
import AccordionDetails from '@mui/material/AccordionDetails';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||||
|
|
||||||
|
import SummaryTable from './SummaryTable'
|
||||||
|
import LocationRepository from '../../../repository/LocationRepository'
|
||||||
|
|
||||||
|
|
||||||
export default function SummaryContent(props) {
|
export default function SummaryContent(props) {
|
||||||
|
const [expanded, setExpanded] = React.useState(null);
|
||||||
|
const [locationDetails, setLocationDetails] = React.useState({})
|
||||||
|
|
||||||
useEffect(() => {
|
const getLocationDetails = () => {
|
||||||
|
LocationRepository.getLocationData(props.filters).then(result => {
|
||||||
|
setLocationDetails(result);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (panel) => (event, isExpanded) => {
|
||||||
|
setExpanded(isExpanded ? panel : false);
|
||||||
|
};
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
props.setNextDisabled(false);
|
props.setNextDisabled(false);
|
||||||
|
!Object.keys(locationDetails).length && getLocationDetails()
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function createData(name, value) {
|
||||||
|
return { name, value };
|
||||||
|
}
|
||||||
|
|
||||||
|
const locationData = [
|
||||||
|
createData('Geographical Coordinates (latitude, longitude)', `(${props.filters.coordinates.lat}, ${props.filters.coordinates.lng})`),
|
||||||
|
createData('Ecological Region', locationDetails.ecological_region || ''),
|
||||||
|
createData('Ecological District', locationDetails.ecological_district || ''),
|
||||||
|
createData('Property Name', locationDetails.full_address || ''),
|
||||||
|
];
|
||||||
|
|
||||||
|
const soilData = [
|
||||||
|
createData('Soil Order', `${locationDetails.soil_name} (${locationDetails.soil_code})` || ''),
|
||||||
|
createData('Soil Variant', props.filters.soilVariant)
|
||||||
|
];
|
||||||
|
|
||||||
|
const siteData = [
|
||||||
|
createData('Habitat', ''),
|
||||||
|
createData('Zone', '')
|
||||||
|
];
|
||||||
|
|
||||||
|
const projectSpecificsData = [
|
||||||
|
createData('Requrements', '')
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<h2>Summary Content</h2>
|
<div className='summary-content'>
|
||||||
|
<Typography mb={2} mt={2} >Please review your choices presented below: </Typography>
|
||||||
|
<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} >
|
||||||
|
<AccordionSummary
|
||||||
|
expandIcon={<ExpandMoreIcon />}
|
||||||
|
>
|
||||||
|
<Typography>1. Location Data</Typography>
|
||||||
|
</AccordionSummary>
|
||||||
|
<AccordionDetails>
|
||||||
|
<SummaryTable rows={locationData} />
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
<Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')} >
|
||||||
|
<AccordionSummary
|
||||||
|
expandIcon={<ExpandMoreIcon />}
|
||||||
|
>
|
||||||
|
<Typography>2. Soil Properties</Typography>
|
||||||
|
</AccordionSummary>
|
||||||
|
<AccordionDetails>
|
||||||
|
<SummaryTable rows={soilData} />
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
<Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')} >
|
||||||
|
<AccordionSummary
|
||||||
|
expandIcon={<ExpandMoreIcon />}
|
||||||
|
>
|
||||||
|
<Typography>3. Project Site Details</Typography>
|
||||||
|
</AccordionSummary>
|
||||||
|
<AccordionDetails>
|
||||||
|
<SummaryTable rows={siteData} />
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
<Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')} >
|
||||||
|
<AccordionSummary expandIcon={<ExpandMoreIcon />} >
|
||||||
|
<Typography>4. Project Specifics</Typography>
|
||||||
|
</AccordionSummary>
|
||||||
|
<AccordionDetails>
|
||||||
|
<SummaryTable rows={projectSpecificsData} />
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
28
frontend/src/components/steps/summary/SummaryTable.js
Normal file
28
frontend/src/components/steps/summary/SummaryTable.js
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import Table from '@mui/material/Table';
|
||||||
|
import TableBody from '@mui/material/TableBody';
|
||||||
|
import TableCell from '@mui/material/TableCell';
|
||||||
|
import TableContainer from '@mui/material/TableContainer';
|
||||||
|
import TableRow from '@mui/material/TableRow';
|
||||||
|
|
||||||
|
export default function BasicTable(props) {
|
||||||
|
return (
|
||||||
|
<TableContainer >
|
||||||
|
<Table sx={{ minWidth: 650 }} size="small" aria-label="simple table">
|
||||||
|
<TableBody>
|
||||||
|
{props.rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.name}
|
||||||
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||||
|
>
|
||||||
|
<TableCell component="th" scope="row">
|
||||||
|
{row.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align="right">{row.value}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in a new issue