feat: improve WaybillForm

2 files changed, 56 insertions, 29 deletions

diff --git a/src/containers/ProductForm.tsx b/src/containers/ProductForm.tsx
index 060fbbb..f458372 100644
--- a/src/containers/ProductForm.tsx
+++ b/src/containers/ProductForm.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Form } from 'formik';
 import Input from '../components/Input';
+import DatePicker from '../components/DatePicker';
 
 
 const ProductForm: React.FC = () => {
diff --git a/src/containers/WaybillForm.tsx b/src/containers/WaybillForm.tsx
index bd326d2..a6a37e2 100644
--- a/src/containers/WaybillForm.tsx
+++ b/src/containers/WaybillForm.tsx
@@ -1,55 +1,81 @@
-import React, { useState } from 'react';
+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 useOptions from '../hooks/useOptions';
+import hooks from '../hooks/useAPIClient';
+
+
+const mapper = (item: any) => ({ key: item._id, label: item.name });
 
 
 const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
-  const [recordsNumber, setRecordsNumber] = useState<number>(values.records.length);
+  const { data: products } = hooks.products.useList();
+  const { data: contractors } = hooks.contractors.useList();
 
-  const handleAddRecord = () => setRecordsNumber(v => v + 1);
+  if (!values.date) setFieldValue('date', moment().format('YYYY-MM-DD'));
+  if (!values.contractorId && contractors) setFieldValue('contractorId', contractors[0]._id);
 
-  const productInitFields = _.times(recordsNumber).map(index => `records.${index}.productId`);
+  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 contractorOptions = useOptions('contractors', ['contractorId'], values, setFieldValue);
-  const productOptions = useOptions('products', productInitFields, values, setFieldValue);
+  const handleRemoveRecord = (index: number) => () => {
+    const records = [...values.records];
+    records.splice(index, 1);
+    setFieldValue('records', records);
+  };
 
   return (
     <Form id="form">
       <Select
         name="contractorId"
         label="Контрагент"
-        options={contractorOptions}
-      />
-      <Select
-        name="operation"
-        label="Операция"
-        options={[
-          { key: 'in', label: 'Приход' },
-          { key: 'out', label: 'Расход' },
-        ]}
+        options={contractors?.map(mapper)}
       />
-      {_.times(recordsNumber).map(index => (
-        <Paper variant="outlined" className="my-4 md:mx-4">
+      <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={productOptions}
-          />
-          <Input
-            name={`records.${index}.price`}
-            type="number"
-            label="Цена, $"
-          />
-          <Input
-            name={`records.${index}.quantity`}
-            type="number"
-            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>