add table of merite profiles

pull/4/head
Clement G 5 years ago committed by guhur
parent 47f2905b98
commit 0456c51ee0

@ -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, profile: [20,20,20,10,10,20,0]},
{id:2, label:"M. EFGH", mention: 3, profile: [0,20,20,10,10,30,10]},
{id:3, label:"M. IJKL", mention: 4, profile: [0,0,20,25,15,20,20]},
{id:4, label:"M. MNOP", mention: 4, profile: [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</h4>
</CardHeader>
<Collapse isOpen={this.state.collapseGraphics}>
<CardBody> TODO GRAPHIQUES </CardBody>
<CardBody> TODO GRAPHIQUE </CardBody>
</Collapse>
</Card>
</Col>
@ -108,7 +108,37 @@ class Result extends Component {
<h4 className={"m-0 panel-title "+(this.state.collapseProfiles?"collapsed":"")}>Profils de mérites</h4>
</CardHeader>
<Collapse isOpen={this.state.collapseProfiles}>
<CardBody> TODO TABLEAU </CardBody>
<CardBody >
<div className="table-responsive">
<Table className="profiles">
<thead >
<tr>
<th>#</th>
{ mentions.map((mention,i) => {
return (<th key={i} ><span className="badge badge-light" style={{backgroundColor:mention.color,color:"#fff"}}>{mention.label} </span></th>);
})}
</tr>
</thead>
<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}%</td>);
})}
</tr>)
})}
</tbody>
</Table>
</div>
<small>
{ this.state.candidates.map((candidate,i) => {
return (<span key={i}>{(i>0)?", ":""}<b>{i+1}</b>: {candidate.label}</span>);
})}
</small>
</CardBody>
</Collapse>
</Card>
</Col>

@ -278,7 +278,7 @@ li.sortable{
/** collapse chevron **/
/** collapse **/
.panel-title:after {
content:'+';
float:right;
@ -287,4 +287,11 @@ li.sortable{
}
.panel-title.collapsed:after {
content:'-';
}
}
/** table profiles **/
.profiles thead,.profiles tbody,.profiles tr,.profiles th, .profiles td,.profiles thead th{
border-color:$mv-blue-color;
color:$mv-blue-color;
}

Loading…
Cancel
Save