import (IUser, ERole, EMainPageState, ETaskType} from
'../../../models/Common';
import {Profile} from '../Profile/Profile';
import {WorkList} from '../WorkList/WorkList';
import {UserList} from '../Statistics/UserList';
/**
* Параметры компонента.
*/
interface IProps {
onStatistics: () => void;
onUserList: () => void;
onLogout: () => void;
onRefresh: () => void;
onUsersRefresh: () => void;
tasks: any;
user: IUser;
users: IUser[];
appState: EMainPageState;
onOpenAddTaskModal: (type: ETaskType) => () =>void;
onReloadTasks: () => void;
onOpenManagerModal: () => void;
onDeleteTask: (id: string) => void;
}
export const Main: React.SFC<IProps> = (props: IProps) => {
const {onDeleteTask ,onOpenAddTaskModal, onOpenManagerModal,
onUsersRefresh, onStatistics, onUserList, onLogout, onRefresh, user, users, appState,
tasks, onReloadTasks} = props;
/**
* Получение правой части приложения.
84
85
*/
const getRightCol = () => {
if (appState === EMainPageState.STATISTICS) {
return <WorkList user={user} users={users} isStatistics tasks={tasks}
onReloadTasks={onReloadTasks} onDeleteT ask={onDeleteTask}/>;
} else if (appState === EMainPageState.USER_LIST) {
return <UserList users={users} onRefresh={onUsersRefresh}
tasks={tasks}/>;
} else {
return <Profile user={user} users={users} tasks={tasks}
onReloadTasks={onReloadTasks} onDeleteT ask={onDeleteTask}/>;
}
}
/**
* Получение элемента меню "работа".
*/
const workElement = (
<ExpandingPanel
collapsed
headerClassName="pb-0"
collapsedIconClassName="fa-question-circle-o mr-2"
expandedIconClassName="fa-question-circle-o mr-2"
panelType={EExpandingPanelType.MENU}
header="Pa6oTa"
>
{user.role === ERole.USER ? (
<React.Fragment>
<MenuLabel name="3BOHOK клиенту"
onClick={onOpenAddTaskModal(ETaskType.CALL)} iconClass="fa-handshake-o"
className="pl-0 mb-2"/>
86
<MenuLabel name=" Сделка"
onClick={onOpenAddTaskModal(ETaskType.DOC)} iconClass="fa-laptop"
className="pl-0 mb-2"/>
<MenuLabel name="Приостановить работу"
onClick={onOpenAddTaskModal(ETaskType.FREE)} iconClass="fa-pause-circle-o"
className="pl-0 mb-2"/>
</React.Fragment>
) : (
<React.Fragment>
<MenuLabel name-'Статистика" iconClass="fa-bar-chart"
className="pl-0 mb-2" onClick={onStatistics}/>
<MenuLabel name="Управление работникми" iconClass="fa-
cogs" className="pl-0 mb-2" onClick={onUserList}/>
<MenuLabel name="Добавить задачу"
onClick={onOpenManagerModal} iconClass="fa-laptop" className="pl-0 mb-2"/>
</React.Fragment>
)}
</ExpandingPanel>
)
return (
<Grid className="main">
<Row className="show-grid">
<MenuLabel name=" Профиль" iconClass="fa-user-o"
onClick={onRefresh}/>
<MenuLabel name={workElement}/>
<MenuLabel name="Почта" route="https://mail.ru" iconClass="fa-
envelope-open-o" isExtLink/>
<MenuLabel name-'Выйти" iconClass="fa-sign-out"
onClick={onLogout}/>
87
{getRightCol()}
)
}
Профиль пользователя
import * as React from 'react';
import {FormGroup} from '../../Core/FormGroup';
import {IUser, ERole, ITask, ETaskType} from '../../../models/Common';
import {WorkList} from '../WorkList/WorkList';
import {capitalize, filter} from 'lodash';
import {LayoutHeader} from '../Header/LayoutHeader';
import moment = require('moment');
/**
* Параметры компонента.
*/
interface IProps {
user: IUser;
users: IUser[];
tasks: ITask[];
onReloadTasks: () => void;
onDeleteTask: (id: string) => void;
}
interface IState {
workingTime: string;
}
export class Profile extends React.Component<IProps, IState> {
88
constructor (props: IProps) {
super(props);
this.state = {
workingTime: '0ч: 0минут'
}
this.updateTime();
setInterval(this.updateTime, 10000);
}
updateTime = () => {
const {user: {loginTime}} = this.props;
const date = new Date();
const month = date.getUTCMonth() + 1;
const getDateNumber = (num: number): string => {
let adder: string = '';
if (num < 10) {
adder = '0';
}
return (adder + num);
};
const getHours = (): string => {
let hours = date.getHours();
89
return getDateNumber(hours);
}
const getMinutes = (): string => {
let minutes = date.getMinutes();
return getDateNumber(minutes + 1);
}
const today = '${date.getUTCFullYear()}-${getDateNumber(month)}-
${getDateNumber(date.getUTCDate())}T${getHours()}:${getMinutes()}:00.000';
const datel = moment(today);
const date2 = moment(loginTime);
const diff = date1.diff(date2, ’minutes’);
const hours = Math.floor(diff/60);
const minutes = diff - hours*60;
this.setState({
workingTime: '${hours}n: ${minutes} минут'
})
}
getSailsCount = () => {
const {tasks} = this.props;
return !!tasks ? filter(tasks, (task: ITask) => task.type ===
ETaskType.DOC && task.checked).length : 0
}
getWorkTime = () => {
const {user: {workTime}} = this.props;
90
const hours = Math.floor(workTime/60);
const minutes = workTime - hours*60;
return '${hours}n: ${minutes} минут'
}
render () {
const {user, users, tasks, onReloadTasks, onDeleteTask} = this.props;
const {workingTime} = this.state;
return (
<div className="row profile">
<div className="col-xs-12">
<div className="col-xs-12 layout-panel pt-7 pb-7 mb-3">
<div className="col-xs-4">
tbn0.gstatic.com/images?q=tbn:ANd9GcQf00ByiPUMeiPAfU6BMmbutoOswG-
3LPfEYR8BqJfrQF3s5rcz"/
>
<div className="col-xs-8">
label={capitalize(user.name)}
className="text-left text-5"
classNameElement="text-right col-xs-2"
classNameLabel="col-xs-10"
>
<div className="row">
src="https://upload.wikimedia.org/wikipedia/commons/5/50/WX_circle_green.png"/>
<span className="text- 1">online
