SubsetCreatorForm.tsx 6.68 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) => (
64
                <FormControlLabel value={ role } label={ t(`subsets.common.creators.role.${role}`) } control={ <Radio/> } />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
            )) }
        </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
82
    public renderCreators = ({ classes, fields, meta: { touched, error, submitFailed } , t}) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
83
84
85
86
87
88
89
90
91
92
93
94
95

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

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

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

Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
160
export default translate()(reduxForm({
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
161
162
    form: SUBSET_CREATOR_FORM,
    enableReinitialize: true,
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
163
})(translate()(((withStyles as any)(styles)(SubsetCreatorForm)))));