1
2
3
4
5
6
7
8
9
10
11
12
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
|
import React from 'react';
import { Form, FormikProps } from 'formik';
import _ from 'lodash';
import moment from 'moment';
import Input from '../components/Input';
import Button from '../components/Button';
import Select from '../components/Select';
import Paper from '../components/Paper';
import hooks from '../hooks/useAPIClient';
const mapper = (item: any) => ({ key: item._id, label: item.name });
const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
const { data: products } = hooks.products.useList();
const { data: contractors } = hooks.contractors.useList();
if (!values.date) setFieldValue('date', moment().format('YYYY-MM-DD'));
if (!values.contractorId && contractors?.length) setFieldValue('contractorId', contractors[0]._id);
const handleAddRecord = () => setFieldValue('records', [...values.records, {
productId: _.map(products, '_id').reduce((acc, id) => {
return acc || (!_.map(values.records, 'productId').includes(id) && id);
}, false),
price: '',
quantity: 1,
}]);
const handleRemoveRecord = (index: number) => () => {
const records = [...values.records];
records.splice(index, 1);
setFieldValue('records', records);
};
return (
<Form id="form">
<Select
name="contractorId"
label="Контрагент"
options={contractors?.map(mapper)}
/>
<div className="grid grid-cols-2">
<Select
name="operation"
label="Операция"
options={[
{ key: 'in', label: 'Приход' },
{ key: 'out', label: 'Расход' },
]}
/>
<Input name="date" type="date" label="Дата" />
</div>
{values.records.map((record, index) => (
<Paper variant="outlined" className="my-4 md:mx-4" key={`${index}-${record.productId}`}>
<Select
name={`records.${index}.productId`}
label="Товар"
options={products?.map(mapper)}
required
/>
<div className="grid grid-cols-3">
<Input
name={`records.${index}.price`}
type="number"
label="Цена, $"
required
/>
<Input
name={`records.${index}.quantity`}
type="number"
label="Количество"
required
/>
<div className="flex justify-end items-end">
<Button onClick={handleRemoveRecord(index)} size="sm" variant="outlined">Удалить</Button>
</div>
</div>
</Paper>
))}
<Button onClick={handleAddRecord} variant="outlined" size="sm">Добавить товар</Button>
</Form>
);
};
export default WaybillForm;
|
