PartnerForm.tsx 4.13 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11
import * as React from 'react';
import { PARTNER_FORM } from 'partners/constants';
import { connect } from 'react-redux';
import { setPageTitle } from 'actions/pageTitle';
import { bindActionCreators } from 'redux';

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

import { TextField } from 'ui/common/text-field';
import Heading from 'ui/common/heading';
Matija Obreza's avatar
Matija Obreza committed
12
import { MarkdownField } from 'ui/common/markdown';
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
import ItemsEditor from 'ui/common/ItemsEditor';

import { Field, reduxForm } from 'redux-form';
import Button from '@material-ui/core/Button';
import { PartnerLink } from 'ui/catalog/Links';

const stringField = (member, index, fields, itemLabel) => (
  <Field required name={ `${member}` } type="text" component={ TextField } label={ itemLabel } validate={ [Validators.required] }/>
);

class PartnerForm extends React.Component<any, void> {

  public constructor(props: any) {
    super(props);
    const { setPageTitle, initialValues, t } = this.props;
    setPageTitle(initialValues.name || t('partners.admin.c.form.new'));
  }

  public render() {
    const { error, initialValues, handleSubmit, invalid, submitting, t } = this.props;
    return (
      <form onSubmit={ handleSubmit }>
        <Heading title={ initialValues.name || t('partners.admin.c.form.new') } level={ 2 }/>
        <Field
          required
          name="name"
          component={ TextField }
          type="text"
          label={ t('partners.admin.c.form.name') }
          placeholder={ t('partners.admin.c.form.name') }
          validate={ [Validators.required] }
        />

        <Field
          required
          name="shortName"
          component={ TextField }
          type="text"
          label={ t('partners.admin.c.form.shortName') }
          placeholder="IBM"
          validate={ [Validators.required, Validators.maxLength20] }
        />

        <Field
          name="description"
          component={ MarkdownField }
          label={ t('common:label.description') }
          placeholder={ t('partners.admin.c.form.descriptionPlaceholder') }
        />

        <Field
          name="email"
          component={ TextField }
          type="text"
          label={ t('user.common.email') }
          placeholder="name@domain.com"
          validate={ [Validators.maxLength(100), Validators.emailAddress] }
        />

        <Field
          name="phone"
          component={ TextField }
          type="text" label={ t('user.common.phone') }
          placeholder={ t('partners.admin.c.form.phonePlaceholder') }
          validate={ [Validators.phoneNumber] }
        />

        <Field
          name="address"
          component={ TextField }
          type="text"
          label={ t('geo.common.address') }
          placeholder={ t('geo.common.address') }
          validate={ [Validators.maxLength(500)] }
        />

        <Heading title={ t('partners.admin.c.form.websites') } level={ 4 }/>
        <ItemsEditor name="urls" itemLabel="Website" addItem={ this.onAddString } removeItem={ this.onRemoveString } component={ stringField }/>

        <Heading title={ t('partners.common.wiewsCodes') } level={ 4 }/>
        <ItemsEditor name="wiewsCodes" itemLabel="WIEWS Code" addItem={ this.onAddString } removeItem={ this.onRemoveString } component={ stringField }/>

        <Heading title={ t('partners.common.countries') } level={ 4 }/>
        <ItemsEditor name="countryCodes" itemLabel="Country code" addItem={ this.onAddString } removeItem={ this.onRemoveString } component={ stringField }/>

        <div>{ error && <strong>{ error }</strong> }</div>
        <Button variant="raised" type="submit" disabled={ submitting || invalid }>{ t('common:action.saveChanges') }</Button>
        <PartnerLink to={ initialValues }><Button type="button">{ t('common:action.cancel') }</Button></PartnerLink>
      </form>
    );
  }

  private onAddString() {
    log('Adding new string item');
    return '';
  }

  private onRemoveString(item) {
    log('Removing string', item);
  }
}

export default connect(null, (dispatch) => bindActionCreators({
  setPageTitle,
}, dispatch))(reduxForm({
  form: PARTNER_FORM,
  enableReinitialize: true,
})(PartnerForm));