rodivert/bo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UX for Vegetable form

This commit is contained in:
dbroqua 2018-09-18 22:54:25 +02:00
parent 84c5fe0a6c
commit 62392b8597
3 changed files with 180 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

13
src/Vegetable.css
View File

@ -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;
}

255
src/Vegetable.js
View File

@ -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>
<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}
/>
<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'); }}
>
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>
<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}
/>
</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>
<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>
<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>
<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>
</Row>
</TabPane>
</TabContent>
<Button color="primary" style={{ marginTop: '16px' }}>
<FaEdit />
{' '}
Mettre à jour
Mettre à jour
</Button>
</Form>
</Container>
</div>