Moved properties in dedicated tab

src/App.css

@@ -2,7 +2,6 @@
   text-align: center;
 }
 
-
 @media screen and (min-width: 640px) {
   input.form-control {
     margin: 0 16px;
@@ -38,3 +37,15 @@
   padding: 16px;
   margin-top: 32px;
 }
+
+.form-group,
+label {
+  text-align: left;
+}
+
+.properties--card {
+  background: #e9ecef;
+  padding: 6px;
+  border-radius: 6px;
+  box-shadow: 4px 4px 16px #999;
+}

src/Vegetable.js

@@ -25,6 +25,7 @@ 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';
@@ -47,6 +48,7 @@ class Vegetable extends Component {
       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);
@@ -58,6 +60,19 @@ class Vegetable extends Component {
     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({
@@ -245,13 +260,21 @@ class Vegetable extends Component {
                   className={classnames({ active: this.state.activeTab === '2' })}
                   onClick={() => { this.toggle('2'); }}
                 >
-                  Carte
+                  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>
@@ -268,12 +291,19 @@ class Vegetable extends Component {
                 />
               </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="3">
+              <TabPane tabId="4">
                 <VegetableCarousel
                   addPicture={this.addPicture}
                   imagesPreviewUrls={this.state.imagesPreviewUrls}

src/Vegetable/Main.js

@@ -134,12 +134,6 @@ class VegetableMain extends Component {
               />
             </Col>
           </FormGroup>
-
-          <VegetablesProperties
-            selectedProperties={this.state.Vegetable.Properties}
-            availableProperties={this.state.availableProperties}
-            setProperties={this.handleChange}
-          />
         </Col>
         <Col xs={12} sm={8}>
           <div className="imgPreview">

src/Vegetable/Properties.js

@@ -2,13 +2,14 @@ import React, {
   Component,
 } from 'react';
 import {
+  Row,
+  Col,
   Button,
   FormGroup,
   Label,
   Input,
   InputGroup,
-  InputGroupAddon,
+  InputGroupAddon
-  Col
 } from 'reactstrap';
 import {
   FaPlus,
@@ -120,28 +121,30 @@ class VegetablesProperties extends Component {
 
   render() {
     return (
-      <div>
+      <Row>
         {this.state.selectedProperties.map( (item , key) => (
-          <FormGroup row key={key}>
+          <Col xs={12} lg={6} xl={4} key={key}>
-            <Label for="name" sm={4}>{item.label ? item.label : (item.Property ? item.Property.name : '')}</Label>
+            <FormGroup className="properties--card">
-            <Col sm={8}>
+              <Label for="name">{item.label ? item.label : (item.Property ? item.Property.name : '')}</Label>
               <Input
-                type="text"
+                type="textarea"
                 value={item.value}
                 id={item.propertyId}
                 placeholder={item.label}
                 onChange={this.handleArrayChange}
                 onBlur={this.updateParent}
               />
-            </Col>
             </FormGroup>
+          </Col>
         ))}
+        <Col xs={12}>
           <hr />
           <FormGroup row>
             <Label for="newProperty" sm={4}>Propriétés</Label>
             <Col sm={8}>
               <InputGroup>
                 <Input value={this.state.selectedPropety} type="select" name="selectedPropety" id="newProperty" onChange={this.handleChange}>
+                  <option />
                   {this.state.availableProperties.map( (item, key) => {
                     if ( this.notSet( item.id ) ) {
                       return (<option key={key} value={item.id}>{item.name}</option>)
@@ -157,8 +160,8 @@ class VegetablesProperties extends Component {
               </InputGroup>
             </Col>
           </FormGroup>
-
+        </Col>
-      </div>
+      </Row>
     )
   }