From 056396092b14638ba85e2fbec957748d011201e4 Mon Sep 17 00:00:00 2001
From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com>
Date: Thu, 4 Feb 2021 19:27:45 +0100
Subject: [PATCH] Mise en forme Selected Actions

---
 src/css/Components/articles.css     |  2 +-
 src/css/Components/selected.css     |  9 +++++++++
 src/js/Components/ArticleDetails.js |  5 +++++
 src/js/Components/Articles.js       |  3 ++-
 src/js/Components/Selected.js       | 29 +++++++++++++++++++++++++++--
 src/js/Views/Stock.js               | 23 ++++++++++++++++++++---
 6 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/css/Components/articles.css b/src/css/Components/articles.css
index b118035..800cc35 100644
--- a/src/css/Components/articles.css
+++ b/src/css/Components/articles.css
@@ -1,7 +1,7 @@
  #articleContainer{
     display:flex;
     justify-content:center;
-    margin-top:5vw;
+    margin-top:2vw;
     margin-bottom:5vw
  }
     
diff --git a/src/css/Components/selected.css b/src/css/Components/selected.css
index d9581c6..213d614 100644
--- a/src/css/Components/selected.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/js/Components/ArticleDetails.js b/src/js/Components/ArticleDetails.js
index f52dd7f..343fafe 100644
--- a/src/js/Components/ArticleDetails.js
+++ b/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()
+            }
         })   
         }
     }   
diff --git a/src/js/Components/Articles.js b/src/js/Components/Articles.js
index 614fe0e..88215ce 100644
--- a/src/js/Components/Articles.js
+++ b/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>
diff --git a/src/js/Components/Selected.js b/src/js/Components/Selected.js
index a718e4b..e58216a 100644
--- a/src/js/Components/Selected.js
+++ b/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>
         );
     }
diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js
index 4e1e5c6..f21db7c 100644
--- a/src/js/Views/Stock.js
+++ b/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>