client/src/components/SessionForm.js
changeset 191 3f71ad81a5a9
parent 170 7da1d5137b0b
child 192 e4c2c1919c20
equal deleted inserted replaced
190:01ad654237d5 191:3f71ad81a5a9
     1 import React, { Component } from 'react';
     1 import React, { Component } from 'react';
     2 import { connect } from 'react-redux';
     2 import { connect } from 'react-redux';
     3 import { bindActionCreators } from 'redux';
     3 import { bindActionCreators } from 'redux';
     4 import '../App.css';
       
     5 import * as sessionsActions from '../actions/sessionsActions';
     4 import * as sessionsActions from '../actions/sessionsActions';
     6 import * as authActions from '../actions/authActions';
     5 import * as authActions from '../actions/authActions';
     7 import _ from 'lodash';
     6 import _ from 'lodash';
     8 import './SessionForm.css';
       
     9 
     7 
    10 class SessionForm extends Component {
     8 class SessionForm extends Component {
    11 
     9 
    12   state = {
    10   state = {
    13     createGroup: false,
    11     createGroup: false,
   119       return (
   117       return (
   120       <div
   118       <div
   121         onClick={this.toggleOnTitleEditMode}
   119         onClick={this.toggleOnTitleEditMode}
   122         className='session-page-title border-0 bg-irinotes-headers text-muted ml-3'
   120         className='session-page-title border-0 bg-irinotes-headers text-muted ml-3'
   123       >
   121       >
   124         { this.props.currentSession.title || 'Espace titre' }
   122         { this.props.currentSession.title || <span className='session-placeholder'>Espace titre</span> }
   125       </div>
   123       </div>
   126     );
   124     );
   127     }
   125     }
   128 
   126 
   129     if (this.state.titleEditMode === true) {
   127     if (this.state.titleEditMode === true) {
   130     return (
   128     return (
   131     <div className="form-group pr-5">
   129     <div className="form-group pr-5">
   132       <textarea className='session-page-title form-control border-primary bg-secondary text-muted ml-3'
   130       <textarea className='session-page-title form-control border-primary bg-secondary text-muted ml-3  session-placeholder'
   133         onKeyDown={ this.saveEdit }
   131         onKeyDown={ this.saveEdit }
   134         onChange={ this.onChange }
   132         onChange={ this.onChange }
   135         type="textarea"
   133         type="textarea"
   136         name="title"
   134         name="title"
   137         defaultValue={ this.props.currentSession.title || 'Espace titre' }
   135         defaultValue={ this.props.currentSession.title }
   138         placeholder="Espace titre"
   136         placeholder="Espace titre"
   139         ref={title => this.title = title}
   137         ref={title => this.title = title}
   140       >
   138       ></textarea>
   141       </textarea>
       
   142     </div>
   139     </div>
   143     );
   140     );
   144     }
   141     }
   145   }
   142   }
   146 
   143 
   150     return (
   147     return (
   151     <div
   148     <div
   152       onClick={this.toggleOnDescriptionEditMode}
   149       onClick={this.toggleOnDescriptionEditMode}
   153       className="session-page-description border-0 bg-irinotes-headers text-muted ml-3"
   150       className="session-page-description border-0 bg-irinotes-headers text-muted ml-3"
   154     >
   151     >
   155       { this.props.currentSession.description || 'Espace description' }
   152       { this.props.currentSession.description || <span className='session-placeholder'>Espace description</span> }
   156     </div>
   153     </div>
   157   );
   154   );
   158   }
   155   }
   159 
   156 
   160   if (this.state.descriptionEditMode === true) {
   157   if (this.state.descriptionEditMode === true) {
   161   return (
   158   return (
   162     <div className="form-group mt-2 pb-2">
   159     <div className="form-group mt-2 pb-2">
   163     <textarea className="session-page-description form-control border-primary bg-secondary text-muted ml-3"
   160       <textarea className="session-page-description form-control border-primary bg-secondary text-muted ml-3 session-placeholder"
   164       onKeyDown={ this.saveEdit }
   161         onKeyDown={ this.saveEdit }
   165       onChange={ this.onChange }
   162         onChange={ this.onChange }
   166       type="textarea"
   163         type="textarea"
   167       name="description"
   164         name="description"
   168       defaultValue={ this.props.currentSession.description || 'Espace description' }
   165         defaultValue={ this.props.currentSession.description }
   169       placeholder="Espace description"
   166         placeholder="Espace description"
   170       ref={desc => this.desc = desc}
   167         ref={desc => this.desc = desc}
   171     >
   168       ></textarea>
   172     </textarea>
   169     </div>
   173   </div>
       
   174   );
   170   );
   175   }
   171   }
   176 }
   172 }
   177 
   173 
   178   render() {
   174   render() {