From 640739f3234dfe3392566e76fc950dde4b42af09 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 17 Mar 2021 03:25:28 +0300
Subject: feat: allow multiple products in a waybill

---
 src/containers/WaybillForm.tsx | 36 +++++++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

(limited to 'src/containers/WaybillForm.tsx')

diff --git a/src/containers/WaybillForm.tsx b/src/containers/WaybillForm.tsx
index fedc9c4..2167d17 100644
--- a/src/containers/WaybillForm.tsx
+++ b/src/containers/WaybillForm.tsx
@@ -1,10 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Form, FormikProps } from 'formik';
+import _ from 'lodash';
 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';
 
 const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
+  const [recordsNumber, setRecordsNumber] = useState<number>(values.records.length);
+
+  const handleAddRecord = () => setRecordsNumber(v => v + 1);
+
   const contractorOptions = useOptions('contractors', 'contractorId', values, setFieldValue);
   const productOptions = useOptions('products', 'productId', values, setFieldValue);
 
@@ -15,11 +22,6 @@ const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
         label="Контрагент"
         options={contractorOptions}
       />
-      <Select
-        name="productId"
-        label="Товар"
-        options={productOptions}
-      />
       <Select
         name="operation"
         label="Операция"
@@ -28,7 +30,27 @@ const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
           { key: 'out', label: 'Расход' },
         ]}
       />
-      <Input name="quantity" type="number" label="Количество" />
+      <Button onClick={handleAddRecord}>+</Button>
+      {_.times(recordsNumber).map(index => (
+        <Paper>
+          <Select
+            name={`records.${index}.productId`}
+            label="Товар"
+            options={productOptions}
+          />
+          <Input
+            name={`records.${index}.price`}
+            type="number"
+            label="Цена, $"
+          />
+          <Input
+            name={`records.${index}.quantity`}
+            type="number"
+            label="Количество"
+          />
+          {values.records[index]?.price * values.records[index]?.quantity || 0}
+        </Paper>
+      ))}
     </Form>
   );
 };
-- 
cgit v1.2.3