VocabularyForm.tsx 3.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11
import * as React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { translate } from 'react-i18next';

import { log } from 'utilities/debug';

import { VOCABULARY_FORM } from 'vocabulary/constants';
import VocabularyTerm from 'model/vocabulary/VocabularyTerm';

import { TextField } from 'ui/common/text-field';
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
import Heading from 'ui/common/heading';

import ItemsEditor from 'ui/common/ItemsEditor';

import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';

class VocabularyForm extends React.Component<any, any> {

  public render() {
    const { error, handleSubmit, initialValues, t } = this.props;

    const onAddMember = () => {
      log('Adding new term');
      return new VocabularyTerm();
    };

    const onRemoveMember = (item) => {
      log('Removing term', item);
    };

    if (!initialValues) {
      return null;
    }

    const TermEditor = (member, index, fields) => (
      <Grid container key={ index } justify="space-between" alignItems="flex-end">
        <Grid item xs={ 2 } md={ 2 } lg={ 1 }>
          <Field name={ `${member}.code` } type="text" component={ TextField }
                 label={ t('descriptors.admin.c.vocabularyForm.code') }
          />
        </Grid>
        <Grid item xs={ 10 } md={ 10 } lg={ 5 }>
          <Field name={ `${member}.title` } type="text" component={ TextField }
                 label={ t('descriptors.admin.c.vocabularyForm.title') }
          />
        </Grid>
        <Grid item xs={ 12 } lg={ 6 }>
          <Field name={ `${member}.description` } type="text" component={ TextField } multiline
                 label={ t('descriptors.admin.c.vocabularyForm.description') }
          />
        </Grid>
      </Grid>
    );

    return (
      <div>
        <form onSubmit={ handleSubmit }>
          <Heading title={ t('descriptors.admin.c.vocabularyForm.vocabularyDetails') } level={ 2 }/>

          <Field
            required
            name="title"
            label={ t('descriptors.admin.c.vocabularyForm.vocabularyTitle') }
            placeholder={ t('descriptors.admin.c.vocabularyForm.color') }
            component={ TextField }
          />
          <Field
            required
            name="description"
            label={ t('descriptors.admin.c.vocabularyForm.description') }
            placeholder={ t('descriptors.admin.c.vocabularyForm.descriptionPlaceholder') }
            component={ MarkdownField }
          />
          <Field
            required
            name="versionTag"
            label={ t('descriptors.admin.c.vocabularyForm.versionTag') }
            placeholder="1.0"
            component={ TextField }
          />
          <Field
            name="url"
            label={ t('descriptors.admin.c.vocabularyForm.urlToDef') }
            placeholder="https://"
            component={ TextField }
          />
          <Field
            name="termUrlPrefix"
            label={ t('descriptors.admin.c.vocabularyForm.termUrlPrefix') }
            placeholder="???"
            component={ TextField }
          />

          <Heading title={ t('descriptors.admin.c.vocabularyForm.vocabularyTerm') } level={ 3 }/>
          <ItemsEditor
            name="terms"
            itemLabel={ t('descriptors.admin.c.vocabularyForm.vocabularyTerm_plural') }
            addItem={ onAddMember }
            removeItem={ onRemoveMember }
            component={ TermEditor }
          />

          <div>{ error && <strong>{ error }</strong> }</div>
          <Button variant="raised" type="submit">{ t('common:action.saveChanges') }</Button>
        </form>
      </div>
    );
  }
}

export default translate()(connect((state) => ({}), null)(reduxForm({
  form: VOCABULARY_FORM,
  enableReinitialize: true,
})(VocabularyForm)));