bamarty/Site-Proximo
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

pb Arrow Sort + Categorie Sort ok

Browse source
This commit is contained in:
Kongzibapt 2021-02-15 00:06:13 +01:00
parent 3eacd49491
commit c684a6a388
3 changed files with 49 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/js/Components/ArticlesByCategory.js
View file

@ -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<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]])
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])
}
}
}
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) =>
{this.props.articles[0][0] &&
this.props.articles.map((divided) =>
<div 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>

2
src/js/Components/Sort.js
View file

@ -93,7 +93,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>

38
src/js/Views/Stock.js
View file

@ -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.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.getElementandColor()
})
}
getElementandColor () {
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},()=>
{
@ -451,7 +483,7 @@ updateArticle = (index,id) => {
<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}/>
<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/>
}