50 modalIsOpen: true, |
50 modalIsOpen: true, |
51 sessionToDelete: session |
51 sessionToDelete: session |
52 }) |
52 }) |
53 } |
53 } |
54 |
54 |
|
55 showSessionsNumber = () => { |
|
56 if (this.props.sessions.size === 1) |
|
57 return ( |
|
58 <span>{this.props.sessions.size} session</span> |
|
59 ); |
|
60 return ( |
|
61 <span>{this.props.sessions.size} sessions</span> |
|
62 ) |
|
63 |
|
64 } |
|
65 |
55 deleteSession = () => { |
66 deleteSession = () => { |
56 const { sessionToDelete } = this.state; |
67 const { sessionToDelete } = this.state; |
57 |
68 |
58 this.props.sessionsActions.deleteSession(sessionToDelete); |
69 this.props.sessionsActions.deleteSession(sessionToDelete); |
59 |
70 |
64 } |
75 } |
65 |
76 |
66 render() { |
77 render() { |
67 return ( |
78 return ( |
68 <div> |
79 <div> |
69 <Navbar history={this.props.history} /> |
80 <Navbar history={this.props.history} group={this.props.currentGroup} /> |
70 <div className="container-fluid"> |
81 <div className="container-fluid"> |
71 <div className="row mt-5 pt-5"> |
82 <div className="session-count fixed-top bg-secondary font-weight-bold text-danger pl-4 pb-3 mb-3 mt-5 pt-3"> |
|
83 {this.showSessionsNumber()} |
|
84 </div> |
|
85 <div className="row mt-4 justify-content-end"> |
72 {this.props.sessions.map((session) => |
86 {this.props.sessions.map((session) => |
73 <div className="col-lg-4" id="session"> |
87 <div className="session col-lg-5" key={session.get('_id')}> |
74 <div className="col-md-auto m-4 p-4 session" key={session.get('_id')}> |
88 <div className="col-md-auto m-2 p-2"> |
75 <a className="sessions" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}> |
89 <a className="sessions" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}> |
76 <span className="session-title text-primary">{session.title || 'Session sans titre'}<br /></span> |
90 <span className="session-title text-primary">{session.title || 'Session sans titre'}<br /></span> |
77 <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span> |
91 <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span> |
78 <span className="session-description text-dark">{session.description}<br /></span> |
92 <span className="session-description">{session.description}<br /></span> |
79 </a> |
93 </a> |
80 <button type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }> |
94 <button type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }> |
81 <span className="material-icons delete text-dark">delete</span> |
95 <span className="material-icons delete text-dark">delete</span> |
82 </button> |
96 </button> |
83 </div> |
97 </div> |
84 </div> |
98 </div> |
85 )} |
99 )} |
86 </div> |
100 </div> |
87 </div> |
101 </div> |
88 <Modal |
102 <Modal |
89 className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center" |
103 className="Modal__Bootstrap modal-dialog modal-dialog-centered w-25" |
90 // closeTimeoutMS={150} |
104 // closeTimeoutMS={150} |
91 isOpen={this.state.modalIsOpen} |
105 isOpen={this.state.modalIsOpen} |
92 onRequestClose={this.handleModalCloseRequest} |
106 onRequestClose={this.handleModalCloseRequest} |
93 > |
107 > |
94 <div id="delete-session-modal" className="modal-content"> |
108 <div id="delete-session-modal" className="modal-content"> |
95 <span id="delete-session-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span> |
109 <span id="delete-session-close-modal-button" className="material-icons text-right" onClick={ this.handleModalCloseRequest }>close</span> |
96 <div className="modal-body text-center"> |
110 <div className="modal-body text-center"> |
97 <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span> |
111 <span className="modal-text">Supprimer cette session ?</span> |
98 <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> |
112 <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 ml-3" id="delete-session-modal-button" onClick={ this.deleteSession }>Supprimer</button> |
99 </div> |
113 </div> |
100 </div> |
114 </div> |
101 </Modal> |
115 </Modal> |
102 </div> |
116 </div> |
103 ); |
117 ); |