198 lines
12 KiB
JavaScript
198 lines
12 KiB
JavaScript
import $ from 'jquery';
|
|
import React, { Component } from 'react';
|
|
import { withRouter } from 'react-router';
|
|
import Store from '../../store';
|
|
import { HOST } from '../../config';
|
|
import { role } from '../../actions/role';
|
|
import { setbox } from '../../actions/boxai';
|
|
import { Redirect } from 'react-router-dom';
|
|
class Header extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
username : localStorage.getItem('username'),
|
|
obj_id : localStorage.getItem('obj_id'),
|
|
isLogin: Store.getState().isLogin.isLogin,
|
|
role: JSON.parse(localStorage.getItem('roles')),
|
|
access_token: Store.getState().isLogin.access_token,
|
|
full_name: ""
|
|
};
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
this.getUser()
|
|
}
|
|
|
|
getUser = () => {
|
|
fetch(`${HOST}/api/users/${this.state.obj_id}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'Authorization': Store.getState().isLogin.access_token,
|
|
},
|
|
})
|
|
.then(response => {
|
|
return response.json()
|
|
}).then(data => {
|
|
if (data.status === 10000) {
|
|
Store.dispatch(setbox(data.data.company_id));
|
|
localStorage.setItem("roles", JSON.stringify(data.data.roles));
|
|
Store.dispatch(role(data.data.roles));
|
|
|
|
this.setState({
|
|
role: data.data.roles,
|
|
full_name: data.data.full_name
|
|
})
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
});
|
|
|
|
}
|
|
|
|
onClickOpen = () => {
|
|
$('#m_aside_left').addClass('m-aside-left--on')
|
|
$('#body_form').addClass('m-aside-left--on')
|
|
$('#m_aside_left_toggle').addClass('m-aside-left-toggler--active')
|
|
$('#root').append(
|
|
$('<div/>', {
|
|
'class': 'm-aside-left-overlay',
|
|
}).on({
|
|
'click': function () {
|
|
$('#m_aside_left').removeClass('m-aside-left--on')
|
|
$('#body_form').removeClass('m-aside-left--on')
|
|
$('#m_aside_left_toggle').removeClass('m-aside-left-toggler--active')
|
|
$('.m-aside-left-overlay').remove()
|
|
}
|
|
})
|
|
)
|
|
}
|
|
componentDidUpdate(prevProps, prevState) {
|
|
|
|
}
|
|
|
|
render() {
|
|
|
|
if (this.state.isLogin === false) {
|
|
|
|
return (
|
|
<Redirect to={'/login'} />
|
|
)
|
|
}
|
|
|
|
return (
|
|
<header id="m_header" className="m-grid__item m-header" m-minimize="minimize" m-minimize-mobile="minimize" m-minimize-offset={200} m-minimize-mobile-offset={200}>
|
|
<div className="m-container m-container--fluid m-container--full-height pr-4 pl-4">
|
|
<div className="m-stack m-stack--ver m-stack--desktop m-header__wrapper">
|
|
<div className="m-stack__item m-brand m-brand--mobile">
|
|
<div className="m-stack m-stack--ver m-stack--general">
|
|
<div className="m-stack__item m-stack__item--middle m-brand__logo">
|
|
<a href="/" className="m-brand__logo-wrapper">
|
|
<img src="/img/logo.png" alt="imglogo" className="col-xl-12 pl-0" />
|
|
</a>
|
|
</div>
|
|
<div className="m-stack__item m-stack__item--middle m-brand__tools">
|
|
{/* BEGIN: Responsive Aside Left Menu Toggler */}
|
|
<a href="#/" id="m_aside_left_toggle_mobile" className="m-brand__icon m-brand__toggler m-brand__toggler--left">
|
|
<span />
|
|
</a>
|
|
{/* END */}
|
|
{/* BEGIN: Topbar Toggler */}
|
|
<a id="m_aside_header_topbar_mobile_toggle" href="#/" className="m-brand__icon">
|
|
<i className="flaticon-more" />
|
|
</a>
|
|
{/* BEGIN: Topbar Toggler */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="m-stack__item m-stack__item--middle m-stack__item--left m-header-head" id="m_header_nav">
|
|
<div className="m-stack m-stack--ver m-stack--desktop">
|
|
<div className="m-stack__item m-stack__item--middle m-stack__item--fit">
|
|
<a className="m-aside-left-toggler m-aside-left-toggler--left m_aside_left_toggler" onClick={() => this.onClickOpen()}>
|
|
<span />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="m-stack__item m-stack__item--middle m-stack__item--center" style={{ 'width': '460px' }}>
|
|
<a href="/" className="m-brand m-brand--desktop">
|
|
<img style={{paddingBottom: "7px"}} alt="" src="/img/logo.png" className="logo_img" />
|
|
<div style={{fontSize: '10px', color: 'black', paddingLeft: "10px"}}><b> by Beet Innovators</b></div>
|
|
</a>
|
|
</div>
|
|
<div className="m-stack__item m-stack__item--right">
|
|
<div id="m_header_topbar" className="m-topbar m-stack m-stack--ver m-stack--general width-100">
|
|
<div className="m-stack__item m-topbar__nav-wrapper">
|
|
|
|
<ul className="m-topbar__nav m-nav m-nav--inline width-100 ml-0">
|
|
<li className="m-nav__item m-topbar__user-profile m-topbar__user-profile--img">
|
|
<div className="m-nav__link m-dropdown__toggle">
|
|
<div className="row">
|
|
{/* <div className="m-topbar__welcome" style={{ 'lineHeight': '50px','color':'#b1b1b5' }}>Company: </div> */}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{
|
|
this.state.role?.indexOf('avatar:hidden') === -1 ? (
|
|
<li className="m-nav__item m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light icon_logout" m-dropdown-toggle="click">
|
|
<a href="#" className="m-nav__link m-dropdown__toggle">
|
|
<span className="m-topbar__userpic">
|
|
<img src="/img/photo-placeholder.png" className="m--img-rounded m--marginless m--img-centered" alt="" />
|
|
</span>
|
|
<span className="m-nav__link-icon m-topbar__usericon m--hide">
|
|
<span className="m-nav__link-icon-wrapper"><i className="flaticon-user-ok" /></span>
|
|
</span>
|
|
</a>
|
|
<div className="m-dropdown__wrapper">
|
|
<span className="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" />
|
|
<div className="m-dropdown__inner">
|
|
<div className="m-dropdown__header m--align-center">
|
|
<div className="m-card-user m-card-user--skin-light">
|
|
<div className="m-card-user__pic">
|
|
<img src="/img/photo-placeholder.png" className="m--img-rounded m--marginless" alt="" />
|
|
</div>
|
|
<div className="m-card-user__details">
|
|
<span className="font-family-text m-card-user__name m--font-weight-500">{this.state.username}</span>
|
|
<div href="#/" className="m-card-user__email m--font-weight-300 m-link"><span className='font-family-text'>{this.state.full_name}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="m-dropdown__body">
|
|
<div className="m-dropdown__content">
|
|
<ul className="m-nav m-nav--skin-light">
|
|
<li className="m-nav__separator m-nav__separator--fit">
|
|
</li>
|
|
<li className="m-nav__item">
|
|
<a className="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder"
|
|
onClick={() => {
|
|
localStorage.removeItem("access_token");
|
|
window.location.href = "/login";
|
|
}}
|
|
><span className='font-family-text'>
|
|
Đăng Xuất
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
) : null
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
export default withRouter(Header); |