CascadeParametersForm.jsx

import React from 'react';
import { CASCADE_OPTIONS, DEFAULT_CASCADE_PARAMS } from '../../common/constants';
import {
  TextField, FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox
} from '@mui/material';
import { map } from 'lodash'

const CascadeParametersForm = ({onChange, defaultParams}) => {
  const [params, setParams] = React.useState(defaultParams || {...DEFAULT_CASCADE_PARAMS})

  const _onChange = (param, value) => {
    let newParams = {...params, [param]: value}
    setParams(newParams)
    onChange(newParams)
  }

  return (
    <div className='col-xs-12 no-side-padding'>
      <div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
        <FormControl fullWidth>
          <InputLabel>Method</InputLabel>
          <Select
            value={params.method}
            label="Method"
            onChange={event => _onChange('method', event.target.value)}
            size='small'
          >
            {
              map(CASCADE_OPTIONS.method, method => (
                <MenuItem size='small' value={method.id} key={method.id}>
                  {`${method.name} (${method.id})`}
                </MenuItem>
              ))
            }
          </Select>
        </FormControl>
      </div>
      <div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
        <FormControlLabel
          size='small'
          onChange={event => _onChange('cascadeHierarchy', event.target.checked)}
          value={params.cascadeHierarchy}
          control={<Checkbox size='small' checked={params.cascadeHierarchy} />}
          label="Cascade Hierarchy"
          labelPlacement="right"
        />
        <FormControlLabel
          size='small'
          onChange={event => _onChange('cascadeMappings', event.target.checked)}
          value={params.cascadeMappings}
          control={<Checkbox size='small' checked={params.cascadeMappings} />}
          label="Cascade Mappings"
          labelPlacement="right"
        />
        <FormControlLabel
          size='small'
          onChange={event => _onChange('includeRetired', event.target.checked)}
          value={params.includeRetired}
          control={<Checkbox size='small' checked={params.includeRetired} />}
          label="Include Retired"
          labelPlacement="right"
        />
        <FormControlLabel
          size='small'
          onChange={event => _onChange('reverse', event.target.checked)}
          value={params.reverse}
          control={<Checkbox size='small' checked={params.reverse} />}
          label="Cascade Direction Backwards"
          labelPlacement="right"
        />
        <FormControlLabel
          size='small'
          onChange={event => _onChange('view', event.target.checked ? 'hierarchy' : 'flat')}
          value={params.view === 'hierarchy'}
          control={<Checkbox size='small' checked={params.view === 'hierarchy'} />}
          label="Hierarchical Response"
          labelPlacement="right"
        />
      </div>
      <div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
        <TextField
          fullWidth
          value={params.cascadeLevels}
          label='Cascade Levels'
          onChange={event => _onChange('cascadeLevels', event.target.value)}
          size='small'
          placeholder='e.g. 1, 2, 3...*'
        />
      </div>
      <div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
        <TextField
          fullWidth
          value={params.mapTypes}
          label='MapTypes'
          onChange={event => _onChange('mapTypes', event.target.value)}
          size='small'
          placeholder='e.g. Q-AND-A,CONCEPT-SET'
        />
      </div>
      <div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
        <TextField
          fullWidth
          value={params.excludeMapTypes}
          label='ExcludeMapTypes'
          onChange={event => _onChange('excludeMapTypes', event.target.value)}
          size='small'
          placeholder='e.g. Q-AND-A,CONCEPT-SET'
        />
      </div>
      <div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
        <TextField
          fullWidth
          value={params.returnMapTypes}
          label='ReturnMapTypes'
          onChange={event => _onChange('returnMapTypes', event.target.value)}
          size='small'
        />
      </div>
      <div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
        <TextField
          fullWidth
          value={params.omitIfExistsIn}
          label='OmitIfExistsIn'
          onChange={event => _onChange('omitIfExistsIn', event.target.value)}
          size='small'
        />
      </div>
    </div>
  )
}

export default CascadeParametersForm;