merger key sort.js*
This commit is contained in:
commit
d6b4cdfe22
8 changed files with 275 additions and 211 deletions
|
|
@ -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
|
||||
|
||||
<div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
|
||||
<div title={this.props.id} onClick={(e) => this.props.selectArticles(e,this.props.id)} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
|
||||
{this.state.redcrossPressed ?
|
||||
<div id="confirmation">
|
||||
<div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
|
||||
|
|
@ -189,7 +102,7 @@ class ArticleDetails extends React.Component {
|
|||
<div id="count">
|
||||
<Icon id="minusIcon" icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
|
||||
<div id="countNumber">
|
||||
<p id="countNumberTxt">{this.state.quantity}</p>
|
||||
<p id="countNumberTxt">{this.props.quantity}</p>
|
||||
</div>
|
||||
<Icon id="plusIcon" icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
|
||||
</div>
|
||||
|
|
@ -201,8 +114,6 @@ class ArticleDetails extends React.Component {
|
|||
|
||||
// INLINE
|
||||
|
||||
// NOT SELECTED
|
||||
|
||||
<div id="line">
|
||||
<div id="imgLine">
|
||||
<img id="imageLine" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
|
||||
|
|
|
|||
|
|
@ -15,28 +15,12 @@ class Articles extends React.Component {
|
|||
console.log(articles);
|
||||
for (let i = 0; i<articles.childElementCount; i++){
|
||||
if (this.props.articles[i].quantity === 0){
|
||||
this.colorArticle("red",articles.children[i])
|
||||
this.props.colorArticle("red",articles.children[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -46,7 +30,7 @@ class Articles extends React.Component {
|
|||
<div id="articles">
|
||||
{
|
||||
this.props.articles.map((article) =>
|
||||
<ArticleDetails colorArticle={this.colorArticle} squaredBubble={true} deselect={this.props.deselect} select={this.props.select} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
|
||||
<ArticleDetails selectArticles={this.props.selectArticles} colorArticle={this.props.colorArticle} plus={this.props.plus} minus={this.props.minus} squaredBubble={true} deselect={this.props.deselect} select={this.props.select} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,51 +6,36 @@ class ArticlesByCategory extends React.Component {
|
|||
constructor(props){
|
||||
super(props)
|
||||
this.state = {
|
||||
articles:this.props.articles
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.splitArticlesCategories()
|
||||
let articles = document.getElementById("articles")
|
||||
for (let i = 0; i<articles.childElementCount;i++){
|
||||
for (let j = 0; j<articles.children[i].children[2].childElementCount; j++){
|
||||
console.log(articles.children[i].children[2].childElementCount);
|
||||
if (this.props.articles[i][j].quantity === 0){
|
||||
this.props.colorArticle("red",articles.children[i].children[2].children[j])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(){
|
||||
console.log(this.state.articles);
|
||||
|
||||
}
|
||||
|
||||
splitArticlesCategories = () => {
|
||||
let counterTab = 0;
|
||||
let divided = [];
|
||||
divided.push([this.state.articles[0]])
|
||||
for (let i = 1; i<this.state.articles.length;i++){
|
||||
if (this.state.articles[i].category_id === this.state.articles[i-1].category_id){
|
||||
divided[counterTab].push(this.state.articles[i])
|
||||
} else {
|
||||
counterTab++
|
||||
divided.push([this.state.articles[i]])
|
||||
}
|
||||
}
|
||||
this.setState({articles:divided},()=>{
|
||||
console.log(this.state.articles)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
console.log(this.state.articles)
|
||||
return (
|
||||
<div id="articleContainer">
|
||||
<div id="articles">
|
||||
{this.state.articles[0][0] &&
|
||||
this.state.articles.map((divided) =>
|
||||
<div id="categoryBlock">
|
||||
{this.props.articles[0][0] &&
|
||||
this.props.articles.map((divided) =>
|
||||
<div key={divided[0].id} id="categoryBlock">
|
||||
<p id="categoryName">{divided[0].category.name}</p>
|
||||
<div id="underlinment"></div>
|
||||
<div id="bulles">
|
||||
{divided.map((article) =>
|
||||
<ArticleDetails squaredBubble={true} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
|
||||
<ArticleDetails selectArticles={this.props.selectArticles} squaredBubble={true} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import '../../css/Components/money.css'
|
||||
|
||||
class Money extends Component {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
|
|
@ -16,52 +15,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 +42,7 @@ class Selected extends Component {
|
|||
</Tooltip>
|
||||
<Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
|
||||
<div>
|
||||
<Icon onClick={this.deleteSelectedArticles} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
|
||||
<Icon onClick={this.props.delete} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ class Sort extends Component {
|
|||
<div id="selectAndOrder">
|
||||
<div id="selectBlock">
|
||||
<div id={this.state.unwound ? 'unwoundMenu' : 'selectBox'} >
|
||||
<select id='sortSelect' onClick={this.changeArrowDirection} onChange={this.handleChangeSortType}>
|
||||
<select id='sortSelect' onBlur={this.changeArrowDirection} onClick={this.changeArrowDirection} onChange={this.handleChangeSortType}>
|
||||
<option className="optionSort" value="name">Ordre Alphabétique</option>
|
||||
<option className="optionSort" value="category_id">Catégorie</option>
|
||||
<option className="optionSort" value="quantity">Quantité</option>
|
||||
|
|
@ -98,7 +98,7 @@ class Sort extends Component {
|
|||
</div>
|
||||
<p id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
|
||||
{this.state.orderText.split("").map((l) =>
|
||||
<div className="letter">{l}</div>
|
||||
<div key={l} className="letter">{l}</div>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@ export default class Stock extends React.Component {
|
|||
lowToHigh: true,
|
||||
selectedArticles:[],
|
||||
counter:0,
|
||||
code:''
|
||||
code:'',
|
||||
dividedArticles:[]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -47,11 +48,212 @@ 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;
|
||||
default :
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
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 ((value !== -1) || articles[i].quantity !== 0){
|
||||
articles[i].quantity+=value;
|
||||
|
||||
|
||||
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 => {
|
||||
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)
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
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 +270,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)
|
||||
})
|
||||
|
||||
|
|
@ -117,6 +319,7 @@ export default class Stock extends React.Component {
|
|||
//TRI PAR CATEGORIE
|
||||
if (sortType === 'category_id'){
|
||||
this.setState({articles:sorted},() => {
|
||||
this.splitArticlesCategories()
|
||||
this.setState({onSortedCategories:true})
|
||||
})
|
||||
}else{
|
||||
|
|
@ -131,6 +334,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<res.data.length;i++){
|
||||
res.data[i].selected = false;
|
||||
}
|
||||
this.setState({articles : res.data}, () => {
|
||||
console.log(this.state.articles)
|
||||
this.setState({sortType: "name"})
|
||||
|
|
@ -187,21 +393,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) => {
|
||||
|
|
@ -224,7 +416,9 @@ export default class Stock extends React.Component {
|
|||
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 => {
|
||||
|
|
@ -232,6 +426,35 @@ export default class Stock extends React.Component {
|
|||
})
|
||||
}
|
||||
|
||||
splitArticlesCategories = () => {
|
||||
let counterTab = 0;
|
||||
let divided = [];
|
||||
divided.push([this.state.articles[0]])
|
||||
for (let i = 1; i<this.state.articles.length;i++){
|
||||
if (this.state.articles[i].category_id === this.state.articles[i-1].category_id){
|
||||
divided[counterTab].push(this.state.articles[i])
|
||||
} else {
|
||||
counterTab++
|
||||
divided.push([this.state.articles[i]])
|
||||
}
|
||||
}
|
||||
this.setState({dividedArticles:divided},()=>{
|
||||
this.getElementandColorSplit()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
getElementandColorSplit = () => {
|
||||
let articles = document.getElementById("articles")
|
||||
for (let i = 0; i<articles.childElementCount;i++){
|
||||
for (let j = 0; j<articles.children[i].children[2].childElementCount; j++){
|
||||
if (this.state.dividedArticles[i][j].quantity === 0){
|
||||
this.colorArticle("red",articles.children[i].children[2].children[j])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleSearchChange = event => {
|
||||
this.setState({search : event.target.value},()=>
|
||||
{
|
||||
|
|
@ -277,13 +500,13 @@ export default class Stock extends React.Component {
|
|||
<Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsHidden={this.state.orderIsHidden} lowToHigh={this.state.lowToHigh}/>
|
||||
</div>
|
||||
<div id="selectedBlock">
|
||||
<Selected selectedArticles={this.state.selectedArticles} counter={this.state.counter}/>
|
||||
<Selected delete={this.deleteSelectedArticles} updateArticles={this.updateSelectedArticles} counter={this.state.counter}/>
|
||||
</div>
|
||||
<div id="articleBlock">
|
||||
{this.state.articles && this.state.articles[0] ?
|
||||
this.state.onSortedCategories ?
|
||||
<ArticlesByCategory onSearch={this.state.onSearch} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
|
||||
: <Articles deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
|
||||
<ArticlesByCategory selectArticles={this.selectArticles} colorArticle={this.colorArticle} handleCategories={this.handleCategories} articles={this.state.dividedArticles} editionArticle={this.handleArticleEdition}/>
|
||||
: <Articles selectArticles={this.selectArticles} colorArticle={this.colorArticle} plus={this.plusQuantity} minus={this.minusQuantity} deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
|
||||
: <AppLoader/>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -138,6 +140,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue