From 6c99c8599325f3a11de40bcd6f80f8291998856d Mon Sep 17 00:00:00 2001 From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com> Date: Wed, 3 Feb 2021 14:42:42 +0100 Subject: [PATCH 1/2] =?UTF-8?q?Touche=20=C3=A9chap=20pour=20fermer=20les?= =?UTF-8?q?=20fen=C3=AAtres=20+=20Select=20Articles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/Components/articledetails.css | 12 +++++ src/js/Components/ArticleDetails.js | 62 +++++++++++++++++++++-- src/js/Components/Articles.js | 3 +- src/js/Components/Categories.js | 4 +- src/js/Components/EditArticle.js | 3 -- src/js/Views/Stock.js | 71 ++++++++++++++++----------- 6 files changed, 114 insertions(+), 41 deletions(-) diff --git a/src/css/Components/articledetails.css b/src/css/Components/articledetails.css index 36a2368..15f0947 100644 --- a/src/css/Components/articledetails.css +++ b/src/css/Components/articledetails.css @@ -10,6 +10,18 @@ flex-direction: column; } +#bulleSelect{ + background-color: rgba(255, 255, 255, 0.719); + border-radius: 30px; + width:200px; + height:200px; + margin-top:30px; + margin-right:15px; + margin-left:15px; + display:flex; + flex-direction: column; +} + #imageordescblock{ width:100%; height:145px; diff --git a/src/js/Components/ArticleDetails.js b/src/js/Components/ArticleDetails.js index aad7737..f52dd7f 100644 --- a/src/js/Components/ArticleDetails.js +++ b/src/js/Components/ArticleDetails.js @@ -15,7 +15,8 @@ class ArticleDetails extends React.Component { currentArticle:'', redirect:false, redcrossPressed:false, - quantity:this.props.quantity + quantity:this.props.quantity, + selected:false } } @@ -81,14 +82,67 @@ class ArticleDetails extends React.Component { } } - + selectArticles = (e) => { + console.log(e.target.id) + if ((e.target.id !== "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross") && (e.target.id !== "no")){ + this.setState({selected:!this.state.selected},()=>{ + console.log(this.state.selected) + }) + } + } render(){ if (this.state.redirect) { return () } return( -
+ this.state.selected ? +
+ {this.state.redcrossPressed ? +
+
Tu veux vraiment supprimer cet article ?
+
+
Oui
+
Non
+
+
+ : + <> +
+ {this.state.currentArticle === this.props.id ? + <> +
+
this.props.editArticle(this.props)}> + +
+
+ +
+
+
+ this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/> +
+
+

{this.props.desc}

+

{this.props.price} €

+
+ + : bonjour + } +
+

{this.props.name}

+
+ +
+

{this.state.quantity}

+
+ +
+ + } +
+ : +
{this.state.redcrossPressed ?
Tu veux vraiment supprimer cet article ?
@@ -131,7 +185,7 @@ class ArticleDetails extends React.Component {
} -
+
) } diff --git a/src/js/Components/Articles.js b/src/js/Components/Articles.js index b3b33d7..614fe0e 100644 --- a/src/js/Components/Articles.js +++ b/src/js/Components/Articles.js @@ -12,9 +12,8 @@ class Articles extends React.Component { componentDidMount(){ - } + } - render() { return (
diff --git a/src/js/Components/Categories.js b/src/js/Components/Categories.js index e3dac48..7b34395 100644 --- a/src/js/Components/Categories.js +++ b/src/js/Components/Categories.js @@ -87,7 +87,7 @@ class Categories extends Component {
- bonjour + bonjour
@@ -106,7 +106,7 @@ class Categories extends Component { {if (category.id !== this.state.categoryFocused.id){ return(
this.handleSwitchCategory(category)} key={category.id} id="categoryItem">
- bonjour + bonjour
{category.name} diff --git a/src/js/Components/EditArticle.js b/src/js/Components/EditArticle.js index c312a99..137c144 100644 --- a/src/js/Components/EditArticle.js +++ b/src/js/Components/EditArticle.js @@ -143,10 +143,7 @@ class EditArticle extends React.Component { this.setState({onNewCategory:false}) } - render(){ - console.log(this.props.article); - console.log(this.state); if (this.state.onNewCategory){ return } else { diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js index 2699fc0..7828b44 100644 --- a/src/js/Views/Stock.js +++ b/src/js/Views/Stock.js @@ -32,42 +32,41 @@ export default class Stock extends React.Component { articles:[], categoryToModify:'', categorySorted:false, - dividedArticles:[], onSortedCategories:false, - onSearch:false + onSearch:false, + selectedArticles:[] } } componentDidMount() { this.getArticles() - } -// Implémenter la fonction sortArticles : - sortArticles = (sortType) => { - - let sorted; - if (sortType === "name"){ - sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name)) - } else { - sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]); - } - if (sortType === 'category_id'){ - this.setState({articles:sorted},() => { - this.setState({onSortedCategories:true}) - }) - }else{ - this.setState({articles:sorted},() => { - console.log(this.state.articles) - this.setState({onSortedCategories:false}) - }) - } - - - +sortArticles = (sortType) => { + + let sorted; + if (sortType === "name"){ + sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name)) + } else { + sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]); } + if (sortType === 'category_id'){ + this.setState({articles:sorted},() => { + this.setState({onSortedCategories:true}) + }) + }else{ + this.setState({articles:sorted},() => { + console.log(this.state.articles) + this.setState({onSortedCategories:false}) + }) + } + + + +} + getArticles = () => { axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles') .then(res => { @@ -165,18 +164,30 @@ export default class Stock extends React.Component { handleSubmit = event => { event.preventDefault() this.searchArticles(); + } + + closeWithEscape = (e) => { + if (e.keyCode === 27){ + if (this.state.onEditArticle){ + this.handleCloseEditArticle() + } else if(this.state.onNewArticle){ + this.handleCloseNewArticle() + } else if(this.state.onNewCategory){ + this.handleCloseNewCategory() + } else if(this.state.onEditCategory){ + this.handleCloseEditCategory() + } else if(this.state.onCategories){ + this.handleCloseCategories() + } + } } - - - - render() { if (!sessionStorage.getItem('token')){ return (
ERREUR

Vous n'êtes pas connecté

Retourner à l'Accueil
) } else { return ( -
+
{this.state.onNewArticle ? From a7884d9a3b4883254a979124e14663b887b85821 Mon Sep 17 00:00:00 2001 From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com> Date: Wed, 3 Feb 2021 16:00:21 +0100 Subject: [PATCH 2/2] new component Selected --- src/css/Components/selected.css | 10 ++++++++++ src/css/Views/stock.css | 6 ++++++ src/js/Components/Selected.js | 22 ++++++++++++++++++++++ src/js/Views/Stock.js | 4 ++++ 4 files changed, 42 insertions(+) create mode 100644 src/css/Components/selected.css create mode 100644 src/js/Components/Selected.js diff --git a/src/css/Components/selected.css b/src/css/Components/selected.css new file mode 100644 index 0000000..d9581c6 --- /dev/null +++ b/src/css/Components/selected.css @@ -0,0 +1,10 @@ +#selectedBox{ + display: flex; +} + +#selectedTxt{ + color : white; + text-align: center; + font-family: 'Wellfleet', cursive; + font-size:2vw +} \ No newline at end of file diff --git a/src/css/Views/stock.css b/src/css/Views/stock.css index 1d54396..d895d16 100644 --- a/src/css/Views/stock.css +++ b/src/css/Views/stock.css @@ -7,6 +7,12 @@ display:flex } +#selectedBlock{ + display:flex; + justify-content:center; + margin-top:3vh; +} + #articleBlock{ display:flex; justify-content: center; diff --git a/src/js/Components/Selected.js b/src/js/Components/Selected.js new file mode 100644 index 0000000..a718e4b --- /dev/null +++ b/src/js/Components/Selected.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react'; +import '../../css/Components/selected.css' + +class Selected extends Component { + + constructor(props){ + super(props) + this.state = { + + } + } + + render() { + return ( +
+

Vous avez sélectionné 3 articles

+
+ ); + } +} + +export default Selected; \ No newline at end of file diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js index 7828b44..e07be9b 100644 --- a/src/js/Views/Stock.js +++ b/src/js/Views/Stock.js @@ -16,6 +16,7 @@ import Categories from '../Components/Categories'; import EditCategory from '../Components/EditCategory'; import Sort from '../Components/Sort'; import { Link } from 'react-router-dom'; +import Selected from '../Components/Selected'; export default class Stock extends React.Component { @@ -197,6 +198,9 @@ sortArticles = (sortType) => {
+
+ +
{this.state.articles && this.state.articles[0] ? this.state.onSortedCategories ?