frontend et backend: Crée une nouvelle fonction
This commit is contained in:
Divlo
@ -70,137 +70,140 @@ const Profile = (props) => {
|
||||
<HeadTag title={`${props.name} - FunctionProject`} description={`Profil utilisateur de ${props.name}. ${(props.biography != undefined) ? props.biography : ""}`} />
|
||||
|
||||
{/* Édition du profil */}
|
||||
{(isOpen) &&
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<div className="container-fluid Profile__container">
|
||||
<div className="row Profile__row">
|
||||
<div className="col-24">
|
||||
<div className="Profile__Modal-top-container row">
|
||||
<div className="col-24">
|
||||
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
|
||||
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
|
||||
</span>
|
||||
<h2 className="text-center">Éditer le profil</h2>
|
||||
<p className="text-center"><em>(Vous devrez vous reconnecter après la sauvegarde) <br/> Si vous changez votre adresse email, vous devrez la confirmer comme à l'inscription (vérifier vos emails).</em></p>
|
||||
{(isOpen) ?
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<div className="Profile__container container-fluid">
|
||||
<div className="Profile__row row">
|
||||
<div className="col-24">
|
||||
<div className="Profile__Modal-top-container row">
|
||||
<div className="col-24">
|
||||
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
|
||||
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
|
||||
</span>
|
||||
<h2 className="text-center">Éditer le profil</h2>
|
||||
<p className="text-center"><em>(Vous devrez vous reconnecter après la sauvegarde) <br/> Si vous changez votre adresse email, vous devrez la confirmer comme à l'inscription (vérifier vos emails).</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-24">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="name">Nom :</label>
|
||||
<input value={inputState.name} onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="Divlo" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="email">Email :</label>
|
||||
<input value={inputState.email} onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
|
||||
</div>
|
||||
|
||||
<div className="form-group custom-control custom-switch">
|
||||
<input onChange={(event) => handleChange(event, true)} type="checkbox" name="isPublicEmail" checked={inputState.isPublicEmail} className="custom-control-input" id="isPublicEmail" />
|
||||
<label className="custom-control-label" htmlFor="isPublicEmail">Email Public</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="biography">Biographie :</label>
|
||||
<textarea style={{ height: 'auto' }} value={inputState.biography} onChange={handleChange} name="biography" id="biography" className="form-control" rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="logo">Logo <em>(400x400 recommandé)</em> :</label>
|
||||
<p style={{ margin: 0 }}><em>Si aucun fichier est choisi, le logo ne sera pas modifié.</em></p>
|
||||
<input onChange={handleChange} accept="image/jpeg,image/jpg,image/png,image/gif" type="file" name="logo" id="logo" />
|
||||
</div>
|
||||
|
||||
<div className="form-group text-center">
|
||||
<button type="submit" className="btn btn-dark">Sauvegarder</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="form-result text-center">
|
||||
{
|
||||
(isLoading) ?
|
||||
<Loader />
|
||||
:
|
||||
htmlParser(message)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<div className="col-24">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="name">Nom :</label>
|
||||
<input value={inputState.name} onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="Divlo" />
|
||||
:
|
||||
|
||||
<div className="container-fluid Profile__container">
|
||||
<div className="row Profile__row">
|
||||
<div className="col-20">
|
||||
<div className="text-center">
|
||||
<h1>Profil de <span className="important">{props.name}</span></h1>
|
||||
</div>
|
||||
<div className="row justify-content-center">
|
||||
|
||||
<div className="col-24 text-center">
|
||||
<img className="Profile__logo" src={API_URL + props.logo} alt={props.name} />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="email">Email :</label>
|
||||
<input value={inputState.email} onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
|
||||
<div className="col-24 text-center">
|
||||
{(props.biography != undefined) && <p>{props.biography}</p>}
|
||||
{(props.email != undefined) && <p><span className="important">Email :</span> {props.email}</p>}
|
||||
<p><span className="important">Date de création :</span> {publicationDate}</p>
|
||||
</div>
|
||||
|
||||
<div className="form-group custom-control custom-switch">
|
||||
<input onChange={(event) => handleChange(event, true)} type="checkbox" name="isPublicEmail" checked={inputState.isPublicEmail} className="custom-control-input" id="isPublicEmail" />
|
||||
<label className="custom-control-label" htmlFor="isPublicEmail">Email Public</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="biography">Biographie :</label>
|
||||
<textarea style={{ height: 'auto' }} value={inputState.biography} onChange={handleChange} name="biography" id="biography" className="form-control" rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="logo">Logo <em>(400x400 recommandé)</em> :</label>
|
||||
<p style={{ margin: 0 }}><em>Si aucun fichier est choisi, le logo ne sera pas modifié.</em></p>
|
||||
<input onChange={handleChange} accept="image/jpeg,image/jpg,image/png,image/gif" type="file" name="logo" id="logo" />
|
||||
</div>
|
||||
|
||||
<div className="form-group text-center">
|
||||
<button type="submit" className="btn btn-dark">Sauvegarder</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="form-result text-center">
|
||||
{
|
||||
(isLoading) ?
|
||||
<Loader />
|
||||
:
|
||||
htmlParser(message)
|
||||
{(isAuth && user.name === props.name) &&
|
||||
<button onClick={toggleModal} style={{ marginBottom: '25px' }} className="btn btn-dark">
|
||||
<FontAwesomeIcon icon={faPen} style={{cursor: 'pointer', width: '1rem'}} />
|
||||
Éditez le profil
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
}
|
||||
|
||||
<div className={`container-fluid Profile__container ${(isOpen) ? "d-none" : ""}`}>
|
||||
<div className="row Profile__row">
|
||||
<div className="col-20">
|
||||
<div className="text-center">
|
||||
<h1>Profil de <span className="important">{props.name}</span></h1>
|
||||
</div>
|
||||
<div className="row justify-content-center">
|
||||
|
||||
<div className="col-24 text-center">
|
||||
<img className="Profile__logo" src={API_URL + props.logo} alt={props.name} />
|
||||
</div>
|
||||
|
||||
<div className="col-24 text-center">
|
||||
{(props.biography != undefined) && <p>{props.biography}</p>}
|
||||
{(props.email != undefined) && <p><span className="important">Email :</span> {props.email}</p>}
|
||||
<p><span className="important">Date de création :</span> {publicationDate}</p>
|
||||
</div>
|
||||
|
||||
{(isAuth && user.name === props.name) &&
|
||||
<button onClick={toggleModal} style={{ marginBottom: '25px' }} className="btn btn-dark">
|
||||
<FontAwesomeIcon icon={faPen} style={{cursor: 'pointer', width: '1rem'}} />
|
||||
Éditez le profil
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(props.favoritesArray.length > 0) &&
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24 text-center">
|
||||
<h2>Fonctions en <span className="important">favoris :</span></h2>
|
||||
</div>
|
||||
<div className="col-24">
|
||||
|
||||
{(props.favoritesArray.length > 0) &&
|
||||
<div className="row justify-content-center">
|
||||
{props.favoritesArray.map((favorite) => {
|
||||
return (
|
||||
<FunctionCard key={favorite.id} { ...favorite } />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{(props.commentsArray.length > 0) &&
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24 text-center">
|
||||
<h2>Derniers <span className="important">commentaires :</span></h2>
|
||||
</div>
|
||||
<div className="col-24 text-center">
|
||||
{props.commentsArray.map((comment) => (
|
||||
<div key={comment.id} className="row Profile__row Profile__comment">
|
||||
<div className="col-20">
|
||||
<p>
|
||||
Posté sur la fonction
|
||||
<Link href={(comment.function.type === 'form' || comment.function.type === 'article') ? "/functions/[slug]" : `/functions/${comment.function.slug}`} as={`/functions/${comment.function.slug}`}>
|
||||
<a>{comment.function.title}</a>
|
||||
</Link>
|
||||
le {date.format(new Date(comment.createdAt), 'DD/MM/YYYY à HH:mm', true)}
|
||||
</p>
|
||||
<p>"{comment.message}"</p>
|
||||
<div className="col-24 text-center">
|
||||
<h2>Fonctions en <span className="important">favoris :</span></h2>
|
||||
</div>
|
||||
<div className="col-24">
|
||||
<div className="row justify-content-center">
|
||||
{props.favoritesArray.map((favorite) => {
|
||||
return (
|
||||
<FunctionCard key={favorite.id} { ...favorite } />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{(props.commentsArray.length > 0) &&
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24 text-center">
|
||||
<h2>Derniers <span className="important">commentaires :</span></h2>
|
||||
</div>
|
||||
<div className="col-24 text-center">
|
||||
{props.commentsArray.map((comment) => (
|
||||
<div key={comment.id} className="row Profile__row Profile__comment">
|
||||
<div className="col-20">
|
||||
<p>
|
||||
Posté sur la fonction
|
||||
<Link href={(comment.function.type === 'form' || comment.function.type === 'article') ? "/functions/[slug]" : `/functions/${comment.function.slug}`} as={`/functions/${comment.function.slug}`}>
|
||||
<a>{comment.function.title}</a>
|
||||
</Link>
|
||||
le {date.format(new Date(comment.createdAt), 'DD/MM/YYYY à HH:mm', true)}
|
||||
</p>
|
||||
<p>"{comment.message}"</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user