|
@@ -1,86 +1,81 @@
|
|
-import { Input, Card, Button, Space, Image, Row } from 'antd';
|
|
|
|
-import { useEffect, useRef, useState } from 'react';
|
|
|
|
|
|
+import { Input, Button, Space, Image, Row } from 'antd';
|
|
|
|
+import { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { connect } from 'react-redux';
|
|
-import { InputUpLoadFile } from '.';
|
|
|
|
-import { backURL } from '../api';
|
|
|
|
-import { AdditionalImages } from './index';
|
|
|
|
|
|
+import { InputUpLoadFile, AdditionalImages } from '.';
|
|
|
|
+import { backURL } from '../api';
|
|
|
|
|
|
const { TextArea } = Input;
|
|
const { TextArea } = Input;
|
|
|
|
|
|
-const CharacterfGood =({ good, good:{ _id, name, description, images, price }, upLoad, changeGood, number, changeIndexGoodInSer }) => {
|
|
|
|
- const [ inputIdImg, setInputIdImg] = useState('');
|
|
|
|
- const [ inputName, setInputName ] = useState(name);
|
|
|
|
- const [ inputDescrip, setInputDescrip] = useState(description);
|
|
|
|
- const [ imag, setImag ] = useState('');
|
|
|
|
- const [ cost, setCost ] = useState(price);
|
|
|
|
- const [inputNumber, setInputNumber] = useState(number);
|
|
|
|
-
|
|
|
|
- useEffect( () => {
|
|
|
|
- setInputName(name);
|
|
|
|
- setInputDescrip(description);
|
|
|
|
-
|
|
|
|
- if (images && images.length >=1 &&images[0].url) {
|
|
|
|
- setImag(images[0].url);
|
|
|
|
- setInputIdImg(images[0]._id);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if (Object.keys(good).length === 0) {
|
|
|
|
- setImag('');
|
|
|
|
- setInputIdImg('');
|
|
|
|
- }
|
|
|
|
- if(images && images.length >=1 &&!images[0].url) {
|
|
|
|
- setImag('');
|
|
|
|
- setInputIdImg('');
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- setCost(price);
|
|
|
|
- setInputNumber(number);
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- }, [good]); console.log('good',good)
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- useEffect(() => {
|
|
|
|
- if(upLoad && upLoad.status === 'RESOLVED' ) {
|
|
|
|
- setImag(upLoad.payload.url); console.log('39', imag)
|
|
|
|
- setInputIdImg(upLoad.payload._id);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }, [upLoad])
|
|
|
|
-
|
|
|
|
- // onChange = ({ target: { value } }) => {
|
|
|
|
- // setInputDescrip(value);
|
|
|
|
- // };
|
|
|
|
-
|
|
|
|
- const clearInput = () => {
|
|
|
|
- setInputName('');
|
|
|
|
- setInputDescrip('');
|
|
|
|
- setCost('');
|
|
|
|
- setImag ('');
|
|
|
|
- setInputIdImg('');
|
|
|
|
|
|
+const CharacterfGood = ({
|
|
|
|
+ good,
|
|
|
|
+ good: { _id, name, description, images, price },
|
|
|
|
+ upLoad, changeGood, number, changeIndexGoodInSer
|
|
|
|
+}) => {
|
|
|
|
+ const [inputIdImg, setInputIdImg] = useState('');
|
|
|
|
+ const [inputName, setInputName] = useState(name);
|
|
|
|
+ const [inputDescrip, setInputDescrip] = useState(description);
|
|
|
|
+ const [imag, setImag] = useState('');
|
|
|
|
+ const [cost, setCost] = useState(price);
|
|
|
|
+ const [inputNumber, setInputNumber] = useState(number);
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ setInputName(name);
|
|
|
|
+ setInputDescrip(description);
|
|
|
|
+
|
|
|
|
+ if (images && images.length >= 1 && images[0].url) {
|
|
|
|
+ setImag(images[0].url);
|
|
|
|
+ setInputIdImg(images[0]._id);
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ if (Object.keys(good).length === 0) {
|
|
|
|
+ setImag('');
|
|
|
|
+ setInputIdImg('');
|
|
}
|
|
}
|
|
|
|
+ if (images && images.length >= 1 && !images[0].url) {
|
|
|
|
+ setImag('');
|
|
|
|
+ setInputIdImg('');
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ setCost(price);
|
|
|
|
+ setInputNumber(number);
|
|
|
|
+ }, [good]); console.log('good', good);
|
|
|
|
|
|
- const saveChange = () => {
|
|
|
|
- let goodImages = [{"_id": inputIdImg}];
|
|
|
|
-
|
|
|
|
- if (good.images && good.images.length > 1) {
|
|
|
|
- goodImages = [...good.images].map((state) => ({"_id": state._id}));
|
|
|
|
- goodImages.shift();
|
|
|
|
- goodImages.unshift({"_id": inputIdImg});
|
|
|
|
- }
|
|
|
|
- // if (!good.images) {
|
|
|
|
- // goodImages = [{"_id": inputIdImg}]
|
|
|
|
- // }
|
|
|
|
- changeGood(inputName, inputDescrip, cost, goodImages);
|
|
|
|
- changeIndexGoodInSer(inputNumber);
|
|
|
|
- clearInput();
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ if (upLoad && upLoad.status === 'RESOLVED') {
|
|
|
|
+ setImag(upLoad.payload.url); console.log('39', imag);
|
|
|
|
+ setInputIdImg(upLoad.payload._id);
|
|
}
|
|
}
|
|
- console.log('inputIdImg', inputIdImg) ;
|
|
|
|
- console.log('good',good); console.log('iinputIdImg.length === 0', inputIdImg.length === 0 );
|
|
|
|
- console.log('Object.keys(good).length === 0',Object.keys(good).length === 0);
|
|
|
|
- console.log('good.images == null',good.images == null);
|
|
|
|
|
|
+ }, [upLoad]);
|
|
|
|
+
|
|
|
|
+ // onChange = ({ target: { value } }) => {
|
|
|
|
+ // setInputDescrip(value);
|
|
|
|
+ // };
|
|
|
|
+
|
|
|
|
+ const clearInput = () => {
|
|
|
|
+ setInputName('');
|
|
|
|
+ setInputDescrip('');
|
|
|
|
+ setCost('');
|
|
|
|
+ setImag('');
|
|
|
|
+ setInputIdImg('');
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const saveChange = () => {
|
|
|
|
+ let goodImages = [{ _id: inputIdImg }];
|
|
|
|
+
|
|
|
|
+ if (good.images && good.images.length > 1) {
|
|
|
|
+ goodImages = [...good.images].map((state) => ({ _id: state._id }));
|
|
|
|
+ goodImages.shift();
|
|
|
|
+ goodImages.unshift({ _id: inputIdImg });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ changeGood(inputName, inputDescrip, cost, goodImages);
|
|
|
|
+ changeIndexGoodInSer(inputNumber);
|
|
|
|
+ clearInput();
|
|
|
|
+ };
|
|
|
|
+ console.log('inputIdImg', inputIdImg);
|
|
|
|
+ console.log('good', good); console.log('iinputIdImg.length === 0', inputIdImg.length === 0);
|
|
|
|
+ console.log('Object.keys(good).length === 0', Object.keys(good).length === 0);
|
|
|
|
+ console.log('good.images == null', good.images == null);
|
|
|
|
|
|
return (
|
|
return (
|
|
<div >
|
|
<div >
|
|
@@ -95,7 +90,7 @@ const CharacterfGood =({ good, good:{ _id, name, description, images, price }, u
|
|
<TextArea
|
|
<TextArea
|
|
value={inputDescrip}
|
|
value={inputDescrip}
|
|
onChange={(e) => setInputDescrip(e.target.value)}
|
|
onChange={(e) => setInputDescrip(e.target.value)}
|
|
-
|
|
|
|
|
|
+
|
|
autoSize={{ minRows: 3, maxRows: 5 }}
|
|
autoSize={{ minRows: 3, maxRows: 5 }}
|
|
/>
|
|
/>
|
|
<Button type="primary" onClick={() => setInputDescrip('')}>Очистить поле</Button>
|
|
<Button type="primary" onClick={() => setInputDescrip('')}>Очистить поле</Button>
|
|
@@ -104,33 +99,29 @@ const CharacterfGood =({ good, good:{ _id, name, description, images, price }, u
|
|
<Input value={cost} onChange={(e) => setCost(e.target.value)}/>
|
|
<Input value={cost} onChange={(e) => setCost(e.target.value)}/>
|
|
<Button type="primary" onClick={() => setCost('')}>Очистить поле</Button>
|
|
<Button type="primary" onClick={() => setCost('')}>Очистить поле</Button>
|
|
</Row>
|
|
</Row>
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
<Space size={12} direction="vertical">
|
|
<Space size={12} direction="vertical">
|
|
-
|
|
|
|
- {/* <div className="imgWrapper"> */}
|
|
|
|
|
|
+
|
|
<div>Фото основное</div>
|
|
<div>Фото основное</div>
|
|
- {(Object.keys(good).length === 0 && good.images == null )|| inputIdImg.length === 0 ?
|
|
|
|
- <div style={{height:"150px", width:"150px"}}> </div>
|
|
|
|
- :
|
|
|
|
- <Image width={150} height={150} src={`${backURL}/${imag}`} style={{ objectFit: 'cover' }}/>}
|
|
|
|
|
|
+ {(Object.keys(good).length === 0 && good.images == null) || inputIdImg.length === 0
|
|
|
|
+ ? <div style={{ height: '150px', width: '150px' }}> </div>
|
|
|
|
+ : <Image width={150} height={150} src={`${backURL}/${imag}`} style={{ objectFit: 'cover' }}/>}
|
|
<InputUpLoadFile/>
|
|
<InputUpLoadFile/>
|
|
{/* </div> */}
|
|
{/* </div> */}
|
|
</Space>
|
|
</Space>
|
|
<Space size={2}></Space>
|
|
<Space size={2}></Space>
|
|
<Button type="primary" block onClick={saveChange}>
|
|
<Button type="primary" block onClick={saveChange}>
|
|
Сохранить изменения
|
|
Сохранить изменения
|
|
- </Button>
|
|
|
|
|
|
+ </Button>
|
|
<div> Загрузить дополнительные фото</div>
|
|
<div> Загрузить дополнительные фото</div>
|
|
- <AdditionalImages imag={imag} _id={_id}/>
|
|
|
|
|
|
+ <AdditionalImages imag={imag} _id={_id}/>
|
|
</div>
|
|
</div>
|
|
- )
|
|
|
|
-}
|
|
|
|
|
|
+ );
|
|
|
|
+};
|
|
|
|
|
|
-const mapStateToProps = ((state) => ({
|
|
|
|
|
|
+const mapStateToProps = (state) => ({
|
|
upLoad: state.upLoad.upLoad
|
|
upLoad: state.upLoad.upLoad
|
|
-}))
|
|
|
|
|
|
+});
|
|
const СhangeOfGood = connect(mapStateToProps)(CharacterfGood);
|
|
const СhangeOfGood = connect(mapStateToProps)(CharacterfGood);
|
|
|
|
|
|
export default СhangeOfGood;
|
|
export default СhangeOfGood;
|
|
-
|
|
|