131 lines
3.4 KiB
JavaScript
131 lines
3.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {
|
|
Container,
|
|
Table,
|
|
Form,
|
|
FormGroup,
|
|
Button,
|
|
Input,
|
|
} from 'reactstrap';
|
|
import { FaTrashAlt } from 'react-icons/fa';
|
|
import { Link } from 'react-router-dom';
|
|
import Header from './Header';
|
|
import API from './Api';
|
|
|
|
class Categories extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.getCategories = this.getCategories.bind(this);
|
|
this.addCategory = this.addCategory.bind(this);
|
|
this.deleteCategory = this.deleteCategory.bind(this);
|
|
this.handleChange = this.handleChange.bind(this);
|
|
|
|
this.state = {
|
|
Categories: [],
|
|
name: '',
|
|
};
|
|
|
|
this.getCategories();
|
|
}
|
|
|
|
handleChange(event) {
|
|
const target = event.target;
|
|
const value = target.type === 'checkbox' ? target.checked : target.value;
|
|
const name = target.name;
|
|
|
|
this.setState({
|
|
[name]: value,
|
|
});
|
|
}
|
|
|
|
getCategories() {
|
|
API.get('types')
|
|
.then((res) => {
|
|
if (res.status === 200) {
|
|
this.setState({ Categories: res.data.rows });
|
|
} else {
|
|
this.setState({ Categories: [] });
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
alert('Erreur lors de la récupération des catégories');
|
|
});
|
|
}
|
|
|
|
addCategory(event) {
|
|
event.preventDefault(); // Let's stop this event.
|
|
event.stopPropagation(); // Really this time.
|
|
API.post('types', {
|
|
name: this.state.name,
|
|
})
|
|
.then((res) => {
|
|
this.setState(prevState => ({ Categories: [...prevState.Categories, res.data], name: '' }));
|
|
})
|
|
.catch(() => {
|
|
alert('Impossile de créer cette catégorie');
|
|
});
|
|
}
|
|
|
|
deleteCategory(category) {
|
|
API.delete(`types/${category.id}`)
|
|
.then((res) => {
|
|
this.setState({
|
|
Categories: this.state.Categories.filter(item => item.id !== category.id),
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
alert('Erreur lors de la suppression de cette catégorie');
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Container>
|
|
<Header />
|
|
<Table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Nom</th>
|
|
<th>Nom d'éléments</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{this.state.Categories.map((item, key) => (
|
|
<tr key={key}>
|
|
<th scope="row"><Link to={`/categories/${item.id}`}>{item.id}</Link></th>
|
|
<td>{item.name}</td>
|
|
<td>{item.Vegetables !== undefined ? item.Vegetables.length : 0 }</td>
|
|
<td>
|
|
{' '}
|
|
<Button color="danger" onClick={() => this.deleteCategory(item)}><FaTrashAlt /></Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
<tr>
|
|
<td colSpan="4">
|
|
<Form inline onSubmit={this.addCategory}>
|
|
<FormGroup className="mb-8 mr-sm-8 mb-sm-0">
|
|
<Input
|
|
type="text"
|
|
name="name"
|
|
value={this.state.name}
|
|
placeholder="Nouvelle catégorie"
|
|
onChange={this.handleChange}
|
|
/>
|
|
</FormGroup>
|
|
<Button color="primary">Ajouter</Button>
|
|
</Form>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Categories;
|