InventoryActionForm.tsx 7.18 KB
Newer Older
Maksym Tishchenko's avatar
Maksym Tishchenko committed
1
2
3
4
5
6
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
7
import { required, validatePositiveNumber } from '@gringlobal-ce/client/utilities/validators';
Maksym Tishchenko's avatar
Maksym Tishchenko committed
8
9
10
11
12
13

// 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';
14
import DateAndFormatComponent from 'common/DateAndFormatComponent';
Maksym Tishchenko's avatar
Maksym Tishchenko committed
15
16
17
18
19
20
21
22
23

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

/**
 * Form for InventoryActionRequest
 *
Matija Obreza's avatar
Matija Obreza committed
24
 * GGCE API
Maksym Tishchenko's avatar
Maksym Tishchenko committed
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
 */

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
52
53
            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']) }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
54
55
56
57
            name="actionNameCode"
            type="text"
            component={ CodeValueField }
            codeGroup={ InventoryAction.CodeGroup.actionNameCode }
58
            sortByAlphabet
Maksym Tishchenko's avatar
Maksym Tishchenko committed
59
60
            required
            validate={ required }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
61
            autoFocus
Maksym Tishchenko's avatar
Maksym Tishchenko committed
62
63
64
65
66
67
          />
        </Grid>

        <Grid item xs={ 12 } sm={ 6 }>
          { /* {"type":"number","format":"double","nullable":true} */ }
          <Field
68
69
            label={ t(['client:model.InventoryAction.quantity', 'client:model._.quantity']) }
            helperText={ t(['client:model.InventoryAction.quantity_hint', 'client:model._._hint']) }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
70
71
72
            name="quantity"
            type="text"
            component={ TextField }
73
            validate={ validatePositiveNumber }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
74
75
76
77
78
79
          />
        </Grid>

        <Grid item xs={ 12 } sm={ 6 }>
          { /* {"type":"string"} */ }
          <Field
80
81
            label={ t(['client:model.InventoryAction.quantityUnitCode', 'client:model._.quantityUnitCode']) }
            helperText={ t(['client:model.InventoryAction.quantityUnitCode_hint', 'client:model._._hint']) }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
82
83
84
85
86
87
88
89
90
91
            name="quantityUnitCode"
            type="text"
            component={ CodeValueField }
            codeGroup={ InventoryAction.CodeGroup.quantityUnitCode }
          />
        </Grid>

        <Grid item xs={ 12 } sm={ 6 }>
          { /* {"$ref":"#/components/schemas/Method"} */ }
          <Field
92
93
            label={ t(['client:model.InventoryAction.method', 'client:model._.method']) }
            helperText={ t(['client:model.InventoryAction.method_hint', 'client:model._._hint']) }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
94
95
96
97
98
99
100
101
102
            name="method"
            type="text"
            component={ MethodField }
          />
        </Grid>

        <Grid item xs={ 12 } sm={ 6 }>
          { /* {"$ref":"#/components/schemas/Cooperator"} */ }
          <Field
103
104
            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']) }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
105
106
107
108
109
            name="cooperator"
            component={ CooperatorAutocomplete }
          />
        </Grid>

Maksym Tishchenko's avatar
Maksym Tishchenko committed
110
111
        <DateAndFormatComponent
          name="notBeforeDate"
112
113
114
          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']) }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
115
116
117
118
          codeGroup={ InventoryAction.CodeGroup.notBeforeDateCode }
          shrink
        />

Maksym Tishchenko's avatar
Maksym Tishchenko committed
119
120
        {!isNew && (
          <>
121
122
            <DateAndFormatComponent
              name="startedDate"
123
124
125
              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']) }
126
127
128
129
130
              codeGroup={ InventoryAction.CodeGroup.startedDateCode }
              shrink
            />
            <DateAndFormatComponent
              name="completedDate"
131
132
133
              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']) }
134
135
136
              codeGroup={ InventoryAction.CodeGroup.completedDateCode }
              shrink
            />
Maksym Tishchenko's avatar
Maksym Tishchenko committed
137
138
139
          </>
        )}

140
141
142
143
144
145
146
147
148
149
150
        <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>
Maksym Tishchenko's avatar
Maksym Tishchenko committed
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
      </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 }/> }
    />
  );
}

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