From bd50e6f8521b7f2c501bcc7815b509556eee2690 Mon Sep 17 00:00:00 2001
From: Damien <damien.armillon@gmail.com>
Date: Fri, 3 May 2019 18:52:27 +0200
Subject: [PATCH] Le modal de suppression existe
---
front/src/ModalSuppression.js | 24 ++++++++++++++++++++++++
front/src/ToucanLine.js | 22 +++++++++++++++++++---
2 files changed, 43 insertions(+), 3 deletions(-)
create mode 100644 front/src/ModalSuppression.js
diff --git a/front/src/ModalSuppression.js b/front/src/ModalSuppression.js
new file mode 100644
index 0000000..bc9884d
--- /dev/null
+++ b/front/src/ModalSuppression.js
@@ -0,0 +1,24 @@
+import React, {Component} from 'react'
+import {Modal, Button, Image, Grid} from 'semantic-ui-react'
+
+class ModalSupression extends Component {
+ state={hihi:true};
+ render() {
+ return (
+ <Modal open={this.props.open} size="tiny"
+ onClose={()=>this.props.closeModal()}
+ >
+ <Modal.Header style ={{textAlign:"center"}}>Veux tu vraiment supprimer ce Toucan ?</Modal.Header>
+ <Modal.Content>
+ <Image centered src={`/toucan/img/${this.props.imageId}`} size="medium"/>
+ </Modal.Content>
+ <Modal.Actions style ={{textAlign:"center"}} >
+ <Button negative>Supprimer le Toucan</Button>
+ <Button positive> Laisser le Toucan là où il est</Button>
+ </Modal.Actions>
+ </Modal>
+ )
+ }
+}
+
+export default ModalSupression
\ No newline at end of file
diff --git a/front/src/ToucanLine.js b/front/src/ToucanLine.js
index 1e91014..f8b3e0f 100644
--- a/front/src/ToucanLine.js
+++ b/front/src/ToucanLine.js
@@ -1,7 +1,15 @@
import React, {Component} from 'react'
-import {Table, Image, Button} from 'semantic-ui-react'
+import {Table, Image, Button, Modal} from 'semantic-ui-react'
+import ModalSuppression from './ModalSuppression'
class ToucanLine extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {isModalOpen: false}
+ this.closeModal = this.closeModal.bind(this)
+ }
+
+
date(time){
const dateObject = new Date(time)
const year = dateObject.getFullYear();
@@ -10,11 +18,14 @@ class ToucanLine extends Component {
return (`${day+1}/${month+1}/${year}`)
}
+ closeModal() {
+ this.setState({ isModalOpen: false })
+ }
+
render(){
return (
<Table.Row>
<Table.Cell >
- {console.log(this.props.toucan["_id"])}
<a href={`http://localhost:8000/toucan/pdf/${this.props.toucan["_id"]}`}>
<Image
src={`/toucan/img/${this.props.toucan["_id"]}`}
@@ -29,7 +40,12 @@ class ToucanLine extends Component {
{this.date(this.props.toucan.date)}
</Table.Cell>
<Table.Cell style={{width:"fit-content"}}>
- <Button negative icon="cancel"/>
+ <Button negative icon="cancel" onClick={() => this.setState({isModalOpen: true})}/>
+ <ModalSuppression
+ open={this.state.isModalOpen}
+ imageId={this.props.toucan["_id"]}
+ closeModal={this.closeModal}
+ />
</Table.Cell>
</Table.Row>
)
--
GitLab