Mise en forme Selected Actions

src/css/Components/articles.css

@@ -1,7 +1,7 @@
  #articleContainer{
     display:flex;
     justify-content:center;
-    margin-top:5vw;
+    margin-top:2vw;
     margin-bottom:5vw
  }
     

src/css/Components/selected.css

@@ -1,5 +1,9 @@
 #selectedBox{
     display: flex;
+    height:5vh;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 #selectedTxt{
@@ -7,4 +11,9 @@
     text-align: center;
     font-family: 'Wellfleet', cursive;
     font-size:2vw
+}
+
+#selectedActions{
+    display: flex;
+    flex-direction:row;
 }

src/js/Components/ArticleDetails.js

@@ -87,6 +87,11 @@ class ArticleDetails extends React.Component {
         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)
+            if (this.state.selected){
+                this.props.select()
+            } else {
+                this.props.deselect()
+            }
         })   
         }
     }   

src/js/Components/Articles.js

@@ -14,13 +14,14 @@ class Articles extends React.Component {
       
     } 
 
+
     render() {
       return (
           <div id="articleContainer">
             <div id="articles">
               {
                 this.props.articles.map((article) => 
-                <ArticleDetails 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 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

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
-import '../../css/Components/selected.css'
+import '../../css/Components/selected.css';
+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';
 
 class Selected extends Component {
 
@@ -13,7 +17,28 @@ class Selected extends Component {
     render() {
         return (
             <div id="selectedBox">
-                <p id="selectedTxt">Vous avez sélectionné 3 articles</p>
+                {this.props.counter ?  
+                <>          
+                    <p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
+                    <div id = "selectedActions">
+                        <Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
+                            <div>
+                            <Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />        
+                            </div>
+                        </Tooltip>
+                        <Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
+                            <div>
+                            <Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
+                            </div>
+                        </Tooltip>
+                        <Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
+                            <div>
+                            <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
+                            </div>
+                        </Tooltip>
+                    </div>
+                </>
+                : null}
             </div>
         );
     }

src/js/Views/Stock.js

@@ -36,7 +36,8 @@ export default class Stock extends React.Component {
       onSortedCategories:false,
       onSearch:false,
       sortOrder: 0,
-      selectedArticles:[]
+      selectedArticles:[],
+      counter:0
     }
   }
 
@@ -44,6 +45,22 @@ export default class Stock extends React.Component {
     this.getArticles()
   }
 
+  select = () => {
+
+    this.setState({counter:this.state.counter+1},()=>{
+      console.log(this.state.counter)
+    })
+
+  }
+
+  deselect = () => {
+
+    this.setState({counter:this.state.counter-1},()=>{
+      console.log(this.state.counter)
+    })
+
+  }
+
   // Implémenter la fonction sortArticles :
   sortArticles = (sortType) => {
       
@@ -218,13 +235,13 @@ export default class Stock extends React.Component {
                 <Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsVisible={this.state.orderIsVisible}/>
               </div>
               <div id="selectedBlock">
-                <Selected/>
+                <Selected 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 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}/>
               : <AppLoader/>
               }
               </div>