Delete Selection Ok

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
 
-            <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
+            <div 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'/>

src/js/Components/Articles.js

@@ -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} 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}/>    
             )}
             </div>
           </div>

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)
+        this.props.updateArticles(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)
-            })
-
-        }
     }
 
 
@@ -84,7 +43,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>

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<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 +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 {
                 <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}/>
+                : <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>