From 0dc8328425c0b7d1ddd0c28a805a3d816368140a Mon Sep 17 00:00:00 2001 From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com> Date: Sun, 14 Feb 2021 21:14:53 +0100 Subject: [PATCH 1/4] Delete Selection Ok --- src/js/Components/ArticleDetails.js | 95 +------------ src/js/Components/Articles.js | 22 +-- src/js/Components/Selected.js | 47 +----- src/js/Views/Stock.js | 213 +++++++++++++++++++++++++--- 4 files changed, 200 insertions(+), 177 deletions(-) diff --git a/src/js/Components/ArticleDetails.js b/src/js/Components/ArticleDetails.js index 88d04bd..5f938e6 100644 --- a/src/js/Components/ArticleDetails.js +++ b/src/js/Components/ArticleDetails.js @@ -52,96 +52,9 @@ class ArticleDetails extends React.Component { }) } - updateArticle = () => { - axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.props.id}`, - { - 'name':this.props.name, - 'description':this.props.desc, - 'quantity':this.state.quantity, - 'price':this.props.price, - 'code':this.props.code, - 'category_id':this.props.category.id - } - ) - .then(res => { - console.log(res.data) - }) - .catch(error => { - console.log(error.response) - }) - } - plusQuantity = (element) => { - this.setState({quantity:this.state.quantity+1},()=>{ - this.updateArticle(); - if (this.state.quantity > 0 ){ - if (this.state.selected){ - this.props.colorArticle("white",element) - } else { - this.props.colorArticle("grey",element) - } - } - }) - } - minusQuantity = (element) => { - if(this.state.quantity > 0){ - this.setState({quantity:this.state.quantity-1},()=>{ - this.updateArticle(); - if (this.state.quantity === 0){ - if (this.state.selected){ - this.props.colorArticle("red&white",element) - } else { - this.props.colorArticle("red",element) - } - } - }) - } - } - - // OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner - // on va minus ou plus quantity et colorer en rouge - - selectArticles = (e) => { - let currentElement = e.target; - let iconElement; - if (e.target.tagName === "path"){ - currentElement = e.target.parentElement - iconElement = currentElement - } - if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){ - iconElement = currentElement - } - while (currentElement.id !== "bulle"){ - currentElement = currentElement.parentElement - } - - console.log(currentElement); - 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") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){ - this.setState({selected:!this.state.selected},()=>{ - console.log(this.state.selected) - if (this.state.selected){ - this.props.select(this.props.id) - if (this.state.quantity === 0){ - this.props.colorArticle("red&white",currentElement) - } else { - this.props.colorArticle("white",currentElement) - } - } else { - this.props.deselect(this.props.id) - if (this.state.quantity === 0){ - this.props.colorArticle("red",currentElement) - } else { - this.props.colorArticle("grey",currentElement) - } - } - }) - } else if (iconElement.id === "minusIcon"){ - this.minusQuantity(currentElement) - } else if (iconElement.id === "plusIcon"){ - this.plusQuantity(currentElement) - } - } + render(){ if (this.state.redirect) { @@ -152,7 +65,7 @@ class ArticleDetails extends React.Component { // SQUARE -
+
this.props.selectArticles(e,this.props.id)} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> {this.state.redcrossPressed ?
Tu veux vraiment supprimer cet article ?
@@ -189,7 +102,7 @@ class ArticleDetails extends React.Component {
-

{this.state.quantity}

+

{this.props.quantity}

@@ -200,8 +113,6 @@ class ArticleDetails extends React.Component { : // INLINE - - // NOT SELECTED
diff --git a/src/js/Components/Articles.js b/src/js/Components/Articles.js index f7c35c7..ede1d13 100644 --- a/src/js/Components/Articles.js +++ b/src/js/Components/Articles.js @@ -15,28 +15,12 @@ class Articles extends React.Component { console.log(articles); for (let i = 0; i { - - switch (color) { - case "white": - element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);" - break; - case "grey" : - element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);" - break; - case "red" : - element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);" - break; - case "red&white" : - element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);" - break; - } - } + @@ -46,7 +30,7 @@ class Articles extends React.Component {
{ this.props.articles.map((article) => - + )}
diff --git a/src/js/Components/Selected.js b/src/js/Components/Selected.js index 8d220c5..638632f 100644 --- a/src/js/Components/Selected.js +++ b/src/js/Components/Selected.js @@ -16,52 +16,11 @@ class Selected extends Component { } minusQuantitySelected = () => { - this.updateArticle(-1) + this.props.updateArticles(-1) } plusQuantitySelected = () => { - this.updateArticle(1) - } - - updateArticle = (value) => { - - for (let i = 0 ; i < this.props.selectedArticles.length ; i++) { - - axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.props.selectedArticles[i].id}`, - { - 'name':this.props.selectedArticles[i].name, - 'description':this.props.selectedArticles[i].description, - 'quantity':this.props.selectedArticles[i].quantity+value, - 'price':this.props.selectedArticles[i].price, - 'code':this.props.selectedArticles[i].code, - 'category_id':this.props.selectedArticles[i].category.id - } - ) - .then(res => { - console.log(res.data) - }) - .catch(error => { - console.log(error.response) - }) - - } - - - } - - deleteSelectedArticles = () => { - - for (let i = 0 ; i < this.props.selectedArticles.length ; i++) { - - axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.props.selectedArticles[i].id}`) - .then(res => { - console.log(res.data) - }) - .catch(error => { - console.log(error.response) - }) - - } + this.props.updateArticles(1) } @@ -84,7 +43,7 @@ class Selected extends Component {
- +
diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js index 0bf2841..e110222 100644 --- a/src/js/Views/Stock.js +++ b/src/js/Views/Stock.js @@ -15,7 +15,7 @@ import AppLoader from '../Components/AppLoader'; import Categories from '../Components/Categories'; import EditCategory from '../Components/EditCategory'; import Sort from '../Components/Sort'; -import { Link } from 'react-router-dom'; +import { Link, Redirect } from 'react-router-dom'; import Selected from '../Components/Selected'; export default class Stock extends React.Component { @@ -38,7 +38,8 @@ export default class Stock extends React.Component { lowToHigh: true, selectedArticles:[], counter:0, - code:'' + code:'', + } } @@ -47,11 +48,190 @@ export default class Stock extends React.Component { } + + + deleteSelectedArticles = () => { + for (let i = 0 ; i < this.state.selectedArticles.length ; i++) { + + axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`) + .then(res => { + console.log(res.data) + if (i === this.state.selectedArticles.length-1){ + this.setState({counter:0,selectedArticles:[]},()=>{ + this.getArticles() + }) + } + }) + .catch(error => { + console.log(error.response) + }) + } +} + + // OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner + // on va minus ou plus quantity et colorer en rouge + + selectArticles = (e,id) => { + let currentElement = e.target; + let iconElement; + if (e.target.tagName === "path"){ + currentElement = e.target.parentElement + iconElement = currentElement + } + if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){ + iconElement = currentElement + } + while (currentElement.id !== "bulle"){ + currentElement = currentElement.parentElement + } + + 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") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){ + let index = this.getArticleById(id).i; + let articles = this.state.articles; + articles[index].selected = !this.state.articles[index].selected; + console.log(articles[index].selected); + this.setState({articles:articles},()=>{ + if (this.state.articles[index].selected){ + this.select(id) + if (this.state.articles[index].quantity === 0){ + this.colorArticle("red&white",currentElement) + } else { + this.colorArticle("white",currentElement) + } + } else { + this.deselect(id) + if (this.state.articles[index].quantity === 0){ + this.colorArticle("red",currentElement) + } else { + this.colorArticle("grey",currentElement) + } + } + }) + } else if (iconElement.id === "minusIcon"){ + this.minusQuantity(currentElement,id) + } else if (iconElement.id === "plusIcon"){ + this.plusQuantity(currentElement,id) + } + } + + colorArticle = (color,element) => { + + switch (color) { + case "white": + element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);" + break; + case "grey" : + element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);" + break; + case "red" : + element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);" + break; + case "red&white" : + element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);" + break; + } +} + + plusQuantity = (element,id) => { + let index = this.getArticleById(id).i; + let articles = this.state.articles; + articles[index].quantity++; + console.log(articles[index]); + this.setState({articles:articles},()=>{ + this.updateArticle(index,id); + if (this.state.articles[index].quantity > 0 ){ + if (this.state.articles[index].selected){ + this.colorArticle("white",element) + } else { + this.colorArticle("grey",element) + } + } + }) +} + +minusQuantity = (element,id) => { + let index = this.getArticleById(id).i; + + if (this.state.articles[index].quantity > 0){ + let articles = this.state.articles; + articles[index].quantity--; + console.log(articles[index]); + this.setState({articles:articles},()=>{ + this.updateArticle(index,id); + if (this.state.articles[index].quantity === 0 ){ + if (this.state.articles[index].selected){ + this.colorArticle("red&white",element) + } else { + this.colorArticle("red",element) + } + } + }) + } +} + +updateSelectedArticles = (value) => { + + let articles = this.state.selectedArticles; + + for (let i = 0 ; i < this.state.selectedArticles.length ; i++) { + + + if (articles[i].quantity >= 0){ + articles[i].quantity+=value; + } + // implémenter une fonction pour récupérer l'élément correspondant à l'id + + this.setState({selectedArticles:articles},() => { + axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`, + { + 'name':this.state.selectedArticles[i].name, + 'description':this.state.selectedArticles[i].description, + 'quantity':this.state.selectedArticles[i].quantity, + 'price':this.state.selectedArticles[i].price, + 'code':this.state.selectedArticles[i].code, + 'category_id':this.state.selectedArticles[i].category.id + } + ) + + .then(res => { + console.log(res.data) + }) + .catch(error => { + console.log(error.response) + }) + + + }) + + } + + +} + +updateArticle = (index,id) => { + axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${id}`, + { + 'name':this.state.articles[index].name, + 'description':this.state.articles[index].description, + 'quantity':this.state.articles[index].quantity, + 'price':this.state.articles[index].price, + 'code':this.state.articles[index].code, + 'category_id':this.state.articles[index].category.id + } + ) + .then(res => { + console.log(res.data) + }) + .catch(error => { + console.log(error.response) + }) +} + select = (id) => { console.log(id) this.setState({counter:this.state.counter+1},()=>{ console.log(this.state.counter) - this.state.selectedArticles.push(this.getArticleById(id)) + this.state.selectedArticles.push(this.getArticleById(id).current) console.log(this.state.selectedArticles) }) } @@ -68,14 +248,14 @@ export default class Stock extends React.Component { trouve = !trouve; } } - return(current); + return({current,i}); } deselect = (id) => { this.setState({counter:this.state.counter-1},()=>{ console.log(this.state.counter) - this.setState({selectedArticles: this.state.selectedArticles.filter((item) => item !== this.getArticleById(id))},()=>{ + this.setState({selectedArticles: this.state.selectedArticles.filter((item) => item !== this.getArticleById(id).current)},()=>{ console.log(this.state.selectedArticles) }) @@ -131,6 +311,9 @@ export default class Stock extends React.Component { getArticles = () => { axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles') .then(res => { + for (let i = 0; i { console.log(this.state.articles) this.setState({sortType: "name"}) @@ -187,21 +370,7 @@ export default class Stock extends React.Component { this.setState({onEditCategory:false}) } - // handleChangeSortType = (e) => { - // console.log(e.target.value) - // this.setState({sortType:e.target.value},()=>{ - // if (this.state.sortType === "Ordre Alphabétique"){ - // this.sortArticles("name") - // } else if(this.state.sortType === "Catégorie"){ - // this.sortArticles("category_id") - // } else if(this.state.sortType === "Quantité"){ - // this.sortArticles("quantity") - // } else if(this.state.sortType === "Prix"){ - // this.sortArticles("price"); - // } - // }) - // } //ATTENTION ça a changé, on passe directement le string en argument (j'avais besoin d'utiliser cette fonction autrement, voir dans Sort.js) handleChangeSortType = (type) => { @@ -277,13 +446,13 @@ export default class Stock extends React.Component {
- +
{this.state.articles && this.state.articles[0] ? this.state.onSortedCategories ? - - : + + : : }
From 3eacd49491b59a9258de0437eea17048f360523c Mon Sep 17 00:00:00 2001 From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com> Date: Sun, 14 Feb 2021 21:22:41 +0100 Subject: [PATCH 2/4] no problem state ticket --- src/js/Views/Ticket.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/js/Views/Ticket.js b/src/js/Views/Ticket.js index 51b6ee3..debe9f7 100644 --- a/src/js/Views/Ticket.js +++ b/src/js/Views/Ticket.js @@ -83,7 +83,9 @@ export default class Stock extends React.Component { } if (already){ - this.state.articlesJamalette[j].quantity++; + let articles = this.state.articlesJamalette; + articles[j].quantity++; + this.setState({articlesJamalette:articles}) } else { current.realQuantity = current.quantity; current.quantity = 1; From c684a6a388ccd4499abbc3de6a5916010b0b2ec5 Mon Sep 17 00:00:00 2001 From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com> Date: Mon, 15 Feb 2021 00:06:13 +0100 Subject: [PATCH 3/4] pb Arrow Sort + Categorie Sort ok --- src/js/Components/ArticlesByCategory.js | 41 ++++++++----------------- src/js/Components/Sort.js | 2 +- src/js/Views/Stock.js | 38 +++++++++++++++++++++-- 3 files changed, 49 insertions(+), 32 deletions(-) diff --git a/src/js/Components/ArticlesByCategory.js b/src/js/Components/ArticlesByCategory.js index a18ca66..7e0fdec 100644 --- a/src/js/Components/ArticlesByCategory.js +++ b/src/js/Components/ArticlesByCategory.js @@ -6,51 +6,36 @@ class ArticlesByCategory extends React.Component { constructor(props){ super(props) this.state = { - articles:this.props.articles } } componentDidMount(){ - this.splitArticlesCategories() - } - - componentDidUpdate(){ - console.log(this.state.articles); - - } - - splitArticlesCategories = () => { - let counterTab = 0; - let divided = []; - divided.push([this.state.articles[0]]) - for (let i = 1; i{ - console.log(this.state.articles) - }) - - } + } + + render() { - console.log(this.state.articles) return (
- {this.state.articles[0][0] && - this.state.articles.map((divided) => + {this.props.articles[0][0] && + this.props.articles.map((divided) =>

{divided[0].category.name}

{divided.map((article) => - + )}
diff --git a/src/js/Components/Sort.js b/src/js/Components/Sort.js index bb8cd3f..164306d 100644 --- a/src/js/Components/Sort.js +++ b/src/js/Components/Sort.js @@ -93,7 +93,7 @@ class Sort extends Component {
- diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js index 8044a7f..f20513c 100644 --- a/src/js/Views/Stock.js +++ b/src/js/Views/Stock.js @@ -39,7 +39,7 @@ export default class Stock extends React.Component { selectedArticles:[], counter:0, code:'', - + dividedArticles:[] } } @@ -297,6 +297,7 @@ updateArticle = (index,id) => { //TRI PAR CATEGORIE if (sortType === 'category_id'){ this.setState({articles:sorted},() => { + this.splitArticlesCategories() this.setState({onSortedCategories:true}) }) }else{ @@ -393,7 +394,9 @@ updateArticle = (index,id) => { axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/articles',bodyFormData) .then(res => { this.setState({articles : res.data}, () => { - console.log(this.state.articles) + if (this.state.sortType === "category_id"){ + this.splitArticlesCategories() + } }) }) .catch(error => { @@ -401,6 +404,35 @@ updateArticle = (index,id) => { }) } + splitArticlesCategories = () => { + let counterTab = 0; + let divided = []; + divided.push([this.state.articles[0]]) + for (let i = 1; i{ + this.getElementandColor() + }) + + } + + getElementandColor () { + let articles = document.getElementById("articles") + for (let i = 0; i { this.setState({search : event.target.value},()=> { @@ -451,7 +483,7 @@ updateArticle = (index,id) => {
{this.state.articles && this.state.articles[0] ? this.state.onSortedCategories ? - + : : } From 29846cb38ccc423f7ce0a47a2b263eae6ad6e8fc Mon Sep 17 00:00:00 2001 From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com> Date: Mon, 15 Feb 2021 09:17:13 +0100 Subject: [PATCH 4/4] Handle Selected Colors --- src/js/Components/ArticleDetails.js | 2 +- src/js/Components/Articles.js | 2 +- src/js/Components/ArticlesByCategory.js | 2 +- src/js/Components/Money.js | 1 - src/js/Components/Selected.js | 1 - src/js/Components/Sort.js | 2 +- src/js/Views/Stock.js | 36 ++++++++++++++++++++----- src/js/Views/Ticket.js | 2 ++ 8 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/js/Components/ArticleDetails.js b/src/js/Components/ArticleDetails.js index 5f938e6..4ba8760 100644 --- a/src/js/Components/ArticleDetails.js +++ b/src/js/Components/ArticleDetails.js @@ -65,7 +65,7 @@ class ArticleDetails extends React.Component { // SQUARE -
this.props.selectArticles(e,this.props.id)} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> +
this.props.selectArticles(e,this.props.id)} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> {this.state.redcrossPressed ?
Tu veux vraiment supprimer cet article ?
diff --git a/src/js/Components/Articles.js b/src/js/Components/Articles.js index ede1d13..19573bc 100644 --- a/src/js/Components/Articles.js +++ b/src/js/Components/Articles.js @@ -30,7 +30,7 @@ class Articles extends React.Component {
{ this.props.articles.map((article) => - + )}
diff --git a/src/js/Components/ArticlesByCategory.js b/src/js/Components/ArticlesByCategory.js index 7e0fdec..c1a7ef6 100644 --- a/src/js/Components/ArticlesByCategory.js +++ b/src/js/Components/ArticlesByCategory.js @@ -30,7 +30,7 @@ class ArticlesByCategory extends React.Component {
{this.props.articles[0][0] && this.props.articles.map((divided) => -
+

{divided[0].category.name}

diff --git a/src/js/Components/Money.js b/src/js/Components/Money.js index a0fa8cd..fd2d8cb 100644 --- a/src/js/Components/Money.js +++ b/src/js/Components/Money.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; import '../../css/Components/money.css' class Money extends Component { diff --git a/src/js/Components/Selected.js b/src/js/Components/Selected.js index 638632f..262fbab 100644 --- a/src/js/Components/Selected.js +++ b/src/js/Components/Selected.js @@ -4,7 +4,6 @@ import { Icon} from '@iconify/react'; import minusIcon from '@iconify/icons-fa-solid/minus'; import plusIcon from '@iconify/icons-fa-solid/plus'; import { Tooltip, Zoom } from '@material-ui/core'; -import axios from 'axios'; class Selected extends Component { diff --git a/src/js/Components/Sort.js b/src/js/Components/Sort.js index 164306d..abbeafb 100644 --- a/src/js/Components/Sort.js +++ b/src/js/Components/Sort.js @@ -103,7 +103,7 @@ class Sort extends Component {
diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js index f20513c..401d43c 100644 --- a/src/js/Views/Stock.js +++ b/src/js/Views/Stock.js @@ -15,7 +15,7 @@ import AppLoader from '../Components/AppLoader'; import Categories from '../Components/Categories'; import EditCategory from '../Components/EditCategory'; import Sort from '../Components/Sort'; -import { Link, Redirect } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import Selected from '../Components/Selected'; export default class Stock extends React.Component { @@ -129,6 +129,8 @@ export default class Stock extends React.Component { case "red&white" : element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);" break; + default : + break; } } @@ -169,17 +171,30 @@ minusQuantity = (element,id) => { } } +getBulleById = (id) => { + let element; + let articles = document.getElementById("articles") + for (let i = 0; i < articles.childElementCount ; i++){ + if (id == articles.children[i].title){ + element = articles.children[i] + } + } + + return element +} + + updateSelectedArticles = (value) => { + let articles = this.state.selectedArticles; for (let i = 0 ; i < this.state.selectedArticles.length ; i++) { - if (articles[i].quantity >= 0){ + if ((value !== -1) || articles[i].quantity !== 0){ articles[i].quantity+=value; - } - // implémenter une fonction pour récupérer l'élément correspondant à l'id + this.setState({selectedArticles:articles},() => { axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`, @@ -194,7 +209,13 @@ updateSelectedArticles = (value) => { ) .then(res => { - console.log(res.data) + let element = this.getBulleById(this.state.selectedArticles[i].id) + if (this.state.selectedArticles[i].quantity > 0){ + this.colorArticle("white",element) + } else { + this.colorArticle("red&white",element) + } + }) .catch(error => { console.log(error.response) @@ -202,6 +223,7 @@ updateSelectedArticles = (value) => { }) + } } @@ -417,12 +439,12 @@ updateArticle = (index,id) => { } } this.setState({dividedArticles:divided},()=>{ - this.getElementandColor() + this.getElementandColorSplit() }) } - getElementandColor () { + getElementandColorSplit = () => { let articles = document.getElementById("articles") for (let i = 0; i