53 } |
53 } |
54 |
54 |
55 showSessionsNumber = () => { |
55 showSessionsNumber = () => { |
56 if (this.props.sessions.size === 1) |
56 if (this.props.sessions.size === 1) |
57 return ( |
57 return ( |
58 <span>{this.props.sessions.size} session</span> |
58 <span className="pb-5">{this.props.sessions.size} session</span> |
59 ); |
59 ); |
60 return ( |
60 return ( |
61 <span>{this.props.sessions.size} sessions</span> |
61 <span className="pb-5">{this.props.sessions.size} sessions</span> |
62 ) |
62 ) |
63 |
63 |
|
64 } |
|
65 |
|
66 emptyListMessage = () => { |
|
67 |
|
68 if (this.props.sessions.size === 0) { |
|
69 return ( |
|
70 <h1 className="text-primary text-center mt-5 pt-5">vous n'avez créé aucune session pour le moment</h1> |
|
71 ); |
|
72 } |
64 } |
73 } |
65 |
74 |
66 deleteSession = () => { |
75 deleteSession = () => { |
67 const { sessionToDelete } = this.state; |
76 const { sessionToDelete } = this.state; |
68 |
77 |
79 <div> |
88 <div> |
80 <Navbar history={this.props.history} group={this.props.currentGroup} /> |
89 <Navbar history={this.props.history} group={this.props.currentGroup} /> |
81 <div className="container-fluid"> |
90 <div className="container-fluid"> |
82 <div className="session-count fixed-top bg-secondary font-weight-bold text-danger pl-4 pb-3 mb-3 mt-5 pt-3"> |
91 <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()} |
92 {this.showSessionsNumber()} |
|
93 {this.emptyListMessage()} |
84 </div> |
94 </div> |
85 <div className="row mt-4 justify-content-end"> |
95 <div className="row mt-5 justify-content-start"> |
86 {this.props.sessions.map((session) => |
96 {this.props.sessions.map((session) => |
87 <div className="session col-lg-5" key={session.get('_id')}> |
97 <div className="session col-lg-3" key={session.get('_id')}> |
88 <div className="col-md-auto m-2 p-2"> |
98 <div className="col-md-auto w-100 m-2 p-2"> |
89 <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'))}> |
90 <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> |
91 <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> |
92 <span className="session-description">{session.description}<br /></span> |
102 <span className="session-description">{session.description}<br /></span> |
93 </a> |
103 </a> |
94 <button type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }> |
104 <button type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }> |
95 <span className="material-icons delete text-dark">delete</span> |
105 <span className="material-icons delete text-dark">delete</span> |
|
106 </button> |
|
107 <button type="button" className="btn btn-link float-left" onClick={() => this.props.history.push('/read-only/' + session.get('_id'))}> |
|
108 <span className="material-icons delete text-dark">remove_red_eye</span> |
96 </button> |
109 </button> |
97 </div> |
110 </div> |
98 </div> |
111 </div> |
99 )} |
112 )} |
100 </div> |
113 </div> |