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 +++++++++++++++++++++++++++++-------
 src/containers/WaybillPanel.tsx | 20 +++++++-------------
 2 files changed, 36 insertions(+), 20 deletions(-)

(limited to 'src/containers')

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>
   );
 };
diff --git a/src/containers/WaybillPanel.tsx b/src/containers/WaybillPanel.tsx
index ca40169..397b16b 100644
--- a/src/containers/WaybillPanel.tsx
+++ b/src/containers/WaybillPanel.tsx
@@ -3,35 +3,29 @@ import { useHistory } from 'react-router-dom';
 import Input from '../components/Input';
 import Button from '../components/Button';
 import Paper from '../components/Paper';
-import { post } from '../requests';
+import { patch } from '../requests';
 import { PanelProps } from './Service/ServiceContext';
 
 
 const WaybillPanel: React.FC<PanelProps> = ({ item }) => {
   const history = useHistory();
 
-  const handleExecute = () => post(`/waybills/${item._id}/execute`)
+  const handleExecute = () => patch(`/waybills/${item._id}`, { status: 'executed' })
     .then(() => history.push('/waybills'));
 
-  const handleCancel = () => post(`/waybills/${item._id}/cancel`)
+  const handleCancel = () => patch(`/waybills/${item._id}`, { status: 'cancelled' })
     .then(() => history.push('/waybills'));
 
   const executed = item.status === 'executed';
-  const total = item.product.price * item.quantity;
 
   return (
     <div className="m-4 p-4 pl-16 border-l flex flex-col">
       <p className="text-lg">
-        Итоговая сумма: ${total}
+        Итоговая сумма: ${item.total}
       </p>
-      <div>
-        <Button route={`/contractors/${item.contractorId}`} variant="outlined">
-          Перейти к контрагенту
-        </Button>
-        <Button route={`/products/${item.productId}`} variant="outlined">
-          Перейти к продукту
-        </Button>
-      </div>
+      <Button route={`/contractors/${item.contractorId}`} variant="outlined">
+        Перейти к контрагенту
+      </Button>
       {
         executed
           ? <Button onClick={handleCancel}>Откатить</Button>
-- 
cgit v1.2.3