From 746c0191380aef770f711bcfebc3cbd919c61b7d Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 18 Mar 2021 20:32:41 +0300
Subject: feat: improve WaybillForm

---
 src/components/Button.tsx      |  2 +-
 src/containers/ProductForm.tsx |  1 +
 src/containers/WaybillForm.tsx | 84 +++++++++++++++++++++++++++---------------
 3 files changed, 57 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 35d3f32..dbac20d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -11,7 +11,7 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 
 const variants = {
   contained: 'bg-black text-white hover:underline ring-gray-400',
-  outlined: 'hover:shadow border border-gray-300 ring-gray-200',
+  outlined: 'bg-white hover:shadow border border-gray-300 ring-gray-200',
 };
 
 const sizes = {
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>
-- 
cgit v1.2.3