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) {
@@ -221,8 +321,6 @@ class Vegetable extends Component {
             </Nav>
             <TabContent activeTab={this.state.activeTab}>
               <TabPane tabId="1">
-                <Row>
-                  <Col sm="12">
                 <Row>
                   <Col xs={12} sm={4}>
                     <FormGroup row>
@@ -255,9 +353,7 @@ class Vegetable extends Component {
                       <Label for="mainPicture" sm={4}>Photo principale</Label>
                       <Col sm={8}>
                         <Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
-                              <FaPlus />
+                          <FaFileImage />
-                              {' '}
-                              Photo
                         </Label>
                         <Input
                           type="file"
@@ -273,12 +369,8 @@ class Vegetable extends Component {
                     </div>
                   </Col>
                 </Row>
-                  </Col>
-                </Row>
               </TabPane>
               <TabPane tabId="2">
-                <Row>
-                  <Col sm="12">
                 <Row>
                   <Col xs={12} sm={4}>
                     <FormGroup row>
@@ -322,12 +414,54 @@ class Vegetable extends Component {
                     </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