From 746c0191380aef770f711bcfebc3cbd919c61b7d Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 18 Mar 2021 20:32:41 +0300 Subject: feat: improve WaybillForm --- .eslintrc.json | 1 + package.json | 2 + src/components/Button.tsx | 2 +- src/containers/ProductForm.tsx | 1 + src/containers/WaybillForm.tsx | 84 +++++++++++++++++++++++++++--------------- yarn.lock | 12 ++++++ 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 { 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 = ({ setFieldValue, values }) => { - const [recordsNumber, setRecordsNumber] = useState(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 (
- {_.times(recordsNumber).map(index => ( - +
+ +
+ {values.records.map((record, index) => ( + - +
+ + +
+ +
+
))} 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" -- cgit v1.2.3