lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Make step content scrollable overflow adjust results step

Browse source 
- Results step is now the last step but doesn't restrict the user from going back
This commit is contained in:
Dana Lambert 2021-11-02 11:11:55 +13:00
parent 039d8d14ec
commit 8638fd3041
4 changed files with 57 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/assets/styles/step.scss
View file

@ -1,10 +1,17 @@
.step-container {
flex-grow: 1;
overflow: auto;
}
.step-overlay {
background-color: #191919c2;
height: 100%;
min-height: 100%;
padding-left: 3vw;
padding-right: 3vw;
display: flex;
flex-direction: column;
}
.step-overlay .row {
flex-grow: 1;
}

66
frontend/src/components/Stepper.js
View file

@ -11,15 +11,16 @@ import HabitatStep from './steps/habitat/HabitatStep';
import ZoneStep from './steps/zone/ZoneStep';
import ProjectSpecificsStep from './steps/specifics/ProjectSpecificsStep';
import SummaryStep from './steps/summary/ZoneStep';
import ResultsStep from './steps/Results'
import ResultsStep from './steps/results/ResultsStep'
const steps = [
{'label': 'Select location', 'component': LocationStep },
{'label': 'Choose soil', 'component': SoilStep },
{'label': 'Choose habitat', 'component': HabitatStep },
{'label': 'Select zone', 'component': ZoneStep },
{'label': 'Project specifics', 'component': ProjectSpecificsStep },
{'label': 'Summary', 'component': SummaryStep }
{ 'label': 'Select location', 'component': LocationStep },
{ 'label': 'Choose soil', 'component': SoilStep },
{ 'label': 'Choose habitat', 'component': HabitatStep },
{ 'label': 'Select zone', 'component': ZoneStep },
{ 'label': 'Project specifics', 'component': ProjectSpecificsStep },
{ 'label': 'Summary', 'component': SummaryStep },
{ 'label': 'Results', 'component': ResultsStep }
];
export default function StepperWizard(props) {
@ -41,12 +42,12 @@ export default function StepperWizard(props) {
setNextDisabled(true);
};
let CurrentStep = activeStep >= steps.length ? steps[steps.length-1].component : steps[activeStep].component;
let CurrentStep = activeStep >= steps.length ? steps[steps.length - 1].component : steps[activeStep].component;
return (
<Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column"}}>
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom:'2vw' }}>
{steps.map((step, index) => {
<Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column", overflow: "hidden" }}>
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom: '2vw' }}>
{steps.map((step) => {
return (
<Step key={step.label}>
<StepLabel>{step.label}</StepLabel>
@ -54,33 +55,22 @@ export default function StepperWizard(props) {
);
})}
</Stepper>
{activeStep === steps.length ? (
<React.Fragment sx={{ flexGrow: 1 }}>
<ResultsStep {...props} />
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
<Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleReset}>Reset</Button>
</Box>
</React.Fragment>
) : (
<React.Fragment>
<CurrentStep {...props} setNextDisabled={setNextDisabled} />
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
Back
</Button>
<Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleNext} disabled={nextDisabled}>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</Box>
</React.Fragment>
)}
<React.Fragment>
<CurrentStep {...props} setNextDisabled={setNextDisabled} />
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
Back
</Button>
<Box sx={{ flex: '1 1 auto' }} />
{activeStep === steps.length - 1 ?
<Button onClick={handleReset}>Reset</Button> : <Button onClick={handleNext} disabled={nextDisabled}>Next</Button>}
</Box>
</React.Fragment>
</Box>
);
}

19
frontend/src/components/steps/Results.js
View file

@ -1,19 +0,0 @@
import Step from './Step';
import { ListGroup, ListGroupItem } from 'reactstrap';
export default function Results(props) {
const stepContent = (
<div>
<h5 className="pt-4">Plant List</h5>
<ListGroup>
{props.plants.map(function (plant, i) {
return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
})}
</ListGroup>
</div>
)
return (
<Step contentComponent={stepContent} />
)
}

21
frontend/src/components/steps/results/ResultsStep.js Normal file
View file

@ -0,0 +1,21 @@
import Step from '../Step';
import { ListGroup, ListGroupItem } from 'reactstrap';
export default function ResultsStep(props) {
const stepContent = (
<div>
<h5 className="pt-4">Plant List</h5>
<div>
<ListGroup>
{props.plants.map(function (plant, i) {
return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
})}
</ListGroup>
</div>
</div>
)
return (
<Step contentComponent={stepContent} />
)
}