1 files changed, 86 insertions, 0 deletions
diff --git a/src/services/waybills/WaybillForm.tsx b/src/services/waybills/WaybillForm.tsx
new file mode 100644
index 0000000..c11ab9e
--- /dev/null
+++ b/src/services/waybills/WaybillForm.tsx
@@ -0,0 +1,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<any>> = ({ 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: any, index: number) => (
+        <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;