src/containers/WaybillForm.tsx


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

import React from 'react';
import { Form, Field } from 'formik';
import Input from '../components/Input';
import hooks from '../hooks/useAPIClient';

const WaybillForm: React.FC = () => {
  const { data: contractors } = hooks.contractors.useList();
  const { data: products } = hooks.products.useList();

  return (
    <Form id="form">
      <div className="max-w-lg">
        <Field name="operation" as="select">
          <option value="in">Приход</option>
          <option value="out">Расход</option>
        </Field>
        <Field name="contractorId" as="select">
          {contractors?.map(contractor => (
            <option value={contractor._id}>{contractor.name}</option>
          ))}
        </Field>
        <Field name="productId" as="select">
          {products?.map(product => (
            <option value={product._id}>{product.name}</option>
          ))}
        </Field>
        <Input name="quantity" type="number" label="Количество" />
      </div>
    </Form>
  );
};

export default WaybillForm;