--- a/client/src/components/SessionList.js Mon Oct 08 04:09:19 2018 +0200
+++ b/client/src/components/SessionList.js Tue Oct 09 10:52:23 2018 +0200
@@ -55,14 +55,23 @@
showSessionsNumber = () => {
if (this.props.sessions.size === 1)
return (
- <span>{this.props.sessions.size} session</span>
+ <span className="pb-5">{this.props.sessions.size} session</span>
);
return (
- <span>{this.props.sessions.size} sessions</span>
+ <span className="pb-5">{this.props.sessions.size} sessions</span>
)
}
+ emptyListMessage = () => {
+
+ if (this.props.sessions.size === 0) {
+ return (
+ <h1 className="text-primary text-center mt-5 pt-5">vous n'avez créé aucune session pour le moment</h1>
+ );
+ }
+ }
+
deleteSession = () => {
const { sessionToDelete } = this.state;
@@ -81,11 +90,12 @@
<div className="container-fluid">
<div className="session-count fixed-top bg-secondary font-weight-bold text-danger pl-4 pb-3 mb-3 mt-5 pt-3">
{this.showSessionsNumber()}
+ {this.emptyListMessage()}
</div>
- <div className="row mt-4 justify-content-end">
+ <div className="row mt-5 justify-content-start">
{this.props.sessions.map((session) =>
- <div className="session col-lg-5" key={session.get('_id')}>
- <div className="col-md-auto m-2 p-2">
+ <div className="session col-lg-3" key={session.get('_id')}>
+ <div className="col-md-auto w-100 m-2 p-2">
<a className="sessions" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
<span className="session-title text-primary">{session.title || 'Session sans titre'}<br /></span>
<span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
@@ -94,6 +104,9 @@
<button type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }>
<span className="material-icons delete text-dark">delete</span>
</button>
+ <button type="button" className="btn btn-link float-left" onClick={() => this.props.history.push('/read-only/' + session.get('_id'))}>
+ <span className="material-icons delete text-dark">remove_red_eye</span>
+ </button>
</div>
</div>
)}