Pb edit and Delete résolu

src/css/Components/selected.css

@@ -17,3 +17,47 @@
     display: flex;
     flex-direction:row;
 }
+
+#confirmationDelete{
+    display: flex;
+    height:5vh;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#confirmationDeleteTxt{
+    color:white;
+    text-align: center;
+    font-family: 'Wellfleet',cursive;
+    font-size : 1.5vw
+}
+
+#choiceDelete{
+    margin-top:0.5vh;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Wellfleet', cursive;
+    font-size:1.3vw;
+}
+    #yesDelete{
+        background-color:white;
+        padding:10% 15% 10% 15%;
+        border-radius: 1.2vw;
+        cursor: pointer;
+        border: 2px solid black;
+        color:black;
+        margin-right:1vw;
+    }
+
+    #noDelete{
+        background-color: #0036C1;
+        padding:10% 15% 10% 15%;
+        border-radius: 15px;
+        cursor: pointer;
+        border: 2px solid black;
+        color:white;
+        margin-left:1vw
+    }
+

src/js/Components/Selected.js

@@ -10,7 +10,7 @@ class Selected extends Component {
     constructor(props){
         super(props)
         this.state = {
-            redirect:false
+            onDeleteConfirmation:false
         }
     }
 
@@ -22,31 +22,49 @@ class Selected extends Component {
         this.props.updateArticles(1)
     }
 
+    handleDeleteConfirmation = () => {
+        this.setState({onDeleteConfirmation:true})
+    }
+
+    handleNoDelete = () => {
+        this.setState({onDeleteConfirmation:false})
+    }
+
 
     render() {
         return (
             <div id="selectedBox">
                 {this.props.counter ? 
-                <>          
+                    this.state.onDeleteConfirmation ?
-                    <p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
+                        <div id="confirmationDelete">
-                    <div id = "selectedActions">
+                            {this.props.counter === 1 ? 
-                        <Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
+                                <div id="confirmationDeleteTxt">Tu veux vraiment supprimer cet article ?</div>
-                            <div>
+                             : <div id="confirmationDeleteTxt">Tu veux vraiment supprimer ces {this.props.counter} articles ?</div>}
-                            <Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />        
+                            <div id="choiceDelete">
+                                <div id="yesDelete" onClick={this.props.delete}>Oui</div>
+                                <div id="noDelete" onClick={this.handleNoDelete}>Non</div>
                             </div>
-                        </Tooltip>
+                        </div> 
-                        <Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
+                    :    <>          
-                            <div>
+                            <p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
-                            <Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
+                            <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 onClick={this.handleDeleteConfirmation} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
+                                    </div>
+                                </Tooltip>
                             </div>
-                        </Tooltip>
+                        </>
-                        <Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
-                            <div>
-                            <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>
-                </>
                 : null}
             </div>
         );

src/js/Views/Stock.js

@@ -73,7 +73,7 @@ export default class Stock extends React.Component {
 
     selectArticles = (e,id) => {
       let currentElement = e.target;
-      let iconElement;
+      let iconElement = e.target;
       if (e.target.tagName === "path"){
           currentElement = e.target.parentElement
           iconElement = currentElement
@@ -127,7 +127,7 @@ export default class Stock extends React.Component {
             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);"
+            element.style.cssText = "background-color:rgba(255, 139, 139, 0.60);"
             break;
         default :
             break;