+ orderGoodsEditor

src/components/admin/AdminLayoutPage/index.js

@@ -170,6 +170,7 @@ const AdminOrderPageContainer = () => {
     const params = useParams();
     const dispatch = useDispatch();
     dispatch(actionPromiseClear('adminOrderById'));
+    dispatch(actionGoodsAll());
     useEffect(() => {
         if (params._id) {
             dispatch(actionOrderById({ _id: params._id, promiseName: 'adminOrderById' }));

src/components/admin/AdminOrderPage/OrderForm.js

@@ -1,4 +1,4 @@
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import React, { useState, useEffect, useContext } from 'react';
 import { actionPromise, actionPromiseClear } from '../../../reducers';
 import Select from 'react-select';
@@ -20,10 +20,11 @@ import {
     TextField,
     Typography,
 } from '@mui/material';
-import { useFormik } from 'formik';
+import { FormikProvider, useFormik } from 'formik';
 import * as Yup from 'yup';
 import { Error } from '../../common/Error';
 import { statusNumber, statusOptions } from '../../../helpers';
+import { OrderGoodsEditor } from './OrderGoodsEditor';
 
 const deliveryOptions = [
     { label: 'Нова пошта', value: 'nova-poshta' },
@@ -47,6 +48,8 @@ const orderSchema = Yup.object().shape({
 export const OrderForm = ({ serverErrors = [], onSaveClick, onSave, onClose, promiseStatus, order = {} } = {}) => {
     const [inputStatus, setInputStatus] = useState(null);
     const { setAlert } = useContext(UIContext);
+    const goodList = useSelector((state) => state.promise?.goodsAll?.payload || []);
+    const [inputOrderGoods, setInputOrderGoods] = useState([]);
 
     const formik = useFormik({
         initialValues: {
@@ -69,15 +72,15 @@ export const OrderForm = ({ serverErrors = [], onSaveClick, onSave, onClose, pro
             orderToSave.phoneNumber = formik.values.phoneNumber;
             orderToSave.address = formik.values.address;
             orderToSave.delivery = formik.values.delivery;
-            orderToSave.orderGoods = order.orderGoods;
+            orderToSave.orderGoods = inputOrderGoods;
             onSaveClick && onSaveClick();
             onSave(orderToSave);
         },
     });
 
     useEffect(() => {
-        // setInputCategories(order?.categories || []);
         setInputStatus(order?.status || null);
+        setInputOrderGoods(order.orderGoods || []);
         formik.setFieldValue('email', order.email || '');
         formik.setFieldValue('name', order.name || '');
         formik.setFieldValue('address', order.address || '');
@@ -86,6 +89,10 @@ export const OrderForm = ({ serverErrors = [], onSaveClick, onSave, onClose, pro
         formik.setFieldValue('delivery', order.delivery || '');
     }, [order]);
 
+    useEffect(() => {
+        formik.validateForm();
+    }, [formik.values]);
+
     useEffect(() => {
         if (promiseStatus === 'FULFILLED') {
             formik.setSubmitting(false);
@@ -159,10 +166,21 @@ export const OrderForm = ({ serverErrors = [], onSaveClick, onSave, onClose, pro
                         />
                     </Box>
 
+                    <Box sx={{ mt: 3 }}>
+                        <InputLabel className="form-label">Товари</InputLabel>
+                        <OrderGoodsEditor
+                            orderGoods={inputOrderGoods}
+                            goodList={goodList}
+                            onChange={(orderGoods) => {
+                                setInputOrderGoods([...orderGoods]);
+                            }}
+                        />
+                    </Box>
+
                     <Box direction="row" sx={{ mt: 3 }} justifyContent="flex-end">
                         <Button
                             variant="contained"
-                            disabled={!formik.isValid || formik.isSubmitting}
+                            disabled={Boolean(!formik.isValid || formik.isSubmitting)}
                             type="submit"
                             fullWidth
                         >
@@ -220,7 +238,6 @@ export const OrderForm = ({ serverErrors = [], onSaveClick, onSave, onClose, pro
                         variant="outlined"
                         label="Тип доставкі"
                         size="small"
-                        textAlign="left"
                         select
                         error={formik.touched.delivery && Boolean(formik.errors.delivery)}
                         value={formik.values.delivery}

src/components/admin/AdminOrderPage/OrderGoodsEditor/OrderGood.js

@@ -0,0 +1,31 @@
+import { IconButton, Stack, TableCell, TableRow, Typography } from '@mui/material';
+import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai';
+
+export const OrderGood = ({ orderGood, onChange }) => {
+    return (
+        <TableRow>
+            <TableCell>{orderGood.good.name}</TableCell>
+            <TableCell>
+                <Stack justifyContent="center" direction="row" alignItems="center">
+                    <IconButton
+                        onClick={() => {
+                            orderGood.count -= 1;
+                            onChange(orderGood);
+                        }}
+                    >
+                        <AiOutlineMinus />
+                    </IconButton>
+                    <Typography>{orderGood.count}</Typography>
+                    <IconButton
+                        onClick={() => {
+                            orderGood.count += 1;
+                            onChange(orderGood);
+                        }}
+                    >
+                        <AiOutlinePlus />
+                    </IconButton>
+                </Stack>
+            </TableCell>
+        </TableRow>
+    );
+};

src/components/admin/AdminOrderPage/OrderGoodsEditor/index.js

@@ -0,0 +1,68 @@
+import { Box, Table, TableBody } from '@mui/material';
+import { OrderGood } from './OrderGood';
+import Select from 'react-select';
+import { useEffect, useState } from 'react';
+
+export const OrderGoodsEditor = ({ orderGoods = [], onChange = null, goodList = [] } = {}) => {
+    const handleChange = (goods) => {
+        const deltaGoods = goods.filter(
+            (good) =>
+                !orderGoods.some((orderGood) => {
+                    return good._id === orderGood.good._id;
+                })
+        );
+
+        const deltaOrderGoods = orderGoods.filter(
+            (orderGood) =>
+                !goods.some((good) => {
+                    return good._id === orderGood.good._id;
+                })
+        );
+
+        for (const good of deltaGoods) {
+            orderGoods.push({ count: 1, good: good });
+        }
+        for (const [key, value] of Object.entries(deltaOrderGoods)) {
+            orderGoods = orderGoods.filter((orderGood) => {
+                return orderGood.good._id !== value.good._id;
+            });
+        }
+
+        onChange(orderGoods);
+    };
+
+    return (
+        <Box classname="OrderGoodsEditor">
+            <Select
+                placeholder="Обрати товари"
+                value={orderGoods.map((orderGood) => ({ value: orderGood.good._id, label: orderGood.good.name }))}
+                closeMenuOnSelect={false}
+                onChange={(e) => {
+                    handleChange(e.map(({ label, value }) => ({ _id: value, name: label })));
+                }}
+                options={goodList?.map(({ _id, name }) => ({ value: _id, label: name }))}
+                isMulti={true}
+            />
+            <Table>
+                <TableBody>
+                    {(orderGoods || []).map((orderGood, idx) => (
+                        <OrderGood
+                            key={orderGood.good._id}
+                            orderGood={orderGood}
+                            onChange={(newOrderGood) => {
+                                if (+newOrderGood.count <= 0) {
+                                    orderGoods = orderGoods.filter((item, index) => {
+                                        return idx !== index;
+                                    });
+                                } else {
+                                    orderGoods[idx] = orderGood;
+                                }
+                                onChange(orderGoods);
+                            }}
+                        />
+                    ))}
+                </TableBody>
+            </Table>
+        </Box>
+    );
+};