Skip to content

Commit

Permalink
[BHBC-1224] Fix IUCN Input Issue (#600)
Browse files Browse the repository at this point in the history 
* [BHBC-1224] Fix IUCN Input Issue
  • Loading branch information
@jeznorth
jeznorth authored Oct 19, 2021
1 parent e67088e commit e188970
Show file tree
Hide file tree
Showing 4 changed files with 1,342 additions and 1,136 deletions.
4 changes: 2 additions & 2 deletions app/src/components/stepper-wizard/StepperWizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ const StepperWizard: React.FC<IStepperWizardProps> = (props) => {

return (
<>
<Box mb={4}>
<Box mb={3}>
<Typography variant="h2" className={classes.stepTitle}>
{steps[activeStep].stepTitle}
</Typography>
Expand All @@ -159,7 +159,7 @@ const StepperWizard: React.FC<IStepperWizardProps> = (props) => {
</Typography>

<Box>
<Box mt={6}>
<Box mt={5}>
<Formik
key={steps[activeStep].stepTitle}
innerRef={innerRef}
Expand Down
237 changes: 125 additions & 112 deletions app/src/features/projects/components/ProjectIUCNForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@ import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import Grid from '@material-ui/core/Grid';
import IconButton from '@material-ui/core/IconButton';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import Typography from '@material-ui/core/Typography';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { mdiTrashCanOutline } from '@mdi/js';
import { mdiArrowRight, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
import Icon from '@mdi/react';
import { IMultiAutocompleteFieldOption } from 'components/fields/MultiAutocompleteFieldVariableSize';
import { FieldArray, useFormikContext } from 'formik';
Expand All @@ -19,12 +18,10 @@ import yup from 'utils/YupSchema';

const useStyles = makeStyles((theme: Theme) => ({
iucnInputContainer: {
flex: '1 1 auto',
overflowX: 'hidden'
overflow: 'hidden'
},
iucnInput: {
flex: '0 0 auto',
width: '33.333%'
width: '250px'
}
}));

Expand Down Expand Up @@ -91,123 +88,139 @@ const ProjectIUCNForm: React.FC<IProjectIUCNFormProps> = (props) => {
name="classificationDetails"
render={(arrayHelpers: any) => (
<Box>
<Grid container direction="row">
{values.classificationDetails.map((classificationDetail, index) => {
const classificationMeta = getFieldMeta(`classificationDetails.[${index}].classification`);
const subClassification1Meta = getFieldMeta(`classificationDetails.[${index}].subClassification1`);
const subClassification2Meta = getFieldMeta(`classificationDetails.[${index}].subClassification2`);

return (
<Grid data-testid="iucn-classification-grid" item xs={12} key={index}>
<Box display="flex" alignItems="center" mt={-2}>
<Box display="flex" className={classes.iucnInputContainer}>
<Box className={classes.iucnInput} my={2} pr={2}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="classification">Classification</InputLabel>
<Select
id={`classificationDetails.[${index}].classification`}
name={`classificationDetails.[${index}].classification`}
labelId="classification"
label="Classification"
value={classificationDetail.classification}
onChange={(e: any) => {
classificationDetail.subClassification1 = ('' as unknown) as number;
classificationDetail.subClassification2 = ('' as unknown) as number;
handleChange(e);
}}
error={classificationMeta.touched && Boolean(classificationMeta.error)}
inputProps={{ 'aria-label': 'Classification' }}>
{props.classifications.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
<FormHelperText>{classificationMeta.touched && classificationMeta.error}</FormHelperText>
</FormControl>
</Box>
<Box className={classes.iucnInput} my={2} pr={2}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="subClassification1">Sub-classification</InputLabel>
<Select
id={`classificationDetails.[${index}].subClassification1`}
name={`classificationDetails.[${index}].subClassification1`}
labelId="subClassification1"
label="Sub-classification"
value={classificationDetail.subClassification1}
onChange={(e: any) => {
classificationDetail.subClassification2 = ('' as unknown) as number;
handleChange(e);
}}
disabled={!classificationDetail.classification}
error={subClassification1Meta.touched && Boolean(subClassification1Meta.error)}
inputProps={{ 'aria-label': 'subClassification1' }}>
{props.subClassifications1
// Only show the sub-classification 1 categories whose iucn1_id matches the classification id
.filter((item: any) => item.iucn1_id === classificationDetail.classification)
.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
<FormHelperText>
{subClassification1Meta.touched && subClassification1Meta.error}
</FormHelperText>
</FormControl>
</Box>
<Box my={2} pr={2} className={classes.iucnInput}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="subClassification2">Sub-classification</InputLabel>
<Select
id={`classificationDetails.[${index}].subClassification2`}
name={`classificationDetails.[${index}].subClassification2`}
labelId="subClassification2"
label="Sub-classification"
value={classificationDetail.subClassification2}
onChange={handleChange}
disabled={!classificationDetail.subClassification1}
error={subClassification2Meta.touched && Boolean(subClassification2Meta.error)}
inputProps={{ 'aria-label': 'subClassification2' }}>
{props.subClassifications2
// Only show the sub-classification 2 categories whose iucn1_id matches the sub-classification 1 iucn2_id
.filter((item: any) => item.iucn2_id === classificationDetail.subClassification1)
.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
<FormHelperText>
{subClassification2Meta.touched && subClassification2Meta.error}
</FormHelperText>
</FormControl>
</Box>
</Box>
<Box pl={1}>
<IconButton
data-testid="delete-icon"
color="primary"
aria-label="delete"
onClick={() => arrayHelpers.remove(index)}>
<Icon path={mdiTrashCanOutline} size={1} />
</IconButton>
</Box>
{values.classificationDetails.map((classificationDetail, index) => {
const classificationMeta = getFieldMeta(`classificationDetails.[${index}].classification`);
const subClassification1Meta = getFieldMeta(`classificationDetails.[${index}].subClassification1`);
const subClassification2Meta = getFieldMeta(`classificationDetails.[${index}].subClassification2`);

return (
<Box
display="flex"
alignItems="center"
mt={-1}
mb={1}
data-testid="iucn-classification-grid"
key={index}>
<Box display="flex" alignItems="center" className={classes.iucnInputContainer} mr={1}>
<Box className={classes.iucnInput} py={1}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="classification">Classification</InputLabel>
<Select
id={`classificationDetails.[${index}].classification`}
name={`classificationDetails.[${index}].classification`}
labelId="classification"
label="Classification"
value={classificationDetail.classification}
onChange={(e: any) => {
classificationDetail.subClassification1 = ('' as unknown) as number;
classificationDetail.subClassification2 = ('' as unknown) as number;
handleChange(e);
}}
error={classificationMeta.touched && Boolean(classificationMeta.error)}
inputProps={{ 'aria-label': 'Classification' }}>
{props.classifications.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
<FormHelperText>{classificationMeta.touched && classificationMeta.error}</FormHelperText>
</FormControl>
</Box>

<Box mx={1}>
<Icon path={mdiArrowRight} size={0.75}></Icon>
</Box>

<Box className={classes.iucnInput} py={1}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="subClassification1">Sub-classification</InputLabel>
<Select
id={`classificationDetails.[${index}].subClassification1`}
name={`classificationDetails.[${index}].subClassification1`}
labelId="subClassification1"
label="Sub-classification"
value={classificationDetail.subClassification1}
onChange={(e: any) => {
classificationDetail.subClassification2 = ('' as unknown) as number;
handleChange(e);
}}
disabled={!classificationDetail.classification}
error={subClassification1Meta.touched && Boolean(subClassification1Meta.error)}
inputProps={{ 'aria-label': 'subClassification1' }}>
{props.subClassifications1
// Only show the sub-classification 1 categories whose iucn1_id matches the classification id
.filter((item: any) => item.iucn1_id === classificationDetail.classification)
.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
<FormHelperText>
{subClassification1Meta.touched && subClassification1Meta.error}
</FormHelperText>
</FormControl>
</Box>

<Box mx={1}>
<Icon path={mdiArrowRight} size={0.75}></Icon>
</Box>

<Box className={classes.iucnInput} py={1}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="subClassification2">Sub-classification</InputLabel>
<Select
id={`classificationDetails.[${index}].subClassification2`}
name={`classificationDetails.[${index}].subClassification2`}
labelId="subClassification2"
label="Sub-classification"
value={classificationDetail.subClassification2}
onChange={handleChange}
disabled={!classificationDetail.subClassification1}
error={subClassification2Meta.touched && Boolean(subClassification2Meta.error)}
inputProps={{ 'aria-label': 'subClassification2' }}>
{props.subClassifications2
// Only show the sub-classification 2 categories whose iucn1_id matches the sub-classification 1 iucn2_id
.filter((item: any) => item.iucn2_id === classificationDetail.subClassification1)
.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
<FormHelperText>
{subClassification2Meta.touched && subClassification2Meta.error}
</FormHelperText>
</FormControl>
</Box>
</Grid>
);
})}
</Grid>
</Box>

<Box ml={0.5}>
<IconButton
data-testid="delete-icon"
color="primary"
aria-label="delete"
onClick={() => arrayHelpers.remove(index)}>
<Icon path={mdiTrashCanOutline} size={1} />
</IconButton>
</Box>
</Box>
);
})}

{errors?.classificationDetails && !Array.isArray(errors?.classificationDetails) && (
<Box pb={2}>
<Typography style={{ fontSize: '12px', color: '#f44336' }}>{errors.classificationDetails}</Typography>
</Box>
)}

<Box>
<Button
type="button"
variant="outlined"
color="primary"
startIcon={<Icon path={mdiPlus} size={1} />}
aria-label="Add Another"
onClick={() => arrayHelpers.push(ProjectIUCNFormArrayItemInitialValues)}>
Add Classification
Expand Down
Loading

0 comments on commit e188970

Please sign in to comment.