UX for Vegetable form

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
+    "classnames": "^2.2.6",
     "react": "^16.5.0",
     "react-cookie": "^3.0.4",
     "react-dom": "^16.5.0",

src/Vegetable.css

@@ -1,3 +1,8 @@
+.tab-content {
+  padding: 16px 0;
+  border-bottom: 1px solid #dee2e6;
+}
+
 .map {
   width: 734px;
   height: 530px;
@@ -16,6 +21,14 @@ top: 33%;
   font-size: 2rem;
 }
 
+.nav-item {
+  cursor: pointer;
+}
+
 .imgPreview img {
   max-width : 100%;
 }
+
+#mainPicture {
+  display: none;
+}

src/Vegetable.js

@@ -1,4 +1,6 @@
-import React, { Component } from 'react';
+import React, {
+  Component,
+} from 'react';
 import {
   Container,
   Row,
@@ -8,8 +10,19 @@ import {
   Button,
   Label,
   Input,
+  TabContent,
+  TabPane,
+  Nav,
+  NavItem,
+  NavLink,
 } from 'reactstrap';
-import { FaEdit, FaMapMarkerAlt } from 'react-icons/fa';
+import classnames from 'classnames';
+
+import {
+  FaPlus,
+  FaEdit,
+  FaMapMarkerAlt,
+} from 'react-icons/fa';
 import Navigation from './Navigation';
 import Header from './Header';
 import API from './Api';
@@ -30,6 +43,7 @@ class Vegetable extends Component {
     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: {
@@ -43,11 +57,22 @@ class Vegetable extends Component {
         width: '20px',
         height: '20px',
       },
+      activeTab: '1'
     };
 
     this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
   }
 
+  toggle(tab) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab
+      }, () => {
+        this.setMap();
+      });
+    }
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.setMap);
     this.setMap();
@@ -94,8 +119,6 @@ class Vegetable extends Component {
     event.stopPropagation(); // Really this time.
 
     const fd = new FormData();
-    //
-    //
     if (this.state.imagePreviewUrl) {
       fd.append('mainPicture', this.state.Vegetable.mainPictureImported);
     }
@@ -106,7 +129,6 @@ class Vegetable extends Component {
       }
       return true;
     });
-    console.log(this.state.Vegetable);
     API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}`, fd)
       .then((res) => {
         // this.setState({ Category: res.data });
@@ -124,7 +146,9 @@ class Vegetable extends Component {
           if (item.description === null) {
             item.description = ' ';
           }
-          this.setState({ Vegetable: item });
+          this.setState({
+            Vegetable: item
+          });
         }
       })
       .catch((e) => {
@@ -151,7 +175,9 @@ class Vegetable extends Component {
   }
 
   render() {
-    const { imagePreviewUrl } = this.state;
+    const {
+      imagePreviewUrl
+    } = this.state;
     let $imagePreview = null;
     if (imagePreviewUrl) {
       $imagePreview = (<img src={imagePreviewUrl} alt="Preview" />);
@@ -167,95 +193,146 @@ class Vegetable extends Component {
         <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}>
-            <Row>
+            <Nav tabs>
-              <Col xs={12} sm={4}>
+              <NavItem>
-                <FormGroup row>
+                <NavLink
-                  <Label for="name" sm={4}>Nom</Label>
+                  className={classnames({ active: this.state.activeTab === '1' })}
-                  <Col sm={8}>
+                  onClick={() => { this.toggle('1'); }}
-                    <Input
+                >
-                      type="text"
+                  Informations générales
-                      name="name"
+                </NavLink>
-                      id="name"
+              </NavItem>
-                      value={this.state.Vegetable.name}
+              <NavItem>
-                      placeholder="Nom"
+                <NavLink
-                      onChange={this.handleChange}
+                  className={classnames({ active: this.state.activeTab === '2' })}
-                    />
+                  onClick={() => { this.toggle('2'); }}
+                >
+                  Carte
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  className={classnames({ active: this.state.activeTab === '3' })}
+                  onClick={() => { this.toggle('3'); }}
+                >
+                  Galerie
+                </NavLink>
+              </NavItem>
+            </Nav>
+            <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>
+                      <Col xs={12} sm={8}>
+                        <div className="imgPreview">
+                          {$imagePreview}
+                        </div>
+                      </Col>
+                    </Row>
                   </Col>
-                </FormGroup>
+                </Row>
-                <FormGroup row>
+              </TabPane>
-                  <Label for="description" sm={4}>Description</Label>
+              <TabPane tabId="2">
-                  <Col sm={8}>
+                <Row>
-                    <Input
+                  <Col sm="12">
-                      type="textarea"
+                    <Row>
-                      name="description"
+                      <Col xs={12} sm={4}>
-                      id="description"
+                        <FormGroup row>
-                      value={this.state.Vegetable.description}
+                          <Label for="lat" sm={4}>Latitude (%)</Label>
-                      placeholder="Description"
+                          <Col sm={8}>
-                      onChange={this.handleChange}
+                            <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>
+                      <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>
                   </Col>
-                </FormGroup>
+                </Row>
-                <FormGroup row>
+              </TabPane>
-                  <Label for="lat" sm={4}>Latitude (%)</Label>
+            </TabContent>
-                  <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>
-                <FormGroup row>
-                  <Label for="mainPicture" sm={4}>Photo principale</Label>
-                  <Col sm={8}>
-                    <Input
-                      type="file"
-                      id="mainPicture"
-                      onChange={e => this.onImageChange(e)}
-                    />
-                  </Col>
-                </FormGroup>
-                <div className="imgPreview">
-                  {$imagePreview}
-                </div>
-
-              </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>
 
             <Button color="primary" style={{ marginTop: '16px' }}>
               <FaEdit />
               {' '}
-  Mettre à jour
+              Mettre à jour
             </Button>
+
           </Form>
         </Container>
       </div>