371 lines
11 KiB
JavaScript
371 lines
11 KiB
JavaScript
import React, {
|
|
Component,
|
|
} from 'react';
|
|
import {
|
|
Container,
|
|
Form,
|
|
Button,
|
|
TabContent,
|
|
TabPane,
|
|
Nav,
|
|
NavItem,
|
|
NavLink,
|
|
} from 'reactstrap';
|
|
import classnames from 'classnames';
|
|
import {
|
|
FaEdit,
|
|
} from 'react-icons/fa';
|
|
import {
|
|
NotificationContainer,
|
|
NotificationManager,
|
|
} from 'react-notifications';
|
|
import Navigation from './Navigation';
|
|
import Header from './Header';
|
|
import API from './Api';
|
|
import VegetableMain from './Vegetable/Main';
|
|
import VegetableCarousel from './Vegetable/Carousel';
|
|
import VegetableMap from './Vegetable/Map';
|
|
import VegetablesProperties from './Vegetable/Properties';
|
|
|
|
import './Vegetable.css';
|
|
import 'react-notifications/lib/notifications.css';
|
|
|
|
class Vegetable extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
Vegetable: {
|
|
name: '',
|
|
lat: 0,
|
|
lng: 0,
|
|
description: '',
|
|
Pictures: [],
|
|
},
|
|
uploadPictures: 0,
|
|
uploadedPictures: 0,
|
|
imagePreviewUrl: '',
|
|
imagesPreviewUrls: [],
|
|
activeTab: '1',
|
|
availableProperties: [],
|
|
};
|
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
this.getVegetable = this.getVegetable.bind(this);
|
|
this.updateVegetable = this.updateVegetable.bind(this);
|
|
this.changeMainPicture = this.changeMainPicture.bind(this);
|
|
this.addPicture = this.addPicture.bind(this);
|
|
this.deletePicture = this.deletePicture.bind(this);
|
|
this.toggle = this.toggle.bind(this);
|
|
this.updateValueFromChild = this.updateValueFromChild.bind(this);
|
|
|
|
this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
|
|
}
|
|
|
|
handleChange(event) {
|
|
const target = event.target;
|
|
const value = target.type === 'checkbox' ? target.checked : target.value;
|
|
const name = target.name;
|
|
|
|
this.setState(prevState => ({
|
|
Vegetable: {
|
|
...prevState.Vegetable,
|
|
[name]: value,
|
|
},
|
|
}));
|
|
}
|
|
|
|
toggle(tab) {
|
|
if (this.state.activeTab !== tab) {
|
|
this.setState({
|
|
activeTab: tab,
|
|
});
|
|
}
|
|
}
|
|
|
|
updateValueFromChild(name, value) {
|
|
this.setState(prevState => ({
|
|
Vegetable: {
|
|
...prevState.Vegetable,
|
|
[name]: value,
|
|
},
|
|
}));
|
|
}
|
|
|
|
changeMainPicture(file, reader) {
|
|
this.setState(prevState => ({
|
|
Vegetable: {
|
|
...prevState.Vegetable,
|
|
mainPictureImported: file,
|
|
},
|
|
imagePreviewUrl: reader.result,
|
|
}));
|
|
}
|
|
|
|
addPicture(file, reader) {
|
|
this.setState(prevState => ({
|
|
uploadPictures: prevState.uploadPictures + 1,
|
|
}), () => {
|
|
const fd = new FormData();
|
|
NotificationManager.info('Sauvegarde de l\'image en cours...');
|
|
|
|
fd.append('picture', file);
|
|
|
|
API.post(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/pictures`, fd)
|
|
.then((res) => {
|
|
const picture = res.data;
|
|
this.setState(prevState => ({
|
|
uploadedPictures: prevState.uploadedPictures + 1,
|
|
Vegetable: {
|
|
...prevState.Vegetable,
|
|
Pictures: [
|
|
...prevState.Vegetable.Pictures,
|
|
picture,
|
|
],
|
|
},
|
|
imagesPreviewUrls: [
|
|
...prevState.imagesPreviewUrls,
|
|
picture.url,
|
|
],
|
|
activeIndex: prevState.imagesPreviewUrls.length,
|
|
}));
|
|
NotificationManager.success('Image sauvegardée');
|
|
})
|
|
.catch(() => {
|
|
NotificationManager.error('Impossible d\'ajouter cette image');
|
|
});
|
|
});
|
|
}
|
|
|
|
deletePicture(id) {
|
|
API.delete(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/pictures/${id}`)
|
|
.then(() => {
|
|
NotificationManager.success('Image supprimée');
|
|
const Pictures = this.state.Vegetable.Pictures;
|
|
const urls = this.state.imagesPreviewUrls;
|
|
let url = null;
|
|
|
|
for (let i = 0; i < Pictures.length; i++) {
|
|
if (Pictures[i].id === id) {
|
|
url = Pictures[i].url;
|
|
Pictures.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
for (let i = 0; i < urls.length; i++) {
|
|
if (urls[i] === url) {
|
|
urls.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
imagesPreviewUrls: urls,
|
|
Vegetable: {
|
|
...prevState.Vegetable,
|
|
Pictures,
|
|
},
|
|
}));
|
|
})
|
|
.catch(() => {
|
|
NotificationManager.error('Impossible de supprimer cette image');
|
|
});
|
|
}
|
|
|
|
updateVegetable(event) {
|
|
NotificationManager.info('Sauvegarde en cours');
|
|
event.preventDefault(); // Let's stop this event.
|
|
event.stopPropagation(); // Really this time.
|
|
const requests = 1 + this.state.Vegetable.Properties.length;
|
|
let requestsDone = 0;
|
|
|
|
const isDone = () => {
|
|
if (requests === requestsDone) {
|
|
NotificationManager.success('Sauvegarde terminée');
|
|
this.getVegetable(this.props.match.params.categoryId, this.props.match.params.vegetableId);
|
|
}
|
|
};
|
|
|
|
// Patch Vegetable
|
|
const fd = new FormData();
|
|
if (this.state.imagePreviewUrl) {
|
|
fd.append('mainPicture', this.state.Vegetable.mainPictureImported);
|
|
}
|
|
|
|
Object.keys(this.state.Vegetable).map((objectKey) => {
|
|
// if (objectKey === 'Properties') {
|
|
// fd.append(objectKey, JSON.stringify(this.state.Vegetable[objectKey]));
|
|
// } else
|
|
if (objectKey !== 'mainPicture' && objectKey !== 'mainPictureImported' && objectKey !== 'Properties') {
|
|
fd.append(objectKey, this.state.Vegetable[objectKey]);
|
|
}
|
|
return true;
|
|
});
|
|
API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}`, fd)
|
|
.then((res) => {
|
|
requestsDone++;
|
|
isDone();
|
|
})
|
|
.catch(() => {
|
|
NotificationManager.error('Impossile de mettre à jour ce végétal');
|
|
});
|
|
|
|
// Patch or create Properties
|
|
this.state.Vegetable.Properties.forEach((propertyItem) => {
|
|
if (propertyItem.id) {
|
|
API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/properties/${propertyItem.id}`, propertyItem)
|
|
.then((res) => {
|
|
requestsDone++;
|
|
isDone();
|
|
})
|
|
.catch(() => {
|
|
NotificationManager.error(`Impossile de mettre à jour la propriété ${propertyItem.Property.name}`);
|
|
});
|
|
} else {
|
|
API.post(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/properties`, propertyItem)
|
|
.then((res) => {
|
|
requestsDone++;
|
|
isDone();
|
|
})
|
|
.catch(() => {
|
|
NotificationManager.error(`Impossile de sauvegarder la propriété ayant pour valeur ${propertyItem.value}`);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
getVegetable(categoryId, vegetableId) {
|
|
API.get('properties')
|
|
.then((res) => {
|
|
// availableProperties
|
|
if (res.status === 200) {
|
|
this.setState({
|
|
availableProperties: res.data.rows,
|
|
});
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
NotificationManager.error('Erreur lors de la récupération des types de propriétés');
|
|
});
|
|
|
|
API.get(`types/${categoryId}/vegetables/${vegetableId}`)
|
|
.then((res) => {
|
|
if (res.status === 200) {
|
|
const item = res.data;
|
|
const images = [];
|
|
|
|
if (item.description === null) {
|
|
item.description = ' ';
|
|
}
|
|
|
|
if (item.Pictures.length > 0) {
|
|
for (let i = 0; i < item.Pictures.length; i += 1) {
|
|
images.push(item.Pictures[i].url);
|
|
}
|
|
}
|
|
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
Vegetable: item,
|
|
imagesPreviewUrls: images,
|
|
}));
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
NotificationManager.error('Erreur lors de la récupération de ce végétal');
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<NotificationContainer />
|
|
<Header />
|
|
<Container className="Vegetable">
|
|
<Navigation categoryId={this.state.Vegetable.Type ? this.state.Vegetable.Type.id : 1} categoryName={this.state.Vegetable.Type ? this.state.Vegetable.Type.name : null} vegetableId={this.state.Vegetable.id || 1} vegetableName={this.state.Vegetable.name} />
|
|
<Form onSubmit={this.updateVegetable}>
|
|
<Nav tabs>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '1' })}
|
|
onClick={() => { this.toggle('1'); }}
|
|
>
|
|
Informations générales
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '2' })}
|
|
onClick={() => { this.toggle('2'); }}
|
|
>
|
|
Propriétés
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '3' })}
|
|
onClick={() => { this.toggle('3'); }}
|
|
>
|
|
Carte
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '4' })}
|
|
onClick={() => { this.toggle('4'); }}
|
|
>
|
|
Galerie
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
<TabContent activeTab={this.state.activeTab}>
|
|
<TabPane tabId="1">
|
|
<VegetableMain
|
|
Vegetable={this.state.Vegetable}
|
|
imagePreviewUrl={this.state.imagePreviewUrl}
|
|
updateValue={this.updateValueFromChild}
|
|
changeMainPicture={this.changeMainPicture}
|
|
availableProperties={this.state.availableProperties}
|
|
/>
|
|
</TabPane>
|
|
<TabPane tabId="2">
|
|
<VegetablesProperties
|
|
selectedProperties={this.state.Vegetable.Properties}
|
|
availableProperties={this.state.availableProperties}
|
|
setProperties={this.handleChange}
|
|
/>
|
|
</TabPane>
|
|
<TabPane tabId="3">
|
|
<VegetableMap
|
|
Vegetable={this.state.Vegetable}
|
|
updateValue={this.updateValueFromChild}
|
|
/>
|
|
</TabPane>
|
|
<TabPane tabId="4">
|
|
<VegetableCarousel
|
|
addPicture={this.addPicture}
|
|
deletePicture={this.deletePicture}
|
|
imagesPreviewUrls={this.state.imagesPreviewUrls}
|
|
activeIndex={this.state.activeIndex}
|
|
pictures={this.state.Vegetable.Pictures}
|
|
/>
|
|
</TabPane>
|
|
</TabContent>
|
|
|
|
{this.state.uploadPictures === this.state.uploadedPictures ? (
|
|
<Button color="primary" style={{ marginTop: '16px' }} className={this.state.activeTab === '3' ? 'd-none' : ''}>
|
|
<FaEdit />
|
|
{' '}
|
|
Mettre à jour
|
|
</Button>
|
|
) : (null)}
|
|
</Form>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Vegetable;
|