SubsetCreatorForm.tsx 6.74 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1 2 3 4 5 6 7 8 9
import * as React from 'react';
import { translate } from 'react-i18next';
import {Field, reduxForm, FieldArray} from 'redux-form';

// utilities
import {log} from 'utilities/debug';
import Validators from 'utilities/Validators';

// constants
10
import {SUBSET_CREATOR_FORM} from 'subsets/constants';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
11 12

// models
13 14
import Subset from 'model/subset/Subset';
import SubsetCreator, {CreatorRole} from 'model/subset/SubsetCreator';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

// ui
import {withStyles} from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from 'ui/common/forms/FormControl';
import {TextField} from 'ui/common/text-field';


interface ISubsetCreatorFormProps extends React.ClassAttributes<any> {
    t: any;
    initialValues: any;
    fields: any;
    classes: any;
    subset: Subset;
36 37
    createSubsetCreator: () => Promise<SubsetCreator>;
    deleteCreatorRequest: (creator: SubsetCreator) => Promise<SubsetCreator>;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
}

const styles = (theme) => ({
    /* tslint:disable */
    RadioGrid: {
        flexDirection: 'row' as 'row',
        justifyContent: 'space-evenly' as 'space-evenly',
        '& > label': {
            flexBasis: '45%',
        },
    }
});
/* tslint:enable */
const renderRadioGroup = translate()(({input, meta, t, classes}) => {
  const onInputChange = (event, value) => input.onChange(value);

  return (
    <FormControl fullWidth required meta={ meta }>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
56
        <FormLabel>{ t(`subsets.dashboard.p.stepper.creators.Role`) }</FormLabel>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
57 58 59 60 61 62 63
        <RadioGroup
            { ...input }
            value={ input.value }
            onChange={ onInputChange }
            className={ classes.RadioGrid }
        >
            { Object.keys(CreatorRole).map((role) => (
Oleksii Savran's avatar
Oleksii Savran committed
64 65 66 67 68
                <FormControlLabel
                  value={ role }
                  label={ t(`subsets.common.creators.role.${role}`) }
                  control={ <Radio/> }
                />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
            )) }
        </RadioGroup>
    </FormControl>
  );
});

class SubsetCreatorForm extends React.Component<ISubsetCreatorFormProps, any> {

    public createCreator = () => {
        log('create creator event');
        this.props.createSubsetCreator();
    }

    public deleteCreator = (fields, index) => () => {
        this.props.deleteCreatorRequest(fields.get(index));
    }

Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
86
    public renderCreators = ({ classes, fields, meta: { touched, error, submitFailed } , t}) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
87 88 89 90 91 92 93

        return(
            <div>
            { fields.map((creator, index) => (

                    <div key={ index } className="m-20 p-20 even-row">
                        <div>
Oleksii Savran's avatar
Oleksii Savran committed
94
                            <IconButton aria-label="Delete" className="float-right" onClick={ this.deleteCreator(fields, index) }>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
95 96 97 98 99
                                <DeleteIcon />
                            </IconButton>
                        </div>
                        <Field required name={ `${creator}.fullName` }
                               component={ TextField }
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
100 101
                               label={ t(`subsets.dashboard.p.stepper.creators.fullName`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.fullNamePlaceholder`) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
102 103 104 105 106 107 108 109 110
                               validate={ [ Validators.required ] }
                        />
                        <Field required name={ `${creator}.role` }
                               classes={ classes }
                                component={ renderRadioGroup }
                        />
                        <Field name={ `${creator}.institutionalAffiliation` }
                               component={ TextField }
                               type="text"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
111 112
                               label={ t(`subsets.dashboard.p.stepper.creators.institutionalAffiliation`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.institutionalAffiliationPlaceholder`) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
113 114 115
                        />
                        <Field name={ `${creator}.email` }
                               component={ TextField }
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
116 117
                               type="text" label={ t(`subsets.dashboard.p.stepper.creators.email`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.emailPlaceholder`) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
118 119 120 121 122
                               validate={ [ Validators.emailAddress ] }
                        />
                        <Field name={ `${creator}.phoneNumber` }
                               component={ TextField }
                               type="text"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
123 124
                               label={ t(`subsets.dashboard.p.stepper.creators.phone`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.phonePlaceholder`) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
125 126 127 128 129
                               validate={ [ Validators.phoneNumber ] }
                        />
                        <Field name={ `${creator}.fax` }
                               component={ TextField }
                               type="text"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
130 131
                               label={ t(`subsets.dashboard.p.stepper.creators.fax`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.faxPlaceholder`) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
132 133 134 135 136
                               validate={ [ Validators.phoneNumber ] }
                        />
                        <Field name={ `${creator}.instituteAddress` }
                               component={ TextField }
                               type="text"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
137 138
                               label={ t(`subsets.dashboard.p.stepper.creators.address`) }
                               placeholder={ t(`subsets.dashboard.p.stepper.creators.addressPlaceholder`) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
139 140 141 142 143 144 145 146 147
                        />
                    </div>
                ),
            ) }
        </div>
        );
    }

    public render() {
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
148
        const { t } = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
149 150 151
        return (
            <Grid spacing={ 0 } container>
                <form className="full-width">
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
152
                    <FieldArray name="creators" classes={ this.props.classes } component={ this.renderCreators } t={ t }/>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
153 154
                </form>
                <Grid item xs={ 12 } className="back-white">
155
                    <Button variant="contained" type="button" onClick={ this.createCreator } style={ { margin: '20px' } }>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
156
                      { t(`subsets.dashboard.p.stepper.creators.addSubsetCreator`) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
157 158 159 160 161 162 163
                    </Button>
                </Grid>
            </Grid>
        );
    }
}

Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
164
export default translate()(reduxForm({
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
165 166
    form: SUBSET_CREATOR_FORM,
    enableReinitialize: true,
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
167
})(translate()(((withStyles as any)(styles)(SubsetCreatorForm)))));