Add summary step to the wizard
This commit is contained in:
Dana Lambert
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": {
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@mui/icons-material": "^5.0.4",
|
||||
"@mui/material": "^5.0.2",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
|
|
@ -2834,6 +2835,38 @@
|
|||
"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": {
|
||||
"version": "5.0.2",
|
||||
"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": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
"dependencies": {
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@mui/icons-material": "^5.0.4",
|
||||
"@mui/material": "^5.0.2",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@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) {
|
||||
|
||||
useEffect(() => {
|
||||
const [expanded, setExpanded] = React.useState(null);
|
||||
const [locationDetails, setLocationDetails] = React.useState({})
|
||||
|
||||
const getLocationDetails = () => {
|
||||
LocationRepository.getLocationData(props.filters).then(result => {
|
||||
setLocationDetails(result);
|
||||
})
|
||||
}
|
||||
|
||||
const handleChange = (panel) => (event, isExpanded) => {
|
||||
setExpanded(isExpanded ? panel : false);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
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 (
|
||||
<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