pb Arrow Sort + Categorie Sort ok

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()
+      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++){
-    componentDidUpdate(){
+            console.log(articles.children[i].children[2].childElementCount);
-        console.log(this.state.articles);
+            if (this.props.articles[i][j].quantity === 0){
-        
+              this.props.colorArticle("red",articles.children[i].children[2].children[j])
-    }
+            }
-
-    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.props.articles[0][0] &&
-                    this.state.articles.map((divided) => 
+                    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>

src/js/Components/Sort.js

@@ -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>

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.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/>
               }