InventoryActionForm.tsx

import * as React from 'react';
import { Form, Field, FormProps, FormRenderProps } from 'react-final-form';
import { createStyles, withStyles } from '@material-ui/core/styles';
import { useTranslation, withTranslation } from 'react-i18next';

// Validation
import { required, validatePositiveNumber } from '@gringlobal-ce/client/utilities/validators';

// UI
import { Grid } from '@material-ui/core';
import { TextField } from '@gringlobal-ce/client/ui/common/form/TextField';
import { PageSection } from '@gringlobal-ce/client/ui/common/layout/Section';
import { CodeValueField } from 'common/CodeValue';
import DateAndFormatComponent from 'common/DateAndFormatComponent';

// Model
import { InventoryAction } from '@gringlobal-ce/client/model/gringlobal';
import { CooperatorAutocomplete } from 'common/Cooperator';
import MethodField from 'common/MethodField';

/**
 * Form for InventoryActionRequest
 *
 * GGCE API
 */

const styles = (theme) => createStyles({
  textField: {
  },
  switchWrapper: {
    display: 'flex',
    flexDirection: 'row',
  },
});

interface IInternalProps {
  onCancelEdit: () => void;
  apiError: string;
  isNew: boolean;
}

function InternalForm({ handleSubmit, onCancelEdit, isNew, apiError }: IInternalProps & FormRenderProps) {
  const { t } = useTranslation();

  return (
    <form onSubmit={ handleSubmit } id="inventory-action-form">
      <Grid container spacing={ 4 }>

        <Grid item xs={ 12 }>
          { /* {"type":"string"} */ }
          <Field
            label={ t(['client:model.InventoryAction.actionNameCode', 'client:model.AbstractAction.actionNameCode', 'client:model._.actionNameCode']) }
            helperText={ t(['client:model.InventoryAction.actionNameCode_hint', 'client:model.AbstractAction.actionNameCode_hint', 'client:model._._hint']) }
            name="actionNameCode"
            type="text"
            component={ CodeValueField }
            codeGroup={ InventoryAction.CodeGroup.actionNameCode }
            sortByAlphabet
            required
            validate={ required }
            autoFocus
          />
        </Grid>

        <Grid item xs={ 12 } sm={ 6 }>
          { /* {"type":"number","format":"double","nullable":true} */ }
          <Field
            label={ t(['client:model.InventoryAction.quantity', 'client:model._.quantity']) }
            helperText={ t(['client:model.InventoryAction.quantity_hint', 'client:model._._hint']) }
            name="quantity"
            type="text"
            component={ TextField }
            validate={ validatePositiveNumber }
          />
        </Grid>

        <Grid item xs={ 12 } sm={ 6 }>
          { /* {"type":"string"} */ }
          <Field
            label={ t(['client:model.InventoryAction.quantityUnitCode', 'client:model._.quantityUnitCode']) }
            helperText={ t(['client:model.InventoryAction.quantityUnitCode_hint', 'client:model._._hint']) }
            name="quantityUnitCode"
            type="text"
            component={ CodeValueField }
            codeGroup={ InventoryAction.CodeGroup.quantityUnitCode }
          />
        </Grid>

        <Grid item xs={ 12 } sm={ 6 }>
          { /* {"$ref":"#/components/schemas/Method"} */ }
          <Field
            label={ t(['client:model.InventoryAction.method', 'client:model._.method']) }
            helperText={ t(['client:model.InventoryAction.method_hint', 'client:model._._hint']) }
            name="method"
            type="text"
            component={ MethodField }
          />
        </Grid>

        <Grid item xs={ 12 } sm={ 6 }>
          { /* {"$ref":"#/components/schemas/Cooperator"} */ }
          <Field
            label={ t(['client:model.InventoryAction.cooperator', 'client:model.AbstractAction.cooperator', 'client:model._.cooperator']) }
            helperText={ t(['client:model.InventoryAction.cooperator_hint', 'client:model.AbstractAction.cooperator_hint', 'client:model._._hint']) }
            name="cooperator"
            component={ CooperatorAutocomplete }
          />
        </Grid>

        <DateAndFormatComponent
          name="notBeforeDate"
          label={ t(['client:model.InventoryAction.notBeforeDate', 'client:model.AbstractAction.notBeforeDate', 'client:model._.notBeforeDate']) }
          helperText={ t(['client:model.InventoryAction.notBeforeDate_hint', 'client:model.AbstractAction.notBeforeDate_hint', 'client:model._._hint']) }
          codeLabel={ t(['client:model.InventoryAction.notBeforeDateCode', 'client:model.AbstractAction.notBeforeDateCode', 'client:model._.notBeforeDateCode']) }
          codeGroup={ InventoryAction.CodeGroup.notBeforeDateCode }
          shrink
        />

        {!isNew && (
          <>
            <DateAndFormatComponent
              name="startedDate"
              label={ t(['client:model.InventoryAction.startedDate', 'client:model.AbstractAction.startedDate', 'client:model._.startedDate']) }
              helperText={ t(['client:model.InventoryAction.startedDate_hint', 'client:model.AbstractAction.startedDate_hint', 'client:model._._hint']) }
              codeLabel={ t(['client:model.InventoryAction.startedDateCode', 'client:model.AbstractAction.startedDateCode', 'client:model._.startedDateCode']) }
              codeGroup={ InventoryAction.CodeGroup.startedDateCode }
              shrink
            />
            <DateAndFormatComponent
              name="completedDate"
              label={ t(['client:model.InventoryAction.completedDate', 'client:model.AbstractAction.completedDate', 'client:model._.completedDate']) }
              helperText={ t(['client:model.InventoryAction.completedDate_hint', 'client:model.AbstractAction.completedDate_hint' , 'client:model._._hint']) }
              codeLabel={ t(['client:model.InventoryAction.completedDateCode', 'client:model.AbstractAction.completedDateCode', 'client:model._.completedDateCode']) }
              codeGroup={ InventoryAction.CodeGroup.completedDateCode }
              shrink
            />
          </>
        )}

        <Grid item xs={ 12 }>
          { /* {"type":"string"} */ }
          <Field
            name="note"
            label={ t(['client:model.InventoryAction.note', 'client:model.AbstractAction.note', 'client:model._.note']) }
            helperText={ t(['client:model.InventoryAction.note_hint', 'client:model.AbstractAction.note_hint', 'client:model._._hint']) }
            component={ TextField }
            type="text"
            multiline
          />
        </Grid>
      </Grid>

      { apiError && <PageSection title={ t('common:label.apiError') }>
        <Grid container spacing={ 2 }>
          <Grid item xs={ 12 } style={ { color: 'red' } }>{ apiError }</Grid>
        </Grid>
      </PageSection>
      }
    </form>
  );
}


interface IInventoryActionRequestForm {
  initialValues: InventoryAction;
  onCancelEdit: () => void;
}

function InventoryActionRequestForm({ onSubmit, initialValues, onCancelEdit, error }: IInventoryActionRequestForm & FormProps) {

  return (
    <Form
      initialValues={ initialValues }
      onSubmit={ onSubmit }
      render={ (props) =>
        <InternalForm { ...props } isNew={ !initialValues || !initialValues.id } onCancelEdit={ onCancelEdit } apiError={ error }/> }
    />
  );
}

export default withStyles(styles)(withTranslation()(InventoryActionRequestForm));