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