CropForm.tsx 3.07 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import * as React from 'react';
import {Link} from 'react-router-dom';
import {Field, reduxForm} from 'redux-form';
import Button from '@material-ui/core/Button';

import {CROP_FORM} from 'crop/constants';
import {TextField} from 'ui/common/text-field';
import {log} from 'utilities/debug';
import Validators from 'utilities/Validators';
import ItemsEditor from 'ui/common/ItemsEditor';
import Divider from '@material-ui/core/Divider';


const onAddString = () => {
  log('Adding new string item');
  return '';
};

const onRemoveString = (item) => {
  log('Removing string', item);
};

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
23
const CropForm = ({error, handleSubmit, initialValues, onDelete, cropNames, t}) => {
24

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
25
26
27
28
  const notInUse = (value) => !value || cropNames &&
  Object.keys(cropNames).filter((cropShortName) => cropNames[cropShortName].indexOf(value) !== -1 && cropShortName !== initialValues.shortName).length === 0
    ? undefined
    : t('crop.admin.c.cropForm.alreadyInUse');
29
30
31
32

  const stringField = (otherName, index, fields, itemLabel) => (
    <Field required name={ `${otherName}` } type="text" component={ TextField } label={ itemLabel } validate={ [Validators.required, notInUse] }/>
  );
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
33
34
35

  return (
    <form onSubmit={ handleSubmit }>
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
36
      { initialValues.version >= 0 ? <div>{ t(`crop.admin.c.cropForm.version`, {version: initialValues.version}) }</div> : null }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
37

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
38
39
      <Field disabled={ initialValues.shortName } required name="shortName" label={ t('crop.admin.c.cropForm.cropCode') } component={ TextField } validate={ [Validators.required, Validators.maxLength20] }/>
      <Field required name="name" label={ t('crop.admin.c.cropForm.cropTitle') } component={ TextField } validate={ [Validators.required] }/>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
40
41

      <div className="pb-20 pt-20">
42
        <h4>{ t('crop.admin.c.cropForm.otherNames') }</h4>
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
43
        <ItemsEditor name="otherNames" itemLabel={ t('crop.admin.c.cropForm.otherNames') } addItem={ onAddString } removeItem={ onRemoveString } component={ stringField }/>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
44
45
46
47
48
      </div>
      <div>{ error && <strong>{ error }</strong> }</div>

      <Divider/>
      <div className="pt-20">
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
49
50
        <Button variant="raised" type="submit">{ t('common:action.saveChanges') }</Button>
        { (initialValues._permissions && initialValues._permissions.delete) && <Button onClick={ onDelete } type="button">{ t('common:action.delete') }</Button> }
51
52
53
        <Link to={ `/c/${initialValues.shortName ? initialValues.shortName : ''}` }>
          <Button type="button">{ t('common:action.backTo', {where: `${initialValues.name ? t('crop.common.cropDetails', {cropName: initialValues.name}) : t('crop.common.cropList')}`}) }</Button>
        </Link>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
54
55
56
57
58
      </div>
    </form>
  );
};

59
60
61
62
63
const validate = (values) => {
  if (values.otherNames) {
    const otherNamesError = [];
    values.otherNames.map((otherName, index, array) => {
      if (array.indexOf(otherName) !== index) {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
64
        otherNamesError[index] = 'Duplicate';  // TODO add t for errorMsg
65
66
67
68
69
70
71
      }
    });
    return { otherNames : otherNamesError };
  }
  return {};
};

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
72
73
74
export default reduxForm({
  enableReinitialize: true,
  destroyOnUnmount: false,
75
  validate,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
76
77
  form: CROP_FORM,
})(CropForm);