|
@@ -0,0 +1,110 @@
|
|
|
+import { Box, Button, FormControl, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material';
|
|
|
+import React, { useState } from 'react';
|
|
|
+import { useDispatch } from 'react-redux';
|
|
|
+import { useNavigate } from 'react-router-dom';
|
|
|
+import ImageUploader from '../components/ImageUploader';
|
|
|
+import { useCreateGoodMutation, useGetCategoriesQuery } from '../store/api';
|
|
|
+
|
|
|
+
|
|
|
+const ITEM_HEIGHT = 48;
|
|
|
+const ITEM_PADDING_TOP = 8;
|
|
|
+const MenuProps = {
|
|
|
+ PaperProps: {
|
|
|
+ style: {
|
|
|
+ maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
|
|
+ width: 250,
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+function EditGood({ name, category, price, description, goodImages, goodId, buttonText }) {
|
|
|
+ const { data } = useGetCategoriesQuery();
|
|
|
+ const [goodName, setGoodName] = useState(name || '');
|
|
|
+ const [selectedCategory, setSelectedCategory] = useState(category || '');
|
|
|
+ console.log(category)
|
|
|
+ const [goodPrice, setGoodPrice] = useState(price || 0);
|
|
|
+ const [goodDescription, setGoodDescription] = useState(description || '');
|
|
|
+ const [images, setImages] = useState(goodImages || []);
|
|
|
+ console.log(images);
|
|
|
+ const navigate = useNavigate();
|
|
|
+ const [createGood, result] = useCreateGoodMutation();
|
|
|
+
|
|
|
+
|
|
|
+ const handleCategoryChange = (event) => {
|
|
|
+ setSelectedCategory(event.target.value);
|
|
|
+ };
|
|
|
+ const handlePriceChange = (event) => {
|
|
|
+ setGoodPrice(event.target.value);
|
|
|
+ };
|
|
|
+ const handleDescriptionChange = (event) => {
|
|
|
+ setGoodDescription(event.target.value);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const handleSubmit = () => {
|
|
|
+
|
|
|
+ const good = {
|
|
|
+ name: goodName,
|
|
|
+ categories: [selectedCategory],
|
|
|
+ price: +goodPrice,
|
|
|
+ description: goodDescription,
|
|
|
+ images: images.map(image => ({ _id: image._id }))
|
|
|
+ };
|
|
|
+ if (goodId) {
|
|
|
+ good._id = goodId;
|
|
|
+ }
|
|
|
+ createGood(good).then(response => {
|
|
|
+ navigate('/admin/goods');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Box component='form' onSubmit={handleSubmit}>
|
|
|
+ <Stack>
|
|
|
+ <TextField
|
|
|
+ sx={{ m: '0 auto 20px', width: '100%' }}
|
|
|
+ value={goodName}
|
|
|
+ onChange={(e) => setGoodName(e.target.value)}
|
|
|
+ label='Good name'
|
|
|
+ />
|
|
|
+ <FormControl
|
|
|
+ sx={{ m: '0 auto 20px', width: '100%' }}>
|
|
|
+ <InputLabel>Category</InputLabel>
|
|
|
+ <Select
|
|
|
+ value={selectedCategory}
|
|
|
+ onChange={handleCategoryChange}
|
|
|
+ MenuProps={MenuProps}
|
|
|
+ renderValue={(selected => selectedCategory?.name)}
|
|
|
+ >
|
|
|
+ {data?.CategoryFind?.map((category) => (
|
|
|
+ <MenuItem key={category._id} value={category}>
|
|
|
+ {category?.name}
|
|
|
+ </MenuItem>
|
|
|
+ ))}
|
|
|
+ </Select>
|
|
|
+ </FormControl>
|
|
|
+ <TextField
|
|
|
+ sx={{ m: '0 auto 20px', width: '100%' }}
|
|
|
+ type='number'
|
|
|
+ label='Price'
|
|
|
+ value={goodPrice}
|
|
|
+ onChange={handlePriceChange}
|
|
|
+ />
|
|
|
+ <TextField
|
|
|
+ sx={{ m: '0 auto 20px', width: '100%' }}
|
|
|
+ label="Description"
|
|
|
+ multiline
|
|
|
+ rows={4}
|
|
|
+ value={goodDescription}
|
|
|
+ onChange={handleDescriptionChange}
|
|
|
+ />
|
|
|
+ <ImageUploader passImages={goodImages}onChange={(images) => setImages(images)} />
|
|
|
+
|
|
|
+ <Button variant="contained" sx={{ maxWidth: '200px', width: '100%', m: '20px auto 0' }} onClick={() => handleSubmit()}>{buttonText}</Button>
|
|
|
+ </Stack>
|
|
|
+ </Box>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default EditGood;
|