From 8638fd3041ac990d1ed71e9c569efbc21cf5a900 Mon Sep 17 00:00:00 2001
From: Dana Lambert <danalambert@catalyst.net.nz>
Date: Tue, 2 Nov 2021 11:11:55 +1300
Subject: [PATCH] Make step content scrollable overflow adjust results step -
 Results step is now the last step but doesn't restrict the user from going
 back

---
 frontend/src/assets/styles/step.scss          |  9 ++-
 frontend/src/components/Stepper.js            | 66 ++++++++-----------
 frontend/src/components/steps/Results.js      | 19 ------
 .../components/steps/results/ResultsStep.js   | 21 ++++++
 4 files changed, 57 insertions(+), 58 deletions(-)
 delete mode 100644 frontend/src/components/steps/Results.js
 create mode 100644 frontend/src/components/steps/results/ResultsStep.js

diff --git a/frontend/src/assets/styles/step.scss b/frontend/src/assets/styles/step.scss
index aa01cc5..ccac308 100644
--- a/frontend/src/assets/styles/step.scss
+++ b/frontend/src/assets/styles/step.scss
@@ -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;
 }
diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js
index a0ec809..fff836c 100644
--- a/frontend/src/components/Stepper.js
+++ b/frontend/src/components/Stepper.js
@@ -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>
   );
 }
diff --git a/frontend/src/components/steps/Results.js b/frontend/src/components/steps/Results.js
deleted file mode 100644
index cf65e9e..0000000
--- a/frontend/src/components/steps/Results.js
+++ /dev/null
@@ -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} />
-    )
-}
diff --git a/frontend/src/components/steps/results/ResultsStep.js b/frontend/src/components/steps/results/ResultsStep.js
new file mode 100644
index 0000000..bb04ad2
--- /dev/null
+++ b/frontend/src/components/steps/results/ResultsStep.js
@@ -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} />
+    )
+}