123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- import { connect } from "react-redux";
- import { useState, useEffect, useContext } from "react";
- import { actionPromiseClear } from "../../../reducers";
- import Select from "react-select";
- import { actionGoodUpdate } from "../../../actions/actionGoodUpdate";
- import { EntityEditor } from "../../common/EntityEditor";
- import { actionUploadFiles } from "../../../actions/actionUploadFiles";
- import { UIContext } from "../../UIContext";
- import { Box, Button, InputLabel, Stack, TextField } from "@mui/material";
- import { useFormik } from "formik";
- import * as Yup from "yup";
- import { ConfirmModal } from "../../common/ConfirmModal";
- import { actionGoodDelete } from "../../../actions/actionGoodDelete";
- import { useNavigate } from "react-router-dom";
- const goodSchema = Yup.object().shape({
- name: Yup.string().required("Обов'язкове"),
- description: Yup.string().required("Обов'язкове"),
- price: Yup.number().min(0, "більше або равно 0").required("Обов'язкове"),
- amount: Yup.number().min(0, "більше або равно 0").required("Обов'язкове"),
- });
- const CGoodEditor = connect(
- (state) => ({
- entity: state.promise?.adminGoodById?.payload || {},
- uploadFiles: state.promise?.uploadFiles,
- }),
- {
- onFileDrop: (files) => actionUploadFiles(files),
- }
- )(EntityEditor);
- export const GoodForm = ({
- serverErrors = [],
- onSaveClick,
- onSave,
- onClose,
- onDelete,
- promiseStatus,
- deletePromiseStatus,
- catList = [],
- good = {},
- } = {}) => {
- const [inputCategories, setInputCategories] = useState([]);
- const [inputImages, setInputImages] = useState([]);
- const { setAlert } = useContext(UIContext);
- const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
- const [promiseTimeOut, setPromiseTimeOut] = useState(null);
- const navigate = useNavigate();
- const formik = useFormik({
- initialValues: {
- name: "",
- description: "",
- price: 0,
- amount: 0,
- },
- validationSchema: goodSchema,
- validateOnChange: true,
- onSubmit: () => {
- let goodToSave = {};
- good?._id && (goodToSave._id = good._id);
- goodToSave.name = formik.values.name;
- goodToSave.description = formik.values.description;
- goodToSave.price = +formik.values.price;
- goodToSave.amount = +formik.values.amount;
- goodToSave.categories = inputCategories;
- goodToSave.images = inputImages?.map(({ _id }) => ({ _id })) || [];
- onSaveClick && onSaveClick();
- onSave(goodToSave);
- setPromiseTimeOut(setTimeout(() => formik.setSubmitting(false), 3000));
- },
- });
- useEffect(() => {
- return () => {
- promiseTimeOut && clearTimeout(promiseTimeOut);
- setPromiseTimeOut(null);
- };
- }, []);
- useEffect(() => {
- if (promiseStatus === "FULFILLED") {
- formik.setSubmitting(false);
- promiseTimeOut && clearTimeout(promiseTimeOut);
- setPromiseTimeOut(null);
- setAlert({
- show: true,
- severity: "success",
- message: "Готово",
- });
- }
- if (promiseStatus === "REJECTED") {
- console.log(serverErrors);
- const errorMessage = (serverErrors ? [].concat(serverErrors) : []).reduce((prev, curr) => prev + "\n" + curr.message, "");
- formik.setSubmitting(false);
- promiseTimeOut && clearTimeout(promiseTimeOut);
- setPromiseTimeOut(null);
- setAlert({
- show: true,
- severity: "error",
- message: errorMessage,
- });
- }
- }, [promiseStatus]);
- useEffect(() => {
- if (deletePromiseStatus === "FULFILLED") {
- promiseTimeOut && clearTimeout(promiseTimeOut);
- setPromiseTimeOut(null);
- navigate("/admin/goods/");
- }
- if (deletePromiseStatus === "REJECTED") {
- promiseTimeOut && clearTimeout(promiseTimeOut);
- setPromiseTimeOut(null);
- setAlert({
- show: true,
- severity: "error",
- message: "Помилка",
- });
- }
- return () => {};
- }, [deletePromiseStatus]);
- useEffect(() => {
- setInputCategories(good?.categories || []);
- setInputImages(good?.images || []);
- formik.setFieldValue("name", good.name || "");
- formik.setFieldValue("description", good.description || "");
- formik.setFieldValue("amount", good.amount || 0);
- formik.setFieldValue("price", good.price || 0);
- formik.validateForm();
- }, [good.categories, good.name, good.description, good.amount, good.price]);
- useEffect(() => {
- return () => {
- onClose && onClose();
- };
- }, []);
- return (
- <Box className="GoodForm" component="form" onSubmit={formik.handleSubmit}>
- <TextField
- id="name"
- name="name"
- variant="outlined"
- label="Назва"
- size="small"
- error={formik.touched.name && Boolean(formik.errors.name)}
- value={formik.values.name}
- onBlur={formik.handleBlur}
- onChange={formik.handleChange}
- helperText={formik.touched.name && formik.errors.name}
- multiline
- fullWidth
- sx={{ mt: 2 }}
- />
- <Box sx={{ mt: 3 }}>
- <InputLabel>Зображення</InputLabel>
- <CGoodEditor onImagesSave={(images) => setInputImages(images)} />
- </Box>
- <TextField
- variant="outlined"
- id="description"
- name="description"
- label="Опис"
- size="small"
- error={formik.touched.description && Boolean(formik.errors.description)}
- value={formik.values.description}
- onBlur={formik.handleBlur}
- onChange={formik.handleChange}
- helperText={formik.touched.description && formik.errors.description}
- multiline
- fullWidth
- sx={{ mt: 2 }}
- />
- <Box sx={{ mt: 3 }}>
- <TextField
- variant="outlined"
- id="price"
- name="price"
- label="Ціна"
- size="small"
- error={formik.touched.price && Boolean(formik.errors.price)}
- value={formik.values.price}
- onBlur={formik.handleBlur}
- onChange={formik.handleChange}
- helperText={formik.touched.price && formik.errors.price}
- multiline
- fullWidth
- sx={{ mt: 2 }}
- />
- </Box>
- <Box sx={{ mt: 3 }}>
- <TextField
- variant="outlined"
- id="amount"
- name="amount"
- label="Кількість"
- size="small"
- error={formik.touched.amount && Boolean(formik.errors.amount)}
- value={formik.values.amount}
- onBlur={formik.handleBlur}
- onChange={formik.handleChange}
- helperText={formik.touched.amount && formik.errors.amount}
- multiline
- fullWidth
- sx={{ mt: 2 }}
- />
- </Box>
- <Box sx={{ mt: 3 }}>
- <InputLabel>Категорії</InputLabel>
- <Select
- placeholder="Обрати категорії"
- value={inputCategories.map(({ _id, name }) => ({ value: _id, label: name }))}
- closeMenuOnSelect={false}
- onChange={(e) => setInputCategories(e.map(({ label, value }) => ({ _id: value, name: label })))}
- options={catList?.map(({ _id, name }) => ({ value: _id, label: name }))}
- isMulti={true}
- />
- </Box>
- <Stack direction="row" sx={{ mt: 3 }} justifyContent="flex-end" spacing={1}>
- {!!good._id && (
- <Button variant="contained" onClick={() => setIsDeleteModalOpen(true)} color="error">
- Видалити
- </Button>
- )}
- <Button variant="contained" disabled={!formik.isValid || formik.isSubmitting} type="submit">
- Зберегти
- </Button>
- </Stack>
- {!!good._id && (
- <ConfirmModal
- open={isDeleteModalOpen}
- text="Видалити товар?"
- onClose={() => setIsDeleteModalOpen(false)}
- onNO={() => setIsDeleteModalOpen(false)}
- onYES={() => {
- onDelete(good);
- setPromiseTimeOut(setTimeout(() => formik.setSubmitting(false), 3000));
- }}
- />
- )}
- </Box>
- );
- };
- export const CGoodForm = connect(
- (state) => ({
- catList: state.promise.catAll?.payload || [],
- promiseStatus: state.promise.goodUpsert?.status || null,
- deletePromiseStatus: state.promise.goodDelete?.status || null,
- good: state.promise?.adminGoodById?.payload || {},
- serverErrors: state.promise?.goodUpsert?.error || [],
- }),
- {
- onSave: (good) => actionGoodUpdate(good),
- onClose: () => actionPromiseClear("goodUpsert"),
- onDelete: (good) => actionGoodDelete({ good }),
- }
- )(GoodForm);
|