@ -7,7 +7,7 @@ import { DetailsList, SelectionMode, DetailsListLayoutMode } from 'office-ui-fab
export interface IComponentProps {
export interface IComponentProps {
statuses : { [ key : string ] : string ; } ;
statuses : { [ key : string ] : string ; } ;
taskStats : { [ key : string ] : number ; } ;
taskStats : { [ key : string ] : number ; } ;
dateInfo : { dateFinish : string , dateStart : string } ;
dateInfo : { dateFinish : string , dateStart : string , duration? : any , percentCompl? : any } ;
}
}
export default class TrafficLight extends React . Component < IComponentProps , {} > {
export default class TrafficLight extends React . Component < IComponentProps , {} > {
public renderItemColumn = ( item , index : number , column ) = > {
public renderItemColumn = ( item , index : number , column ) = > {
@ -25,48 +25,52 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> {
return < span > { fieldContent } < / span > ;
return < span > { fieldContent } < / span > ;
}
}
}
}
public render ( ) : React . ReactElement < IComponentProps > {
const { statuses , taskStats , dateInfo } = this . props ;
let procent = ( taskStats . compl / ( taskStats . plan + taskStats . compl + taskStats . exec ) ) * 100 ;
let startDate = moment ( dateInfo . dateStart ) . format ( "DD.MM.YYYY" ) ;
public setItems = ( statuses ) = > {
let finDate = moment ( dateInfo . dateFinish ) . format ( "DD.MM.YYYY" ) ;
let result = [ ] ;
let totalDays = new moment . duration ( ( new Date ( dateInfo . dateFinish ? dateInfo . dateFinish . split ( 'T' ) [ 0 ] : dateInfo . dateFinish ) as any ) - ( new Date ( dateInfo . dateStart ? dateInfo . dateStart . split ( 'T' ) [ 0 ] : dateInfo . dateStart ) as any ) ) . asDays ( ) ;
let index = 1 ;
if ( statuses . term !== 'none' ) {
return (
result . push (
< div className = { styles . statusesContainer } >
< DetailsList
onRenderItemColumn = { this . renderItemColumn }
items = { statuses . budget !== 'none' ? [
{
{
key : 1 ,
key : index ,
fieldName : "Статус по сроку" ,
fieldName : "Статус по сроку" ,
status : statuses.term
status : statuses.term
} ,
} ) ;
++ index ;
}
if ( statuses . budget !== 'none' ) {
result . push (
{
{
key : 2 ,
key : index ,
fieldName : "Статус по бюджету" ,
fieldName : "Статус по бюджету" ,
status : statuses.budget
status : statuses.budget
} ,
} ) ;
{
++ index ;
key : 3 ,
fieldName : "Статус по % выполнения" ,
status : statuses.percCompl
}
}
] :
if ( statuses . percCompl !== 'none' ) {
[
result . push (
{
{
key : 1 ,
key : index ,
fieldName : "Статус по сроку" ,
status : statuses.term
} ,
{
key : 2 ,
fieldName : "Статус по % выполнения" ,
fieldName : "Статус по % выполнения" ,
status : statuses.percCompl
status : statuses.percCompl
} ) ;
}
}
]
return result ;
}
}
public render ( ) : React . ReactElement < IComponentProps > {
const { statuses , taskStats , dateInfo } = this . props ;
let procent = ( taskStats . compl / ( taskStats . plan + taskStats . compl + taskStats . exec ) ) * 100 ;
let startDate = moment ( dateInfo . dateStart ) . format ( "DD.MM.YYYY" ) ;
let finDate = moment ( dateInfo . dateFinish ) . format ( "DD.MM.YYYY" ) ;
let totalDays = dateInfo . duration + 'дн.'
return (
< div className = { styles . statusesContainer } >
< DetailsList
onRenderItemColumn = { this . renderItemColumn }
items = { this . setItems ( statuses ) }
columns = { [
columns = { [
{
{
key : "column1" ,
key : "column1" ,
@ -139,7 +143,7 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> {
marginTop : 15 ,
marginTop : 15 ,
marginBottom : 15
marginBottom : 15
} }
} }
> { ` Актуальный статус выполнения ${ ! isNaN ( + procent . toFixed ( 2 ) ) ? p ro cent. toFixed ( 2 ) + '%' : ' - ' } ` } < / div >
> { ` Актуальный статус выполнения ${ dateInfo . percentCompl ? dateInfo . percentCompl . toString ( ) . match ( /\./gi ) ? dateInfo . pe rcentCompl . toFixed ( 2 ) : dateInfo . percentCompl : ' -' } ${ dateInfo . percentCompl ? '%' : '' } ` } < / div >
< / div >
< / div >
) ;
) ;
}
}