client/src/components/SessionList.js
changeset 150 97536386b397
parent 148 fcce52a159bc
child 151 57d63a248f0d
--- 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>