From b5303c37d412271e5e64032b7edab0a830a15848 Mon Sep 17 00:00:00 2001 From: dbroqua Date: Tue, 2 Oct 2018 19:39:45 +0200 Subject: [PATCH] Added Properties form --- src/App.js | 2 + src/Header.js | 26 ++++++++- src/Navigation.js | 53 +++++++++++------ src/Properties.js | 143 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 203 insertions(+), 21 deletions(-) create mode 100644 src/Properties.js diff --git a/src/App.js b/src/App.js index 891c7af..765b709 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch, } from 'react-router-dom'; +import Properties from './Properties'; import Categories from './Categories'; import Category from './Category'; import Vegetable from './Vegetable'; @@ -21,6 +22,7 @@ class App extends Component { + diff --git a/src/Header.js b/src/Header.js index ae5eccb..cb738f4 100644 --- a/src/Header.js +++ b/src/Header.js @@ -1,5 +1,7 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { + Link +} from 'react-router-dom'; import { Collapse, Navbar, @@ -9,7 +11,11 @@ import { NavItem, NavLink, } from 'reactstrap'; -import { FaSignOutAlt } from 'react-icons/fa'; +import { + FaSignOutAlt, + FaLeaf, + FaSlidersH +} from 'react-icons/fa'; export default class Example extends React.Component { constructor(props) { @@ -35,11 +41,25 @@ export default class Example extends React.Component { diff --git a/src/Navigation.js b/src/Navigation.js index 59379bd..b2d2211 100644 --- a/src/Navigation.js +++ b/src/Navigation.js @@ -1,6 +1,11 @@ import React from 'react'; -import { Breadcrumb, BreadcrumbItem } from 'reactstrap'; -import { Link } from 'react-router-dom'; +import { + Breadcrumb, + BreadcrumbItem +} from 'reactstrap'; +import { + Link +} from 'react-router-dom'; import API from './Api'; class Navigation extends React.Component { @@ -10,25 +15,33 @@ class Navigation extends React.Component { const Breadcrumb = []; if (API.defaults.headers.common.Authorization !== undefined) { - Breadcrumb.push({ - name: 'Catégories', - path: '/categories', - active: !this.props.categoryId, - }); - - if (this.props.categoryId) { + if (this.props.root && this.props.root === 'Property') { Breadcrumb.push({ - name: this.props.categoryId, - path: `/categories/${this.props.categoryId}`, - active: !this.props.vegetableId, + name: 'Propriétés', + path: '/properties', + active: true, + }); + } else { + Breadcrumb.push({ + name: 'Catégories', + path: '/categories', + active: !this.props.categoryId, }); - if (this.props.vegetableId) { + if (this.props.categoryId) { Breadcrumb.push({ - name: this.props.vegetableId, - path: `/categories/${this.props.categoryId}/vegetal/${this.props.vegetableId}`, - active: true, + name: this.props.categoryId, + path: `/categories/${this.props.categoryId}`, + active: !this.props.vegetableId, }); + + if (this.props.vegetableId) { + Breadcrumb.push({ + name: this.props.vegetableId, + path: `/categories/${this.props.categoryId}/vegetal/${this.props.vegetableId}`, + active: true, + }); + } } } } @@ -42,12 +55,16 @@ class Navigation extends React.Component { if (props.categoryName) { const Breadcrumb = this.state.Breadcrumb; Breadcrumb[1].name = props.categoryName; - this.setState({ Breadcrumb }); + this.setState({ + Breadcrumb + }); } if (props.vegetableName) { const Breadcrumb = this.state.Breadcrumb; Breadcrumb[2].name = props.vegetableName; - this.setState({ Breadcrumb }); + this.setState({ + Breadcrumb + }); } } diff --git a/src/Properties.js b/src/Properties.js new file mode 100644 index 0000000..5f48552 --- /dev/null +++ b/src/Properties.js @@ -0,0 +1,143 @@ +import React, { + Component +} from 'react'; +import { + Container, + Table, + Form, + FormGroup, + Button, + Input, +} from 'reactstrap'; +import { + FaTrashAlt, + FaPlus +} from 'react-icons/fa'; +import Navigation from './Navigation'; +import Header from './Header'; +import API from './Api'; + +class Properties extends Component { + constructor(props) { + super(props); + + this.getProperties = this.getProperties.bind(this); + this.addProperty = this.addProperty.bind(this); + this.deleteProperty = this.deleteProperty.bind(this); + this.handleChange = this.handleChange.bind(this); + + this.state = { + Properties: [], + name: '', + }; + + this.getProperties(); + } + + handleChange(event) { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + + this.setState({ + [name]: value, + }); + } + + getProperties() { + API.get('properties') + .then((res) => { + if (res.status === 200) { + this.setState({ + Properties: res.data.rows + }); + } else { + this.setState({ + Properties: [] + }); + } + }) + .catch((e) => { + alert('Erreur lors de la récupération des types de propriétés'); + }); + } + + addProperty(event) { + event.preventDefault(); // Let's stop this event. + event.stopPropagation(); // Really this time. + API.post('properties', { + name: this.state.name, + }) + .then((res) => { + this.setState(prevState => ({ + Properties: [...prevState.Properties, res.data], + name: '' + })); + }) + .catch(() => { + alert('Impossile de créer ce type de propriété'); + }); + } + + deleteProperty(property) { + API.delete(`properties/${property.id}`) + .then((res) => { + this.setState({ + Properties: this.state.Properties.filter(item => item.id !== property.id), + }); + }) + .catch((e) => { + alert('Erreur lors de la suppression de ce type de propriété'); + }); + } + + render() { + return ( +
+
+ + + + + + + + + + + + {this.state.Properties.map((item, key) => ( + + + + + + ))} + +
#NomAction
{item.id}{item.name} + {' '} + +
+
+ + + + +
+
+
+ ); + } +} + +export default Properties;