WIP on the emissions and energy calculator

src/api/src/graphql/resolvers/mutations/update-vocabulary/trees/emission-types.csv

@@ -0,0 +1,7 @@
+parent,term,tree
+,Emission,emissionTypes
+Emission,Combustion,emissionTypes
+Emission,Process,emissionTypes
+Emission,Fugitive emissions,emissionTypes
+Emission,"Agriculture, forrestry, and fisheries",emissionTypes
+Emission,Waste,emissionTypes

src/client/src/components/multiselect/index.jsx

@@ -6,10 +6,11 @@ import OutlinedInput from '@material-ui/core/OutlinedInput'
 import Box from '@material-ui/core/Box'
 import MenuItem from '@material-ui/core/MenuItem'
 import Checkbox from '@material-ui/core/Checkbox'
+import FormHelperText from '@material-ui/core/FormHelperText'
 import ListItemText from '@material-ui/core/ListItemText'
 import useTheme from '@material-ui/core/styles/useTheme'
 
-export default ({ id, options, value, setValue, label }) => {
+export default ({ id, options, value, setValue, label, helperText = '' }) => {
   const theme = useTheme()
 
   return (
@@ -38,6 +39,7 @@ export default ({ id, options, value, setValue, label }) => {
             <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
               {selected.map(value => (
                 <Chip
+                  size="small"
                   color="primary"
                   key={value}
                   label={value}
@@ -54,6 +56,7 @@ export default ({ id, options, value, setValue, label }) => {
             </MenuItem>
           ))}
         </Select>
+        <FormHelperText style={{ marginLeft: 14 }}>{helperText}</FormHelperText>
       </FormControl>
     </div>
   )

src/client/src/pages/submit-project/forms/mitigation/calculators/emissions/index.jsx

@@ -1,5 +1,83 @@
-import MultiSelect from '../../../../../../components/multiselect'
+import { WithControlledVocabulary } from '../../../../gql-form-binder'
+import Multiselect from '../../../../../../components/multiselect'
+import { DatePicker } from '@material-ui/pickers'
+import Grid from '@material-ui/core/Grid'
 
-export default ({ calculator, updateCalculator }) => {
-  return 'hi'
+export default ({ calculator = {}, updateCalculator = {} }) => {
+  const { emissionTypes = [], startYear = null, endYear = null } = calculator
+
+  return (
+    <>
+      <WithControlledVocabulary root="Emission" tree="emissionTypes">
+        {({ options }) => {
+          return (
+            <Multiselect
+              id="emissions-calculator"
+              options={options.map(({ term }) => term)}
+              value={emissionTypes}
+              helperText="Select all applicable emissions types"
+              label={'Emissions types'}
+              setValue={value =>
+                updateCalculator(
+                  Object.assign(
+                    { ...calculator },
+                    {
+                      emissionTypes: value,
+                    }
+                  )
+                )
+              }
+            />
+          )
+        }}
+      </WithControlledVocabulary>
+
+      {/* DATE RANGE */}
+      <Grid container spacing={2}>
+        {/* START DATE */}
+        <Grid item xs={12} sm={6}>
+          <DatePicker
+            fullWidth
+            inputVariant="outlined"
+            margin="normal"
+            clearable
+            variant="dialog"
+            views={['year']}
+            animateYearScrolling
+            format="yyyy"
+            placeholder={'Start year'}
+            label={'Start year'}
+            id="emission-calculator-mitigation-start"
+            helperText={'What year did/will the mitigation project start?'}
+            value={startYear}
+            onChange={value =>
+              updateCalculator(Object.assign({ ...calculator }, { startYear: value }))
+            }
+          />
+        </Grid>
+
+        {/* END DATE */}
+        <Grid item xs={12} sm={6}>
+          <DatePicker
+            fullWidth
+            inputVariant="outlined"
+            margin="normal"
+            clearable
+            variant="dialog"
+            views={['year']}
+            animateYearScrolling
+            format="yyyy"
+            placeholder={'End year'}
+            label={'End year'}
+            id="emission-calculator-mitigation-end"
+            helperText={'What year did/will the mitigation project end?'}
+            value={endYear}
+            onChange={value =>
+              updateCalculator(Object.assign({ ...calculator }, { endYear: value }))
+            }
+          />
+        </Grid>
+      </Grid>
+    </>
+  )
 }

src/client/src/pages/submit-project/forms/mitigation/calculators/energy/index.jsx

@@ -1,31 +1,83 @@
 import { WithControlledVocabulary } from '../../../../gql-form-binder'
 import Multiselect from '../../../../../../components/multiselect'
+import { DatePicker } from '@material-ui/pickers'
+import Grid from '@material-ui/core/Grid'
 
 export default ({ calculator = {}, updateCalculator = {} }) => {
-  const { renewableTypes = [] } = calculator
+  const { renewableTypes = [], startYear = null, endYear = null } = calculator
 
   return (
-    <WithControlledVocabulary root="Energy source" tree="renewableTypes">
-      {({ options }) => {
-        return (
-          <Multiselect
-            id="energy-calculator"
-            options={options.map(({ term }) => term)}
-            value={renewableTypes}
-            label={'Select renewable types'}
-            setValue={value => {
-              updateCalculator(
-                Object.assign(
-                  { ...calculator },
-                  {
-                    renewableTypes: value,
-                  }
+    <>
+      <WithControlledVocabulary root="Energy source" tree="renewableTypes">
+        {({ options }) => {
+          return (
+            <Multiselect
+              id="energy-calculator"
+              options={options.map(({ term }) => term)}
+              value={renewableTypes}
+              helperText="Select all applicable renewable energy types"
+              label={'Renewable energy types'}
+              setValue={value =>
+                updateCalculator(
+                  Object.assign(
+                    { ...calculator },
+                    {
+                      renewableTypes: value,
+                    }
+                  )
                 )
-              )
-            }}
+              }
+            />
+          )
+        }}
+      </WithControlledVocabulary>
+
+      {/* DATE RANGE */}
+      <Grid container spacing={2}>
+        {/* START DATE */}
+        <Grid item xs={12} sm={6}>
+          <DatePicker
+            fullWidth
+            inputVariant="outlined"
+            margin="normal"
+            clearable
+            variant="dialog"
+            views={['year']}
+            animateYearScrolling
+            format="yyyy"
+            placeholder={'Start year'}
+            label={'Start year'}
+            id="energy-calculator-mitigation-start"
+            helperText={'What year did/will the mitigation project start?'}
+            value={startYear}
+            onChange={value =>
+              updateCalculator(Object.assign({ ...calculator }, { startYear: value }))
+            }
+          />
+        </Grid>
+
+        {/* END DATE */}
+        <Grid item xs={12} sm={6}>
+          <DatePicker
+            fullWidth
+            inputVariant="outlined"
+            margin="normal"
+            clearable
+            variant="dialog"
+            views={['year']}
+            animateYearScrolling
+            format="yyyy"
+            placeholder={'End year'}
+            label={'End year'}
+            id="energy-calculator-mitigation-end"
+            helperText={'What year did/will the mitigation project end?'}
+            value={endYear}
+            onChange={value =>
+              updateCalculator(Object.assign({ ...calculator }, { endYear: value }))
+            }
           />
-        )
-      }}
-    </WithControlledVocabulary>
+        </Grid>
+      </Grid>
+    </>
   )
 }