UX for Vegetable form
This commit is contained in:
parent
84c5fe0a6c
commit
62392b8597
3 changed files with 180 additions and 89 deletions
|
@ -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",
|
||||
|
|
|
@ -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
255
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>
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue