Ajout de la galerie par végétal

src/Vegetable.css

@@ -29,6 +29,10 @@ top: 33%;
   max-width : 100%;
 }
 
-#mainPicture {
+#mainPicture, #Pictures {
   display: none;
 }
+
+.carousel-inner img {
+  max-width: 100%;
+}

src/Vegetable.js

@@ -15,13 +15,16 @@ import {
   Nav,
   NavItem,
   NavLink,
+  Carousel,
+  CarouselItem,
+  CarouselControl,
+  CarouselIndicators,
 } from 'reactstrap';
 import classnames from 'classnames';
-
 import {
-  FaPlus,
   FaEdit,
   FaMapMarkerAlt,
+  FaFileImage,
 } from 'react-icons/fa';
 import Navigation from './Navigation';
 import Header from './Header';
@@ -38,35 +41,45 @@ class Vegetable extends Component {
   constructor(props) {
     super(props);
 
-    this.getVegetable = this.getVegetable.bind(this);
-    this.updateVegetable = this.updateVegetable.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.setMap = this.setMap.bind(this);
-    this.onImageChange = this.onImageChange.bind(this);
-    this.toggle = this.toggle.bind(this);
-
     this.state = {
       Vegetable: {
         name: '',
         lat: 0,
         lng: 0,
         description: '',
+        Pictures: [],
       },
       imagePreviewUrl: '',
+      imagesPreviewUrls: [],
       Map: {
         width: '20px',
         height: '20px',
       },
-      activeTab: '1'
+      activeTab: '1',
+      activeIndex: 0,
     };
 
+    this.getVegetable = this.getVegetable.bind(this);
+    this.updateVegetable = this.updateVegetable.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.setMap = this.setMap.bind(this);
+    this.onImageChange = this.onImageChange.bind(this);
+    this.onPictureChange = this.onPictureChange.bind(this);
+    this.toggle = this.toggle.bind(this);
+    this.next = this.next.bind(this);
+    this.previous = this.previous.bind(this);
+    this.goToIndex = this.goToIndex.bind(this);
+    this.onExiting = this.onExiting.bind(this);
+    this.onExited = this.onExited.bind(this);
+    this.postPicture = this.postPicture.bind(this);
+
     this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
   }
 
   toggle(tab) {
     if (this.state.activeTab !== tab) {
       this.setState({
-        activeTab: tab
+        activeTab: tab,
       }, () => {
         this.setMap();
       });
@@ -114,6 +127,34 @@ class Vegetable extends Component {
     reader.readAsDataURL(file);
   }
 
+  onPictureChange(e) {
+    e.preventDefault();
+
+    const reader = new FileReader();
+    const file = e.target.files[0];
+
+    reader.onloadend = () => {
+      this.setState(prevState => ({
+        Vegetable: {
+          ...prevState.Vegetable,
+          Pictures: [
+            ...prevState.Vegetable.Pictures,
+            file
+          ]
+        },
+        imagesPreviewUrls: [
+          ...prevState.imagesPreviewUrls,
+          reader.result
+        ],
+        activeIndex: prevState.imagesPreviewUrls.length
+      }));
+    };
+
+    this.postPicture(file);
+
+    reader.readAsDataURL(file);
+  }
+
   updateVegetable(event) {
     event.preventDefault(); // Let's stop this event.
     event.stopPropagation(); // Really this time.
@@ -134,7 +175,21 @@ class Vegetable extends Component {
         // this.setState({ Category: res.data });
       })
       .catch(() => {
-        alert('Impossile de mettre à jour cette catégorie');
+        alert('Impossile de mettre à jour ce végétal');
+      });
+  }
+
+  postPicture(picture) {
+    const fd = new FormData();
+
+    fd.append('picture', picture);
+
+    API.post(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/pictures`, fd)
+      .then((res) => {
+        // this.setState({ Category: res.data });
+      })
+      .catch(() => {
+        alert('Impossile d\'ajouter cette image');
       });
   }
 
@@ -143,12 +198,23 @@ class Vegetable extends Component {
       .then((res) => {
         if (res.status === 200) {
           const item = res.data;
+          let images = [];
+
           if (item.description === null) {
             item.description = ' ';
           }
-          this.setState({
-            Vegetable: item
-          });
+
+          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) => {
@@ -174,9 +240,43 @@ class Vegetable extends Component {
     });
   }
 
+  onExiting() {
+    this.animating = true;
+  }
+
+  onExited() {
+    this.animating = false;
+  }
+
+  next() {
+    if (this.animating) return;
+    const nextIndex = this.state.activeIndex === this.state.imagesPreviewUrls.length - 1 ? 0 : this.state.activeIndex + 1;
+    this.setState({
+      activeIndex: nextIndex,
+    });
+  }
+
+  previous() {
+    if (this.animating) return;
+    const nextIndex = this.state.activeIndex === 0 ? this.state.imagesPreviewUrls.length - 1 : this.state.activeIndex - 1;
+    this.setState({
+      activeIndex: nextIndex,
+    });
+  }
+
+  goToIndex(newIndex) {
+    if (this.animating) return;
+    this.setState({
+      activeIndex: newIndex,
+    });
+  }
+
   render() {
     const {
-      imagePreviewUrl
+      activeIndex,
+    } = this.state;
+    const {
+      imagePreviewUrl,
     } = this.state;
     let $imagePreview = null;
     if (imagePreviewUrl) {
@@ -222,112 +322,146 @@ class Vegetable extends Component {
             <TabContent activeTab={this.state.activeTab}>
               <TabPane tabId="1">
                 <Row>
-                  <Col sm="12">
-                    <Row>
-                      <Col xs={12} sm={4}>
-                        <FormGroup row>
-                          <Label for="name" sm={4}>Nom</Label>
-                          <Col sm={8}>
-                            <Input
-                              type="text"
-                              name="name"
-                              id="name"
-                              value={this.state.Vegetable.name}
-                              placeholder="Nom"
-                              onChange={this.handleChange}
-                            />
-                          </Col>
-                        </FormGroup>
-                        <FormGroup row>
-                          <Label for="description" sm={4}>Description</Label>
-                          <Col sm={8}>
-                            <Input
-                              type="textarea"
-                              name="description"
-                              id="description"
-                              value={this.state.Vegetable.description}
-                              placeholder="Description"
-                              onChange={this.handleChange}
-                            />
-                          </Col>
-                        </FormGroup>
-                        <FormGroup row>
-                          <Label for="mainPicture" sm={4}>Photo principale</Label>
-                          <Col sm={8}>
-                            <Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
-                              <FaPlus />
-                              {' '}
-                              Photo
-                            </Label>
-                            <Input
-                              type="file"
-                              id="mainPicture"
-                              onChange={e => this.onImageChange(e)}
-                            />
-                          </Col>
-                        </FormGroup>
+                  <Col xs={12} sm={4}>
+                    <FormGroup row>
+                      <Label for="name" sm={4}>Nom</Label>
+                      <Col sm={8}>
+                        <Input
+                          type="text"
+                          name="name"
+                          id="name"
+                          value={this.state.Vegetable.name}
+                          placeholder="Nom"
+                          onChange={this.handleChange}
+                        />
                       </Col>
-                      <Col xs={12} sm={8}>
-                        <div className="imgPreview">
-                          {$imagePreview}
-                        </div>
+                    </FormGroup>
+                    <FormGroup row>
+                      <Label for="description" sm={4}>Description</Label>
+                      <Col sm={8}>
+                        <Input
+                          type="textarea"
+                          name="description"
+                          id="description"
+                          value={this.state.Vegetable.description}
+                          placeholder="Description"
+                          onChange={this.handleChange}
+                        />
                       </Col>
-                    </Row>
+                    </FormGroup>
+                    <FormGroup row>
+                      <Label for="mainPicture" sm={4}>Photo principale</Label>
+                      <Col sm={8}>
+                        <Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
+                          <FaFileImage />
+                        </Label>
+                        <Input
+                          type="file"
+                          id="mainPicture"
+                          onChange={e => this.onImageChange(e)}
+                        />
+                      </Col>
+                    </FormGroup>
+                  </Col>
+                  <Col xs={12} sm={8}>
+                    <div className="imgPreview">
+                      {$imagePreview}
+                    </div>
                   </Col>
                 </Row>
               </TabPane>
               <TabPane tabId="2">
                 <Row>
-                  <Col sm="12">
-                    <Row>
-                      <Col xs={12} sm={4}>
-                        <FormGroup row>
-                          <Label for="lat" sm={4}>Latitude (%)</Label>
-                          <Col sm={8}>
-                            <Input
-                              type="number"
-                              min="0"
-                              max="100"
-                              step="1"
-                              name="lat"
-                              id="lat"
-                              value={this.state.Vegetable.lat}
-                              placeholder="Latitude"
-                              onChange={this.handleChange}
-                            />
-                          </Col>
-                        </FormGroup>
-                        <FormGroup row>
-                          <Label for="lng" sm={4}>Longitude (%)</Label>
-                          <Col sm={8}>
-                            <Input
-                              type="number"
-                              min="0"
-                              max="100"
-                              step="1"
-                              name="lng"
-                              id="lng"
-                              value={this.state.Vegetable.lng}
-                              placeholder="Longitude"
-                              onChange={this.handleChange}
-                            />
-                          </Col>
-                        </FormGroup>
+                  <Col xs={12} sm={4}>
+                    <FormGroup row>
+                      <Label for="lat" sm={4}>Latitude (%)</Label>
+                      <Col sm={8}>
+                        <Input
+                          type="number"
+                          min="0"
+                          max="100"
+                          step="1"
+                          name="lat"
+                          id="lat"
+                          value={this.state.Vegetable.lat}
+                          placeholder="Latitude"
+                          onChange={this.handleChange}
+                        />
                       </Col>
-                      <Col xs={12} sm={8}>
-                        <div id="MapContainer">
-                          <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
-                            <div className="mapMarker" style={{ left: `calc(${this.state.Vegetable.lat}% - 16px)`, top: `calc(${this.state.Vegetable.lng}% - 16px)` }}><FaMapMarkerAlt /></div>
-                          </div>
-                        </div>
+                    </FormGroup>
+                    <FormGroup row>
+                      <Label for="lng" sm={4}>Longitude (%)</Label>
+                      <Col sm={8}>
+                        <Input
+                          type="number"
+                          min="0"
+                          max="100"
+                          step="1"
+                          name="lng"
+                          id="lng"
+                          value={this.state.Vegetable.lng}
+                          placeholder="Longitude"
+                          onChange={this.handleChange}
+                        />
                       </Col>
-                    </Row>
+                    </FormGroup>
+                  </Col>
+                  <Col xs={12} sm={8}>
+                    <div id="MapContainer">
+                      <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
+                        <div className="mapMarker" style={{ left: `calc(${this.state.Vegetable.lat}% - 16px)`, top: `calc(${this.state.Vegetable.lng}% - 16px)` }}><FaMapMarkerAlt /></div>
+                      </div>
+                    </div>
+                  </Col>
+                </Row>
+              </TabPane>
+              <TabPane tabId="3">
+                <Row>
+                  <Col xs={12} sm={4}>
+                    <FormGroup row>
+                      <Col sm={12}>
+                        <Label className="btn btn-success" for="Pictures" sm={12}>
+                          <FaFileImage />
+                          {' '}
+                          Ajouter une photo
+                        </Label>
+                        <Input
+                          type="file"
+                          id="Pictures"
+                          onChange={e => this.onPictureChange(e)}
+                        />
+                      </Col>
+                    </FormGroup>
+                  </Col>
+                  <Col xs={12} sm={8}>
+                    {this.state.imagesPreviewUrls
+                      && this.state.imagesPreviewUrls.length > 0
+                        ? (<Carousel
+                          activeIndex={activeIndex}
+                          next={this.next}
+                          previous={this.previous}
+                           >
+                          <CarouselIndicators items={this.state.imagesPreviewUrls} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
+                          {this.state.imagesPreviewUrls.map( (item, key) => (
+                            <CarouselItem
+                              onExiting={this.onExiting}
+                              onExited={this.onExited}
+                              key={`Carousel_${key}`}
+                            >
+                              <img src={item} alt="Carousel" />
+                            </CarouselItem>
+                          ))}
+                          <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
+                          <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
+                        </Carousel>)
+                        : (null)
+                    }
                   </Col>
                 </Row>
               </TabPane>
             </TabContent>
 
-            <Button color="primary" style={{ marginTop: '16px' }}>
+            <Button color="primary" style={{ marginTop: '16px' }} className={this.state.activeTab === '3' ? 'd-none' : ''}>
               <FaEdit />
               {' '}
               Mettre à jour