feat: improve WaybillForm

6 files changed, 72 insertions, 30 deletions

diff --git a/.eslintrc.json b/.eslintrc.json
index b780736..57ece9e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -24,6 +24,7 @@
     "object-curly-newline": 0,
     "react/prop-types": 0,
     "react/no-children-prop": 0,
+    "react/no-array-index-key": 0,
     "react/no-danger": 0,
     "react/jsx-one-expression-per-line": 0,
     "react/button-has-type": 0,
diff --git a/package.json b/package.json
index b9a118f..3709131 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "axios": "^0.21.1",
     "formik": "^2.2.6",
     "lodash": "^4.17.21",
+    "moment": "^2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "@tailwindcss/postcss7-compat": "^2.0.3",
     "@types/lodash": "^4.14.168",
+    "@types/moment": "^2.13.0",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
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>
diff --git a/yarn.lock b/yarn.lock
index 3f0f410..41587fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1773,6 +1773,13 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/moment@^2.13.0":
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/@types/moment/-/moment-2.13.0.tgz#604ebd189bc3bc34a1548689404e61a2a4aac896"
+  integrity sha1-YE69GJvDvDShVIaJQE5hoqSqyJY=
+  dependencies:
+    moment "*"
+
 "@types/node@*":
   version "14.14.34"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.34.tgz#07935194fc049069a1c56c0c274265abeddf88da"
@@ -7475,6 +7482,11 @@ modern-normalize@^1.0.0:
   resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e"
   integrity sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw==
 
+moment@*, moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"