parent
1d7ea3c156
commit
40a53f7d99
8 changed files with 211 additions and 282 deletions
@ -1,123 +1,64 @@ |
||||
|
||||
.commonTable { |
||||
/* min-width: 361px; |
||||
max-width: 361px; |
||||
width: 361px; */ |
||||
width: 100%; |
||||
border-bottom: 1px solid #c8c8c8; |
||||
.thead { |
||||
display: flex; |
||||
.th { |
||||
padding: 6px; |
||||
border-top: 1px solid #c8c8c8; |
||||
border-left: 1px solid #c8c8c8; |
||||
font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; |
||||
width: 100%; |
||||
color: #767676; |
||||
font-size: 13px; |
||||
font-weight: bold; |
||||
transition: 0.5s; |
||||
|
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
background: #f4f4f4; |
||||
color: #666666; |
||||
transition: 0.5s; |
||||
} |
||||
} |
||||
.Departments { |
||||
min-width: 123px !important; |
||||
} |
||||
.Managers { |
||||
min-width: 116px !important; |
||||
} |
||||
.Members { |
||||
min-width: 116px !important; |
||||
min-width: 350px; |
||||
border-collapse:collapse; |
||||
caption-side:bottom; |
||||
table-layout: fixed; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
thead { |
||||
tr { |
||||
th{ |
||||
padding: 6px; |
||||
border: 1px solid #c8c8c8; |
||||
font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; |
||||
color: #767676; |
||||
font-size: 13px; |
||||
font-weight: bold; |
||||
transition: 0.5s; |
||||
white-space: normal; |
||||
word-break: break-all; |
||||
cursor: pointer; |
||||
&:hover { |
||||
background: #f4f4f4; |
||||
color: #666666; |
||||
transition: 0.5s; |
||||
} |
||||
} |
||||
} |
||||
.count { |
||||
min-width: 46px !important; |
||||
max-width: 46px !important; |
||||
border-right: 1px solid #c8c8c8; |
||||
} |
||||
} |
||||
.tbody { |
||||
display: flex; |
||||
|
||||
.td { |
||||
border-top: 1px solid #c8c8c8; |
||||
border-left: 1px solid #c8c8c8; |
||||
color: #767676; |
||||
background: #ffffff; |
||||
font-size: 13px; |
||||
width: 100%; |
||||
|
||||
font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; |
||||
transition: 0.5s; |
||||
cursor: pointer; |
||||
|
||||
|
||||
.cell { |
||||
padding: 3px 5px; |
||||
.commonTbody { |
||||
tr { |
||||
td { |
||||
padding: 6px; |
||||
border: 1px solid #c8c8c8; |
||||
font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; |
||||
color: #767676; |
||||
border-bottom: 1px solid #c8c8c8; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
/* max-width: 100px; */ |
||||
font-size: 13px; |
||||
transition: 0.5s; |
||||
cursor: pointer; |
||||
&:hover { |
||||
background: #f4f4f4; |
||||
color: #666666; |
||||
transition: 0.5s; |
||||
} |
||||
span { |
||||
/* white-space: nowrap; */ |
||||
div { |
||||
width: 99%; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: block; |
||||
} |
||||
} |
||||
.Departments { |
||||
width: 124px !important; |
||||
margin-left: 1px; |
||||
} |
||||
.Managers { |
||||
min-width: 106px !important; |
||||
} |
||||
.Members { |
||||
min-width: 106px !important; |
||||
|
||||
} |
||||
.isCrit { |
||||
background: #ff000042; |
||||
&:hover { |
||||
background: #ff0000ab; |
||||
color: #4b4b4b; |
||||
transition: 0.5s; |
||||
background: #ff000042; |
||||
&:hover { |
||||
background: #ff0000ab; |
||||
color: #4b4b4b; |
||||
transition: .5s; |
||||
} |
||||
} |
||||
.count { |
||||
min-width: 47px !important; |
||||
} |
||||
.cell:last-child { |
||||
border-bottom: none; |
||||
} |
||||
div { |
||||
text-align: center; |
||||
vertical-align: center; |
||||
} |
||||
.dividingLine{ |
||||
border-bottom: 1px solid #c8c8c8; |
||||
} |
||||
} |
||||
.MembersTaskCount { |
||||
width: 58px; |
||||
max-width: 58px !important; |
||||
min-width: 58px !important; |
||||
border-right: 1px solid #c8c8c8; |
||||
} |
||||
} |
||||
} |
||||
.dividingLine{ |
||||
border-bottom: 1px solid #c8c8c8; |
||||
} |
||||
|
||||
|
@ -1,203 +1,160 @@ |
||||
import * as React from 'react'; |
||||
/* import styles from '../SummaryGlobalComponent/SummaryGlobalComponent.module.scss' */ |
||||
import { DetailsList, SelectionMode, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList'; |
||||
import { DeviationTasks } from '../../interfaces/IDeviationTasks'; |
||||
import styles from '../RejectTasks/RejectTasks.module.scss' |
||||
|
||||
|
||||
export interface IComponentProps { |
||||
structureData: DeviationTasks[] |
||||
} |
||||
|
||||
|
||||
export interface IComponentState { |
||||
|
||||
} |
||||
export default class TrafficLight extends React.Component<IComponentProps, IComponentState> { |
||||
export default class DeviationTaskTable extends React.Component<IComponentProps, IComponentState> { |
||||
|
||||
private _renderHeaderCell(): JSX.Element { |
||||
|
||||
private _renderHeaderTable(): JSX.Element { |
||||
return ( |
||||
<div className={styles.thead}> |
||||
<div className={styles.th + ' ' + styles.Departments}> |
||||
Подразделение |
||||
</div> |
||||
<div className={styles.th + ' ' + styles.Managers}> |
||||
Руководитель |
||||
</div> |
||||
<div className={styles.th + ' ' + styles.Members}> |
||||
Участник |
||||
</div> |
||||
<div className={styles.count + ' ' + styles.th}> |
||||
Кол-во задач |
||||
</div> |
||||
</div> |
||||
<thead> |
||||
<tr> |
||||
<th> |
||||
Подразделение |
||||
</th> |
||||
<th> |
||||
Руководитель |
||||
</th> |
||||
<th> |
||||
Участник |
||||
</th> |
||||
<th style={{width:"50px"}}> |
||||
Кол-во задач |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
)
|
||||
} |
||||
|
||||
private _cell(value:string,length:any,className:string,crit?:boolean,): JSX.Element { |
||||
// 7 px это 1px border и padding 3px
|
||||
|
||||
var height = 'calc('+ 100/length + '% - 7px)' |
||||
var critClassName = '' |
||||
if(crit) { |
||||
critClassName = 'isCrit' |
||||
} |
||||
|
||||
return ( |
||||
<div className={styles.cell + ' ' + styles[className] + ' ' + styles[critClassName]} style={{height}}><span>{value}</span></div> |
||||
)
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
private _renderCell(structureData:any,i:number): JSX.Element { |
||||
private _renderBodyTable(structureData:any): JSX.Element { |
||||
|
||||
var Departments = [] //Подразделения
|
||||
var Managers = [] //Руководители
|
||||
var Members = [] //Участники
|
||||
var MembersTaskCount = [] //Кол-во задач
|
||||
|
||||
var structureTable = [] //В этом массив пушиться вся структура таблицы (tr td)
|
||||
|
||||
// Прохожусь по всему приходящему массиву. Через функции _cell() и _customCell пушу ячеейки в structureTable. Так же в этой фунции определяться rowSpan и сокращаеться value до ФИО
|
||||
if(structureData){ |
||||
if(structureData.Departments.length){ |
||||
|
||||
// пушу в массив Departments ячейки
|
||||
Departments.push(this._cell(structureData.Departments[i].Name,1 , 'Departments')) |
||||
if(structureData.Departments[i].Managers){ |
||||
for (let index = 0; index < structureData.Departments[i].Managers.length; index++) { |
||||
let menagers = structureData.Departments[i].Managers[index].Name |
||||
if(menagers){ |
||||
//Сокращаю Имена и Отчества Пример Масловский Артем Андреевич Масловский А.А.
|
||||
let ManagersName = structureData.Departments[i].Managers[index].Name.split(' ') |
||||
let name = ManagersName[1].split('')[0] + '.' |
||||
let surname = ManagersName[0] |
||||
|
||||
for (let i = 0; i < structureData.Departments.length; i++) { |
||||
// Формула rowSpan
|
||||
let rowSpan = 0; |
||||
|
||||
structureData.Departments[i].Managers.forEach(function(e) { |
||||
rowSpan = rowSpan + (e.Members.length+1); |
||||
}) |
||||
|
||||
// Конец формуле
|
||||
structureTable.push(this._cell(structureData.Departments[i].Name, rowSpan+1 , 'Departments',true)) |
||||
|
||||
if(structureData.Departments[i].Managers){ |
||||
for (let index = 0; index < structureData.Departments[i].Managers.length; index++) { |
||||
|
||||
if(ManagersName[2]){ |
||||
let menagers = structureData.Departments[i].Managers[index].Name; |
||||
|
||||
let patronymic = ManagersName[1].split('')[0] + '.' |
||||
|
||||
ManagersName = surname + ' ' + name + ' ' + patronymic |
||||
if(menagers){ |
||||
//Сокращаю Имена и Отчества Пример Масловский Артем Андреевич Масловский А.А.
|
||||
let ManagersName = structureData.Departments[i].Managers[index].Name.split(' '); |
||||
let name = ManagersName[1].split('')[0] + '.'; |
||||
let surname = ManagersName[0]; |
||||
|
||||
if(ManagersName[2]){ |
||||
let patronymic = ManagersName[1].split('')[0] + '.'; |
||||
ManagersName = surname + ' ' + name + ' ' + patronymic; |
||||
} else { |
||||
ManagersName = surname + ' ' + name |
||||
ManagersName = surname + ' ' + name; |
||||
} |
||||
|
||||
let maxLength = 0 |
||||
let maxLength = 0; |
||||
|
||||
structureData.Departments[i].Managers.forEach(function(e) { |
||||
maxLength = maxLength + e.Members.length |
||||
maxLength = maxLength + e.Members.length; |
||||
}) |
||||
|
||||
|
||||
//Переменная для расчета высоты ячейки менеджеров.
|
||||
let length = maxLength/structureData.Departments[i].Managers[index].Members.length |
||||
//Пушу ячейки
|
||||
Managers.push(this._cell( ManagersName ,length,'Managers')) |
||||
} else { |
||||
Managers.push(this._cell( '' ,structureData.Departments[i].Managers[index].length,'Managers')) |
||||
} |
||||
if(structureData.Departments[i].Managers[index].Members.length){ |
||||
for (let counter = 0; counter < structureData.Departments[i].Managers[index].Members.length; counter++) { |
||||
let MembersName = structureData.Departments[i].Managers[index].Members[counter].Name |
||||
if(MembersName) { |
||||
//Сокращаю Имена и Отчества Пример Масловский Артем Андреевич Масловский А.А.
|
||||
|
||||
MembersName = MembersName.split(' '); |
||||
let name = MembersName[1].split('')[0] + '.'; |
||||
let surname = MembersName[0];
|
||||
if(MembersName[2]){ |
||||
MembersName[2].split('')[0];
|
||||
|
||||
let patronymic = MembersName[2].split('')[0] + '.'; |
||||
|
||||
MembersName = surname + ' ' + name + ' ' + patronymic; |
||||
} else { |
||||
MembersName = surname + ' ' + name |
||||
} |
||||
} |
||||
//Пушу ячейки
|
||||
Members.push( |
||||
this._cell( MembersName ,structureData.Departments[i].Managers[index].length,'Members', |
||||
structureData.Departments[i].Managers[index].Members[counter].Crit) |
||||
structureTable.push( |
||||
this._cell( ManagersName ,structureData.Departments[i].Managers[index].Members.length+1,'Managers') |
||||
)
|
||||
} else {
|
||||
structureTable.push( |
||||
this._cell( ' ' ,structureData.Departments[i].Managers[index].Members.length+1,'Managers') |
||||
)
|
||||
//Пушу ячейки
|
||||
MembersTaskCount.push( |
||||
this._cell(structureData.Departments[i].Managers[index].Members[counter].TaskCount ,structureData.Departments[i].Managers[index].length,'count', |
||||
structureData.Departments[i].Managers[index].Members[counter].Crit) |
||||
) |
||||
}
|
||||
} |
||||
|
||||
if(structureData.Departments[i].Managers[index].Members.length){ |
||||
|
||||
for (let counter = 0; counter < structureData.Departments[i].Managers[index].Members.length; counter++) { |
||||
let MembersName = structureData.Departments[i].Managers[index].Members[counter].Name |
||||
if(MembersName) { |
||||
//Сокращаю Имена и Отчества Пример Масловский Артем Андреевич Масловский А.А.
|
||||
MembersName = MembersName.split(' '); |
||||
let name = MembersName[1].split('')[0] + '.'; |
||||
let surname = MembersName[0];
|
||||
|
||||
if(MembersName[2]){ |
||||
MembersName[2].split('')[0];
|
||||
let patronymic = MembersName[2].split('')[0] + '.'; |
||||
MembersName = surname + ' ' + name + ' ' + patronymic; |
||||
} else { |
||||
MembersName = surname + ' ' + name |
||||
} |
||||
}
|
||||
|
||||
let isCrit = structureData.Departments[i].Managers[index].Members[counter].Crit |
||||
|
||||
structureTable.push( |
||||
this._customCell( MembersName , structureData.Departments[i].Managers[index].Members[counter].TaskCount,isCrit) |
||||
)
|
||||
}
|
||||
}
|
||||
} |
||||
} |
||||
} |
||||
}
|
||||
}
|
||||
} |
||||
|
||||
|
||||
return ( |
||||
<div className={styles.tbody}> |
||||
<div className={styles.td}> |
||||
|
||||
{
|
||||
Departments |
||||
} |
||||
|
||||
</div> |
||||
<div className={styles.td}> |
||||
{ |
||||
Managers |
||||
} |
||||
</div> |
||||
<div className={styles.td}> |
||||
{ |
||||
Members |
||||
} |
||||
</div> |
||||
<div className={styles.MembersTaskCount + ' ' + styles.td}> |
||||
{ |
||||
MembersTaskCount |
||||
} |
||||
</div> |
||||
</div> |
||||
<tbody className={styles.commonTbody} >
|
||||
{structureTable}
|
||||
</tbody> |
||||
)
|
||||
} |
||||
private _renderBodyTable(structureData:any,): JSX.Element { |
||||
var body = [] |
||||
|
||||
for (let i = 0; i < structureData.Departments.length; i++) { |
||||
body.push(this._renderCell(structureData, i)) |
||||
} |
||||
|
||||
return ( |
||||
<div>{body}</div> |
||||
private _cell(value:string,length:any,className:string,row?:boolean,): JSX.Element { |
||||
|
||||
) |
||||
return ( |
||||
<tr><td rowSpan={length} ><div><span>{value}</span></div></td></tr> |
||||
)
|
||||
|
||||
} |
||||
componentDidMount(){ |
||||
|
||||
private _customCell(membersValue:string,countValue:string,crit?:boolean): JSX.Element { |
||||
let critClassName = ''; |
||||
|
||||
if(crit) { |
||||
critClassName = 'isCrit'; |
||||
} |
||||
|
||||
return ( |
||||
<tr style={ {height:"25px"}}>
|
||||
<td className={styles[critClassName]}><div><span>{membersValue}</span></div></td > |
||||
<td className={styles[critClassName]} style={{textAlign:"center"}}><div><span>{countValue}</span></div></td > |
||||
</tr> |
||||
)
|
||||
|
||||
} |
||||
|
||||
public onRenderFooter = () =>{ |
||||
|
||||
} |
||||
|
||||
public render(): React.ReactElement<IComponentProps> { |
||||
|
||||
return ( |
||||
<div style={{display: 'flex', justifyContent: 'center',minWidth:' 360px'}}> |
||||
<div> |
||||
|
||||
<div className={styles.commonTable}> |
||||
<div>
|
||||
{this._renderHeaderCell()} |
||||
</div> |
||||
<div>
|
||||
{
|
||||
this._renderBodyTable(this.props.structureData) |
||||
} |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<table className={styles.commonTable}> |
||||
{this._renderHeaderTable()} |
||||
{this._renderBodyTable(this.props.structureData)} |
||||
</table> |
||||
); |
||||
} |
||||
} |
||||
|
@ -0,0 +1,3 @@ |
||||
.ms-DetailsRow-cell { |
||||
white-space: pre-line; |
||||
} |
@ -1,4 +1,4 @@ |
||||
export interface DeviationTasks { |
||||
Departments: any; |
||||
} |
||||
Departments: any; |
||||
} |
||||
|
Loading…
Reference in new issue