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