--- a/client/src/components/SessionList.js Tue Aug 28 18:52:12 2018 +0200
+++ b/client/src/components/SessionList.js Wed Aug 29 11:02:36 2018 +0200
@@ -15,10 +15,30 @@
constructor(props) {
super(props);
- this.state = {
+ this.state = {
+ show: false,
modalIsOpen: false,
sessionToDelete: null,
- };
+ }
+ this.doSomething = this.doSomething.bind(this);
+ this.toggleShow = this.toggleShow.bind(this);
+ this.hide = this.hide.bind(this);
+ }
+
+ doSomething(e){
+ e.preventDefault();
+ console.log(e.target.innerHTML);
+ }
+
+ toggleShow(){
+ this.setState({show: !this.state.show});
+ }
+
+ hide(e){
+ if(e && e.relatedTarget){
+ e.relatedTarget.click();
+ }
+ this.setState({show: false});
}
openModal = () => {
@@ -82,23 +102,34 @@
render() {
return (
<div>
- <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
+ <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
<Navbar history={this.props.history} />
+ <div className="top-fade"></div>
<div className="container-fluid">
<div className="row">
{this.props.sessions.map((session) =>
- <a className="sessions" href="#session" key={"session_"+session.get('_id')} onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
- <div className="col-md-4 session" key={session.get('_id')}>
- <span className="session-title">{session.title || ''}<br /></span>
- <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
- <span className="session-description">{session.description}<br /></span>
- <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
- <span className="material-icons">delete</span>
- </a>
+ <div>
+ <div className="col-md-4 session" key={session.get('_id')}>
+ <a className="sessions" href="#session" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
+ <span className="session-title">{session.title || 'Session sans titre'}<br /></span>
+ <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
+ <span className="session-description">{session.description}<br /></span>
+ </a>
+ <button className="btn btn-link pull-left" key={session.get('_id')} id="toggle-edit" type="button" onClick={this.toggleShow} onBlur={this.hide}>
+ <span className="material-icons edit">edit</span>
+ </button>
+ {
+ this.state.show &&
+ (
+ <button type="button" className="btn btn-link pull-left" style={{display: 'block'}} onClick={ this.onClickDelete.bind(this, session) }>
+ <span className="material-icons delete">delete</span>
+ </button>
+ )
+ }
+ </div>
</div>
- </a>
)}
- </div>
+ </div>
</div>
<Modal
className="Modal__Bootstrap modal-dialog"
@@ -106,13 +137,13 @@
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
- <div className="modal-content">
- <div className="modal-body">
- Êtes-vous sûr(e) ?
- </div>
+ <div id="delete-session-modal" className="modal-content text-center">
+ <button type="button" id="delete-session-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ {/* <div className="modal-body"> */}
+ <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span>
+ {/* </div> */}
<div className="modal-footer">
- <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
- <button type="button" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button>
+ <button type="button" className="btn btn-primary" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
</div>
</div>
</Modal>