Touche échap pour fermer les fenêtres + Select Articles

src/css/Components/articledetails.css

@@ -10,6 +10,18 @@
     flex-direction: column;
 }
 
+#bulleSelect{
+    background-color: rgba(255, 255, 255, 0.719);
+    border-radius: 30px;
+    width:200px;
+    height:200px;
+    margin-top:30px;
+    margin-right:15px;
+    margin-left:15px;
+    display:flex;
+    flex-direction: column;
+}
+
     #imageordescblock{
         width:100%;
         height:145px;

src/js/Components/ArticleDetails.js

@@ -15,7 +15,8 @@ class ArticleDetails extends React.Component {
             currentArticle:'',
             redirect:false,
             redcrossPressed:false,
-            quantity:this.props.quantity
+            quantity:this.props.quantity,
+            selected:false
         }
         
     }
@@ -81,14 +82,67 @@ class ArticleDetails extends React.Component {
         }
     }
 
-
+    selectArticles = (e) => {
+        console.log(e.target.id)
+        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")){
+        this.setState({selected:!this.state.selected},()=>{
+            console.log(this.state.selected)
+        })   
+        }
+    }   
 
     render(){
         if (this.state.redirect) {
             return (<Redirect to='/stock'/>)
         }
         return(
-            <div id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
+            this.state.selected ?
+            <div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
+            {this.state.redcrossPressed ?
+            <div id="confirmation">
+                <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
+                <div id="choice">
+                    <div id="yes" onClick={this.deleteArticle}>Oui</div>
+                    <div id="no" onClick={this.handleNoDelete}>Non</div>
+                </div>
+            </div> 
+            : 
+            <>
+            <div id="imageordescblock">
+            {this.state.currentArticle === this.props.id ? 
+            <>
+            <div id="icons">
+                <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
+                    <Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
+                </div>
+                <div id="redcross" onClick={this.handleRedCross}>
+                    <Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
+                </div>
+            </div>
+            <div id="categoryDiv">
+                <img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
+            </div>
+            <div id="descandprice">
+                <h1 id="desc">{this.props.desc}</h1>
+                <p id ="price">{this.props.price} €</p>
+            </div>
+            </>
+            : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
+            }
+            </div>
+                    <h1 id="name">{this.props.name}</h1>
+                    <div id="count">
+                        <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
+                        <div id="countNumber">
+                            <p id="countNumberTxt">{this.state.quantity}</p>
+                        </div>
+                        <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
+                    </div>
+            </>        
+            }
+            </div>
+            : 
+            <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
             {this.state.redcrossPressed ?
             <div id="confirmation">
                 <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
@@ -131,7 +185,7 @@ class ArticleDetails extends React.Component {
                     </div>
             </>        
             }
-                </div>
+            </div>
         )
     }
 

src/js/Components/Articles.js

@@ -12,9 +12,8 @@ class Articles extends React.Component {
 
     componentDidMount(){
       
-    }
+    } 
 
-    
     render() {
       return (
           <div id="articleContainer">

src/js/Components/Categories.js

@@ -87,7 +87,7 @@ class Categories extends Component {
                                 </div>
                             </div>
                             <div id="catBigIconBlock">
-                                <img id="catBigIcon" src={`https://etud.insa-toulouse.fr/~proximo/v2/storage/icon/${this.state.categoryFocused.icon}`} alt="bonjour"/>
+                                <img id="catBigIcon" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.state.categoryFocused.icon}`} alt="bonjour"/>
                             </div>
                             <div id="redCrossBlock">
                                 <div onClick={this.handleDisplayConfirmation} id="redCross">
@@ -106,7 +106,7 @@ class Categories extends Component {
                             {if (category.id !== this.state.categoryFocused.id){
                             return(<div onClick={() => this.handleSwitchCategory(category)} key={category.id} id="categoryItem">
                                 <div id="categoryItemIcon">
-                                    <img id="categoryItemIconImg" src={`https://etud.insa-toulouse.fr/~proximo/v2/storage/icon/${category.icon}`} alt='bonjour'/>
+                                    <img id="categoryItemIconImg" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${category.icon}`} alt='bonjour'/>
                                 </div>
                                 <div id="categoryItemName">
                                     {category.name}

src/js/Components/EditArticle.js

@@ -143,10 +143,7 @@ class EditArticle extends React.Component {
         this.setState({onNewCategory:false})
     }
 
-
     render(){
-        console.log(this.props.article);
-        console.log(this.state);
         if (this.state.onNewCategory){
             return <CreateCategory reload={false} handleCloseAbove={this.handleCloseNewCategory}/>
         } else {

src/js/Views/Stock.js

@@ -32,42 +32,41 @@ export default class Stock extends React.Component {
       articles:[],
       categoryToModify:'',
       categorySorted:false,
-      dividedArticles:[],
       onSortedCategories:false,
-      onSearch:false
+      onSearch:false,
+      selectedArticles:[]
     }
   }
 
   componentDidMount() {
     this.getArticles()
-    
 }
 
-// Implémenter la fonction sortArticles :
-  sortArticles = (sortType) => {
-    
-    let sorted;
-    if (sortType === "name"){
-      sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name))
-    } else {
-      sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
-    }
 
-    if (sortType === 'category_id'){
+sortArticles = (sortType) => {
-        this.setState({articles:sorted},() => {
+  
-          this.setState({onSortedCategories:true})
+  let sorted;
-        })
+  if (sortType === "name"){
-    }else{
+    sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name))
-      this.setState({articles:sorted},() => {
+  } else {
-        console.log(this.state.articles)
+    sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
-        this.setState({onSortedCategories:false})
-      })
-    }
-
-   
-    
   }
 
+  if (sortType === 'category_id'){
+      this.setState({articles:sorted},() => {
+        this.setState({onSortedCategories:true})
+      })
+  }else{
+    this.setState({articles:sorted},() => {
+      console.log(this.state.articles)
+      this.setState({onSortedCategories:false})
+    })
+  }
+
+  
+  
+}
+
   getArticles = () => {
     axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
         .then(res => {
@@ -165,18 +164,30 @@ export default class Stock extends React.Component {
   handleSubmit = event => {
   event.preventDefault()
   this.searchArticles();
+  } 
+
+  closeWithEscape = (e) => {
+    if (e.keyCode === 27){
+     if (this.state.onEditArticle){
+       this.handleCloseEditArticle()
+     } else if(this.state.onNewArticle){
+       this.handleCloseNewArticle()
+     } else if(this.state.onNewCategory){
+       this.handleCloseNewCategory()
+     } else if(this.state.onEditCategory){
+       this.handleCloseEditCategory()
+     } else if(this.state.onCategories){
+       this.handleCloseCategories()
+     }
+    }
   }
 
-
-  
-
-
     render() {
       if (!sessionStorage.getItem('token')){
         return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
       } else {
       return (
-          <div id="stock">
+          <div id="stock" tabIndex={-1} onKeyDown={this.closeWithEscape}>
               <Header title='Le Stock'/>
               <Navbar handleNewArticle={this.handleNewArticle} handleNewCategory={this.handleNewCategory} right="Le Ticket de Caisse" left="Créer" leftLeft="Article" leftMiddle="|" leftRight="Catégorie" redirect="/ticket"/>
               {this.state.onNewArticle ?