From bb561b05294c63f0185fe00519509be3948aaf3b Mon Sep 17 00:00:00 2001 From: Dana Lambert Date: Fri, 22 Oct 2021 16:11:52 +1300 Subject: [PATCH] Add summary step to the wizard --- frontend/package-lock.json | 51 ++++++++++ frontend/package.json | 1 + .../steps/summary/SummaryContent.js | 95 ++++++++++++++++++- .../components/steps/summary/SummaryTable.js | 28 ++++++ 4 files changed, 171 insertions(+), 4 deletions(-) create mode 100644 frontend/src/components/steps/summary/SummaryTable.js diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 331b3eb..35766ef 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -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", diff --git a/frontend/package.json b/frontend/package.json index fa1f739..c17e004 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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", diff --git a/frontend/src/components/steps/summary/SummaryContent.js b/frontend/src/components/steps/summary/SummaryContent.js index 6db4d7a..acf1270 100644 --- a/frontend/src/components/steps/summary/SummaryContent.js +++ b/frontend/src/components/steps/summary/SummaryContent.js @@ -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 ( -

Summary Content

+
+ Please review your choices presented below: + + } + > + 1. Location Data + + + + + + + } + > + 2. Soil Properties + + + + + + + } + > + 3. Project Site Details + + + + + + + } > + 4. Project Specifics + + + + + +
) } diff --git a/frontend/src/components/steps/summary/SummaryTable.js b/frontend/src/components/steps/summary/SummaryTable.js new file mode 100644 index 0000000..8342d4a --- /dev/null +++ b/frontend/src/components/steps/summary/SummaryTable.js @@ -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 ( + + + + {props.rows.map((row) => ( + + + {row.name} + + {row.value} + + ))} + +
+ + ); +}