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