13 |
13 |
14 class SessionList extends Component { |
14 class SessionList extends Component { |
15 |
15 |
16 constructor(props) { |
16 constructor(props) { |
17 super(props); |
17 super(props); |
18 this.state = { |
18 this.state = { |
|
19 show: false, |
19 modalIsOpen: false, |
20 modalIsOpen: false, |
20 sessionToDelete: null, |
21 sessionToDelete: null, |
21 }; |
22 } |
|
23 this.doSomething = this.doSomething.bind(this); |
|
24 this.toggleShow = this.toggleShow.bind(this); |
|
25 this.hide = this.hide.bind(this); |
|
26 } |
|
27 |
|
28 doSomething(e){ |
|
29 e.preventDefault(); |
|
30 console.log(e.target.innerHTML); |
|
31 } |
|
32 |
|
33 toggleShow(){ |
|
34 this.setState({show: !this.state.show}); |
|
35 } |
|
36 |
|
37 hide(e){ |
|
38 if(e && e.relatedTarget){ |
|
39 e.relatedTarget.click(); |
|
40 } |
|
41 this.setState({show: false}); |
22 } |
42 } |
23 |
43 |
24 openModal = () => { |
44 openModal = () => { |
25 this.setState({modalIsOpen: true}); |
45 this.setState({modalIsOpen: true}); |
26 } |
46 } |
80 } |
100 } |
81 |
101 |
82 render() { |
102 render() { |
83 return ( |
103 return ( |
84 <div> |
104 <div> |
85 <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button> |
105 <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button> |
86 <Navbar history={this.props.history} /> |
106 <Navbar history={this.props.history} /> |
|
107 <div className="top-fade"></div> |
87 <div className="container-fluid"> |
108 <div className="container-fluid"> |
88 <div className="row"> |
109 <div className="row"> |
89 {this.props.sessions.map((session) => |
110 {this.props.sessions.map((session) => |
90 <a className="sessions" href="#session" key={"session_"+session.get('_id')} onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}> |
111 <div> |
91 <div className="col-md-4 session" key={session.get('_id')}> |
112 <div className="col-md-4 session" key={session.get('_id')}> |
92 <span className="session-title">{session.title || ''}<br /></span> |
113 <a className="sessions" href="#session" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}> |
93 <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span> |
114 <span className="session-title">{session.title || 'Session sans titre'}<br /></span> |
94 <span className="session-description">{session.description}<br /></span> |
115 <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span> |
95 <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }> |
116 <span className="session-description">{session.description}<br /></span> |
96 <span className="material-icons">delete</span> |
117 </a> |
97 </a> |
118 <button className="btn btn-link pull-left" key={session.get('_id')} id="toggle-edit" type="button" onClick={this.toggleShow} onBlur={this.hide}> |
|
119 <span className="material-icons edit">edit</span> |
|
120 </button> |
|
121 { |
|
122 this.state.show && |
|
123 ( |
|
124 <button type="button" className="btn btn-link pull-left" style={{display: 'block'}} onClick={ this.onClickDelete.bind(this, session) }> |
|
125 <span className="material-icons delete">delete</span> |
|
126 </button> |
|
127 ) |
|
128 } |
|
129 </div> |
98 </div> |
130 </div> |
99 </a> |
|
100 )} |
131 )} |
101 </div> |
132 </div> |
102 </div> |
133 </div> |
103 <Modal |
134 <Modal |
104 className="Modal__Bootstrap modal-dialog" |
135 className="Modal__Bootstrap modal-dialog" |
105 // closeTimeoutMS={150} |
136 // closeTimeoutMS={150} |
106 isOpen={this.state.modalIsOpen} |
137 isOpen={this.state.modalIsOpen} |
107 onRequestClose={this.handleModalCloseRequest} |
138 onRequestClose={this.handleModalCloseRequest} |
108 > |
139 > |
109 <div className="modal-content"> |
140 <div id="delete-session-modal" className="modal-content text-center"> |
110 <div className="modal-body"> |
141 <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> |
111 Êtes-vous sûr(e) ? |
142 {/* <div className="modal-body"> */} |
112 </div> |
143 <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span> |
|
144 {/* </div> */} |
113 <div className="modal-footer"> |
145 <div className="modal-footer"> |
114 <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button> |
146 <button type="button" className="btn btn-primary" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button> |
115 <button type="button" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button> |
|
116 </div> |
147 </div> |
117 </div> |
148 </div> |
118 </Modal> |
149 </Modal> |
119 </div> |
150 </div> |
120 ); |
151 ); |