@ -1,5 +1,5 @@
import React , { Component } from "react" ;
import { Container , Row , Col , Collapse , Card , CardHeader , CardBody } from "reactstrap" ;
import { Container , Row , Col , Collapse , Card , CardHeader , CardBody , Table } from "reactstrap" ;
//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 = [
@ -39,10 +39,10 @@ class Result extends Component {
let fetchedData = {
title : "Merci d'évaluer les candidats suivants" ,
candidates : [
{ id : 0 , label : "Mme ABCD" , mention : 2 , profil : [ 20 , 20 , 20 , 10 , 10 , 20 , 0 ] } ,
{ id : 2 , label : "M. EFGH" , mention : 3 , profil : [ 0 , 20 , 20 , 10 , 10 , 30 , 10 ] } ,
{ id : 3 , label : "M. IJKL" , mention : 4 , profil : [ 0 , 0 , 20 , 25 , 15 , 20 , 20 ] } ,
{ id : 4 , label : "M. MNOP" , mention : 4 , profil : [ 0 , 0 , 15 , 15 , 30 , 10 , 30 ] }
{ id : 0 , label : "Mme ABCD" , mention : 2 , profil e : [ 20 , 20 , 20 , 10 , 10 , 20 , 0 ] } ,
{ id : 2 , label : "M. EFGH" , mention : 3 , profil e : [ 0 , 20 , 20 , 10 , 10 , 30 , 10 ] } ,
{ id : 3 , label : "M. IJKL" , mention : 4 , profil e : [ 0 , 0 , 20 , 25 , 15 , 20 , 20 ] } ,
{ id : 4 , label : "M. MNOP" , mention : 4 , profil e : [ 0 , 0 , 15 , 15 , 30 , 10 , 30 ] }
] , //ordered by result
nbMentions : 7 ,
} ;
@ -96,7 +96,7 @@ class Result extends Component {
< h4 className = { "m-0 panel-title " + ( this . state . collapseGraphics ? "collapsed" : "" ) } > Graphiques < / h 4 >
< / C a r d H e a d e r >
< Collapse isOpen = { this . state . collapseGraphics } >
< CardBody > TODO GRAPHIQUE S < / C a r d B o d y >
< CardBody > TODO GRAPHIQUE < / C a r d B o d y >
< / C o l l a p s e >
< / C a r d >
< / C o l >
@ -108,7 +108,37 @@ class Result extends Component {
< h4 className = { "m-0 panel-title " + ( this . state . collapseProfiles ? "collapsed" : "" ) } > Profils de mérites < / h 4 >
< / C a r d H e a d e r >
< Collapse isOpen = { this . state . collapseProfiles } >
< CardBody > TODO TABLEAU < / C a r d B o d y >
< CardBody >
< div className = "table-responsive" >
< Table className = "profiles" >
< thead >
< tr >
< th > # < / t h >
{ mentions . map ( ( mention , i ) => {
return ( < th key = { i } > < span className = "badge badge-light" style = { { backgroundColor : mention . color , color : "#fff" } } > { mention . label } < / s p a n > < / t h > ) ;
} ) }
< / t r >
< / t h e a d >
< tbody >
{ this . state . candidates . map ( ( candidate , i ) => {
return ( < tr key = { i } >
< th scope = "row" style = { { whiteSpace : "nowrap" } } > { i + 1 } < /th> {/ * candidate . label * / }
{ candidate . profile . map ( ( value , i ) => {
return ( < td key = { i } > { value } % < / t d > ) ;
} ) }
< / t r > )
} ) }
< / t b o d y >
< / T a b l e >
< / d i v >
< small >
{ this . state . candidates . map ( ( candidate , i ) => {
return ( < span key = { i } > { ( i > 0 ) ? ", " : "" } < b > { i + 1 } < / b > : { c a n d i d a t e . l a b e l } < / s p a n > ) ;
} ) }
< / s m a l l >
< / C a r d B o d y >
< / C o l l a p s e >
< / C a r d >
< / C o l >