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,12 +22,30 @@ 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 ?
+                        <div id="confirmationDelete">
+                            {this.props.counter === 1 ? 
+                                <div id="confirmationDeleteTxt">Tu veux vraiment supprimer cet article ?</div>
+                             : <div id="confirmationDeleteTxt">Tu veux vraiment supprimer ces {this.props.counter} articles ?</div>}
+                            <div id="choiceDelete">
+                                <div id="yesDelete" onClick={this.props.delete}>Oui</div>
+                                <div id="noDelete" onClick={this.handleNoDelete}>Non</div>
+                            </div>
+                        </div> 
+                    :    <>          
                             <p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
                             <div id = "selectedActions">
                                 <Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
@@ -42,7 +60,7 @@ class Selected extends Component {
                                 </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'}} />
+                                    <Icon onClick={this.handleDeleteConfirmation} 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

@@ -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;