Browse Source

Pb edit and Delete résolu

Kongzibapt 3 years ago
parent
commit
3fa3ae9c8d
3 changed files with 85 additions and 23 deletions
  1. 45
    1
      src/css/Components/selected.css
  2. 38
    20
      src/js/Components/Selected.js
  3. 2
    2
      src/js/Views/Stock.js

+ 45
- 1
src/css/Components/selected.css View File

@@ -16,4 +16,48 @@
16 16
 #selectedActions{
17 17
     display: flex;
18 18
     flex-direction:row;
19
-}
19
+}
20
+
21
+#confirmationDelete{
22
+    display: flex;
23
+    height:5vh;
24
+    flex-direction: column;
25
+    justify-content: center;
26
+    align-items: center;
27
+}
28
+
29
+#confirmationDeleteTxt{
30
+    color:white;
31
+    text-align: center;
32
+    font-family: 'Wellfleet',cursive;
33
+    font-size : 1.5vw
34
+}
35
+
36
+#choiceDelete{
37
+    margin-top:0.5vh;
38
+    display:flex;
39
+    justify-content: center;
40
+    align-items: center;
41
+    font-family: 'Wellfleet', cursive;
42
+    font-size:1.3vw;
43
+}
44
+    #yesDelete{
45
+        background-color:white;
46
+        padding:10% 15% 10% 15%;
47
+        border-radius: 1.2vw;
48
+        cursor: pointer;
49
+        border: 2px solid black;
50
+        color:black;
51
+        margin-right:1vw;
52
+    }
53
+
54
+    #noDelete{
55
+        background-color: #0036C1;
56
+        padding:10% 15% 10% 15%;
57
+        border-radius: 15px;
58
+        cursor: pointer;
59
+        border: 2px solid black;
60
+        color:white;
61
+        margin-left:1vw
62
+    }
63
+

+ 38
- 20
src/js/Components/Selected.js View File

@@ -10,7 +10,7 @@ class Selected extends Component {
10 10
     constructor(props){
11 11
         super(props)
12 12
         this.state = {
13
-            redirect:false
13
+            onDeleteConfirmation:false
14 14
         }
15 15
     }
16 16
 
@@ -22,31 +22,49 @@ class Selected extends Component {
22 22
         this.props.updateArticles(1)
23 23
     }
24 24
 
25
+    handleDeleteConfirmation = () => {
26
+        this.setState({onDeleteConfirmation:true})
27
+    }
28
+
29
+    handleNoDelete = () => {
30
+        this.setState({onDeleteConfirmation:false})
31
+    }
32
+
25 33
 
26 34
     render() {
27 35
         return (
28 36
             <div id="selectedBox">
29
-                {this.props.counter ?  
30
-                <>          
31
-                    <p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
32
-                    <div id = "selectedActions">
33
-                        <Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
34
-                            <div>
35
-                            <Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />        
36
-                            </div>
37
-                        </Tooltip>
38
-                        <Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
39
-                            <div>
40
-                            <Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
37
+                {this.props.counter ? 
38
+                    this.state.onDeleteConfirmation ?
39
+                        <div id="confirmationDelete">
40
+                            {this.props.counter === 1 ? 
41
+                                <div id="confirmationDeleteTxt">Tu veux vraiment supprimer cet article ?</div>
42
+                             : <div id="confirmationDeleteTxt">Tu veux vraiment supprimer ces {this.props.counter} articles ?</div>}
43
+                            <div id="choiceDelete">
44
+                                <div id="yesDelete" onClick={this.props.delete}>Oui</div>
45
+                                <div id="noDelete" onClick={this.handleNoDelete}>Non</div>
41 46
                             </div>
42
-                        </Tooltip>
43
-                        <Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
44
-                            <div>
45
-                            <Icon onClick={this.props.delete} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
47
+                        </div> 
48
+                    :    <>          
49
+                            <p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
50
+                            <div id = "selectedActions">
51
+                                <Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
52
+                                    <div>
53
+                                    <Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />        
54
+                                    </div>
55
+                                </Tooltip>
56
+                                <Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
57
+                                    <div>
58
+                                    <Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
59
+                                    </div>
60
+                                </Tooltip>
61
+                                <Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
62
+                                    <div>
63
+                                    <Icon onClick={this.handleDeleteConfirmation} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
64
+                                    </div>
65
+                                </Tooltip>
46 66
                             </div>
47
-                        </Tooltip>
48
-                    </div>
49
-                </>
67
+                        </>
50 68
                 : null}
51 69
             </div>
52 70
         );

+ 2
- 2
src/js/Views/Stock.js View File

@@ -73,7 +73,7 @@ export default class Stock extends React.Component {
73 73
 
74 74
     selectArticles = (e,id) => {
75 75
       let currentElement = e.target;
76
-      let iconElement;
76
+      let iconElement = e.target;
77 77
       if (e.target.tagName === "path"){
78 78
           currentElement = e.target.parentElement
79 79
           iconElement = currentElement
@@ -127,7 +127,7 @@ export default class Stock extends React.Component {
127 127
             element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
128 128
             break;
129 129
         case "red&white" :
130
-            element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
130
+            element.style.cssText = "background-color:rgba(255, 139, 139, 0.60);"
131 131
             break;
132 132
         default :
133 133
             break;

Loading…
Cancel
Save