@ -1,12 +1,22 @@
import React , { Component } from "react" ;
import { Button , Col , Container , Row } from "reactstrap" ;
import { ToastContainer} from "react-toastify" ;
import { toast, ToastContainer} from "react-toastify" ;
import ButtonWithConfirm from "../form/ButtonWithConfirm" ;
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ;
import { faCheck } from "@fortawesome/free-solid-svg-icons" ;
//TODO : variable de config dans un fichier à part (avec les mentions, le min/max de mentions, le nombre max de candidats, les maxlength,l'url api, etc ...)
const mentions = [ "Excellent" , "Trés Bien" , "Bien" , "Assez Bien" , "Passable" , "Insuffisant" , "A Rejeter" ] ;
const mentions = [
{ label : "Excellent" , color : "#015411" } ,
{ label : "Trés Bien" , color : "#019812" } ,
{ label : "Bien" , color : "#6bca24" } ,
{ label : "Assez Bien" , color : "#ffb200" } ,
{ label : "Passable" , color : "#ff5d00" } ,
{ label : "Insuffisant" , color : "#b20616" } ,
{ label : "A Rejeter" , color : "#6f0214" } ,
] ;
class Vote extends Component {
@ -64,10 +74,24 @@ class Vote extends Component {
}
handleMentionClick = ( event ) => {
let data = {
id : parseInt ( event . currentTarget . getAttribute ( "data-id" ) ) ,
value : parseInt ( event . currentTarget . value )
} ;
//remove candidate
let ratedCandidates = this . state . ratedCandidates . filter ( ratedCandidate => ratedCandidate . id !== data . id ) ;
ratedCandidates . push ( data ) ;
this . setState ( { ratedCandidates : ratedCandidates } ) ;
} ;
handleSubmit = ( event ) => {
handleSubmitWithoutAllRate = ( ) => {
toast . error ( "Vous devez évaluer l'ensemble des propositions/candidats !" , {
position : toast . POSITION . TOP _CENTER
} ) ;
} ;
handleSubmit = ( event ) => {
event . preventDefault ( ) ;
} ;
@ -83,7 +107,7 @@ handleSubmit= (event) => {
< Row className = "cardVote d-none d-lg-flex" >
< Col xs = { this . state . colSizeCandidateXs } md = { this . state . colSizeCandidateMd } lg = { this . state . colSizeCandidateLg } > < h5 > & nbsp ; < / h 5 > < / C o l >
{ mentions . map ( ( mention , j ) => {
return ( j < this . state . nbMentions ) ? < Col xs = { this . state . colSizeMentionXs } md = { this . state . colSizeMentionMd } lg = { this . state . colSizeMentionLg } key = { j } className = "text-center" > < h6 > < small className = "nowrap "> { mention }< / s m a l l > < / h 6 > < / C o l > : n u l l
return ( j < this . state . nbMentions ) ? < Col xs = { this . state . colSizeMentionXs } md = { this . state . colSizeMentionMd } lg = { this . state . colSizeMentionLg } key = { j } className = "text-center" style = { { lineHeight : 2 } } > < small className = "nowrap bold badge " style = { { backgroundColor : mention . color , color : "#fff" } } > { mention .label }< / s m a l l > < / C o l > : n u l l
} )
}
< / R o w >
@ -92,12 +116,30 @@ handleSubmit= (event) => {
this . state . candidates . map ( ( candidate , i ) => {
return < Row key = { i } className = "cardVote" >
< Col xs = { this . state . colSizeCandidateXs } md = { this . state . colSizeCandidateMd } lg = { this . state . colSizeCandidateLg } > < h5 > { candidate . label } < /h5><hr className="d-lg-none" / > < / C o l >
< Col xs = { this . state . colSizeCandidateXs } md = { this . state . colSizeCandidateMd } lg = { this . state . colSizeCandidateLg } >
< h5 className = "m-0" > { candidate . label } < /h5><hr className="d-lg-none" / > < / C o l >
{ mentions . map ( ( mention , j ) => {
return ( j < this . state . nbMentions ) ? < Col xs = { this . state . colSizeMentionXs } md = { this . state . colSizeMentionMd } lg = { this . state . colSizeMentionLg } key = { j } className = "text-lg-center" > < input type = "radio" name = { "candidate" + i } id = { "candidateMention" + i + "-" + j } / > < label
htmlFor = { "candidateMention" + i + "-" + j } >
< small className = "nowrap d-lg-none ml-2" > { mention } < / s m a l l >
< / l a b e l > < / C o l > : n u l l
return ( j < this . state . nbMentions ) ? < Col
xs = { this . state . colSizeMentionXs } md = { this . state . colSizeMentionMd } lg = { this . state . colSizeMentionLg } key = { j }
className = "text-lg-center"
>
< label htmlFor = { "candidateMention" + i + "-" + j } className = "check"
>
< small className = "nowrap d-lg-none ml-2 bold badge"
style = {
this . state . ratedCandidates . find ( function ( ratedCandidat ) { return JSON . stringify ( ratedCandidat ) === JSON . stringify ( { id : candidate . id , value : j } ) } ) ?
{ backgroundColor : mention . color , color : "#fff" } : { backgroundColor : 'transparent' , color : "#000" }
}
> { mention . label } < / s m a l l >
< input type = "radio" name = { "candidate" + i } id = { "candidateMention" + i + "-" + j } data - index = { i } data - id = { candidate . id } value = { j } onClick = { this . handleMentionClick } defaultChecked = { this . state . ratedCandidates . find ( function ( element ) { return JSON . stringify ( element ) === JSON . stringify ( { id : candidate . id , value : j } ) } ) } / >
< span className = "checkmark" style = {
this . state . ratedCandidates . find ( function ( ratedCandidat ) { return JSON . stringify ( ratedCandidat ) === JSON . stringify ( { id : candidate . id , value : j } ) } ) ?
{ backgroundColor : mention . color , color : "#fff" } : { backgroundColor : 'transparent' , color : "#000" }
} / >
< / l a b e l > < / C o l > : n u l l
} )
}
< / R o w >
@ -106,7 +148,9 @@ handleSubmit= (event) => {
}
< Row >
< Col className = "text-center" > < Button type = "button" className = "btn btn-dark " > < FontAwesomeIcon icon = { faCheck } className = "mr-2" / > Valider < / B u t t o n > < / C o l >
< Col className = "text-center" >
{ ( this . state . ratedCandidates . length !== this . state . candidates . length ) ? < Button type = "button" onClick = { this . handleSubmitWithoutAllRate } className = "btn btn-dark " > < FontAwesomeIcon icon = { faCheck } className = "mr-2" / > Valider < /Button>:<Button type="submit" className="btn btn-success "><FontAwesomeIcon icon={faCheck} className="mr-2" / > Valider < / B u t t o n > }
< / C o l >
< / R o w >
< / f o r m >