|
|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import React, { Component, Suspense } from 'react'; |
|
|
|
|
import React, { Component, Suspense, Divider } from 'react'; |
|
|
|
|
import { Redirect, Route, Switch } from 'react-router-dom'; |
|
|
|
|
import * as router from 'react-router-dom'; |
|
|
|
|
import { Container } from 'reactstrap'; |
|
|
|
|
@ -6,16 +6,16 @@ import axios from 'axios';
|
|
|
|
|
import { ALERTUSER_SEARCH, ALERT_SEARCH, MENU_SEARCH, ROLEMENU_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, MENU_MANAGEMENT, CONTROL_MONITORING_SEARCH } from '../../const/ApiConst'; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
AppAside, |
|
|
|
|
AppFooter, |
|
|
|
|
AppHeader, |
|
|
|
|
AppSidebar, |
|
|
|
|
AppSidebarFooter, |
|
|
|
|
AppSidebarForm, |
|
|
|
|
AppSidebarHeader, |
|
|
|
|
AppSidebarMinimizer, |
|
|
|
|
AppBreadcrumb2 as AppBreadcrumb, |
|
|
|
|
AppSidebarNav2 as AppSidebarNav, |
|
|
|
|
AppAside, |
|
|
|
|
AppFooter, |
|
|
|
|
AppHeader, |
|
|
|
|
AppSidebar, |
|
|
|
|
AppSidebarFooter, |
|
|
|
|
AppSidebarForm, |
|
|
|
|
AppSidebarHeader, |
|
|
|
|
AppSidebarMinimizer, |
|
|
|
|
AppBreadcrumb2 as AppBreadcrumb, |
|
|
|
|
AppSidebarNav2 as AppSidebarNav, |
|
|
|
|
} from '@coreui/react'; |
|
|
|
|
import navigation from '../../_nav'; |
|
|
|
|
import routes from '../../routes'; |
|
|
|
|
@ -27,261 +27,271 @@ const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
|
|
|
|
|
const DefaultHeader = React.lazy(() => import('./DefaultHeader')); |
|
|
|
|
let errorCount = 0; |
|
|
|
|
const config = { |
|
|
|
|
headers: |
|
|
|
|
{ |
|
|
|
|
Authorization: `Bearer ${token}`, |
|
|
|
|
"Content-type": `application/json` |
|
|
|
|
} |
|
|
|
|
headers: |
|
|
|
|
{ |
|
|
|
|
Authorization: `Bearer ${token}`, |
|
|
|
|
"Content-type": `application/json` |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
class DefaultLayout extends Component { |
|
|
|
|
|
|
|
|
|
constructor(props) { |
|
|
|
|
super(props); |
|
|
|
|
this.state = { |
|
|
|
|
role_id: localStorage.getItem('role_id'), |
|
|
|
|
token: localStorage.getItem('token'), |
|
|
|
|
menu: { items: [] }, |
|
|
|
|
routes2: routes, |
|
|
|
|
finalRoutes: [], |
|
|
|
|
breadrCrumbReady: false, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
constructor(props) { |
|
|
|
|
super(props); |
|
|
|
|
this.state = { |
|
|
|
|
role_id: localStorage.getItem('role_id'), |
|
|
|
|
token: localStorage.getItem('token'), |
|
|
|
|
menu: { items: [] }, |
|
|
|
|
routes2: routes, |
|
|
|
|
finalRoutes: [], |
|
|
|
|
breadrCrumbReady: false, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
async componentDidMount() { |
|
|
|
|
const menu = localStorage.getItem("menu_login") |
|
|
|
|
if (menu) this.setMenu(JSON.parse(menu)) |
|
|
|
|
this.getAppBreadcrumb(); |
|
|
|
|
if(!localStorage.getItem("token")){ |
|
|
|
|
this.signOut(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
async componentDidMount() { |
|
|
|
|
const menu = localStorage.getItem("menu_login") |
|
|
|
|
if (menu) this.setMenu(JSON.parse(menu)) |
|
|
|
|
this.getAppBreadcrumb(); |
|
|
|
|
if(!localStorage.getItem("token")){ |
|
|
|
|
this.signOut(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps, prevState) { |
|
|
|
|
const menu = localStorage.getItem("menu_login") |
|
|
|
|
const { pathname } = this.props.location; |
|
|
|
|
if (this.state.token !== prevState.token) { |
|
|
|
|
this.setMenu(JSON.parse(menu)) |
|
|
|
|
} |
|
|
|
|
if (this.state.role_id !== prevState.role_id) { |
|
|
|
|
this.setMenu(JSON.parse(menu)) |
|
|
|
|
} |
|
|
|
|
if (this.state.menu !== prevState.menu) { |
|
|
|
|
this.setFinalRoutes() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
componentDidUpdate(prevProps, prevState) { |
|
|
|
|
const menu = localStorage.getItem("menu_login") |
|
|
|
|
const { pathname } = this.props.location; |
|
|
|
|
if (this.state.token !== prevState.token) { |
|
|
|
|
this.setMenu(JSON.parse(menu)) |
|
|
|
|
} |
|
|
|
|
if (this.state.role_id !== prevState.role_id) { |
|
|
|
|
this.setMenu(JSON.parse(menu)) |
|
|
|
|
} |
|
|
|
|
if (this.state.menu !== prevState.menu) { |
|
|
|
|
this.setFinalRoutes() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setFinalRoutes = () => { |
|
|
|
|
const { routes2 } = this.state; |
|
|
|
|
if (routes2) { |
|
|
|
|
const newRouter2 = routes2; |
|
|
|
|
this.state.routes2.map((val, index) => { |
|
|
|
|
let indexRes = this.state.menu.items.findIndex(x => x.url === val.path); |
|
|
|
|
if (indexRes >= 0) { |
|
|
|
|
let obj = newRouter2[index] |
|
|
|
|
obj['name'] = this.state.menu.items[indexRes].name |
|
|
|
|
newRouter2[index] = obj |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.setState({ finalRoutes: newRouter2 }, () => { |
|
|
|
|
this.setState({ breadrCrumbReady: true }) |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
setFinalRoutes = () => { |
|
|
|
|
const { routes2 } = this.state; |
|
|
|
|
if (routes2) { |
|
|
|
|
const newRouter2 = routes2; |
|
|
|
|
this.state.routes2.map((val, index) => { |
|
|
|
|
let indexRes = this.state.menu.items.findIndex(x => x.url === val.path); |
|
|
|
|
if (indexRes >= 0) { |
|
|
|
|
let obj = newRouter2[index] |
|
|
|
|
obj['name'] = this.state.menu.items[indexRes].name |
|
|
|
|
newRouter2[index] = obj |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.setState({ finalRoutes: newRouter2 }, () => { |
|
|
|
|
this.setState({ breadrCrumbReady: true }) |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div> |
|
|
|
|
loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div> |
|
|
|
|
|
|
|
|
|
async signOut(e) { |
|
|
|
|
if (e) { |
|
|
|
|
e.preventDefault() |
|
|
|
|
} |
|
|
|
|
await localStorage.removeItem("role_id"); |
|
|
|
|
await window.localStorage.clear(); |
|
|
|
|
this.props.history.replace('/login') |
|
|
|
|
} |
|
|
|
|
async signOut(e) { |
|
|
|
|
if (e) { |
|
|
|
|
e.preventDefault() |
|
|
|
|
} |
|
|
|
|
await localStorage.removeItem("role_id"); |
|
|
|
|
await window.localStorage.clear(); |
|
|
|
|
this.props.history.replace('/login') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getDataMenu = async () => { |
|
|
|
|
errorCount++; |
|
|
|
|
getDataMenu = async () => { |
|
|
|
|
errorCount++; |
|
|
|
|
|
|
|
|
|
let url = MENU_MANAGEMENT(this.state.role_id) |
|
|
|
|
const result = await axios |
|
|
|
|
.get(url, config) |
|
|
|
|
.then(res => res) |
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
let url = MENU_MANAGEMENT(this.state.role_id) |
|
|
|
|
const result = await axios |
|
|
|
|
.get(url, config) |
|
|
|
|
.then(res => res) |
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (result && result.data && result.data.code == 200) { |
|
|
|
|
window.localStorage.setItem('countErr', 0); |
|
|
|
|
let resData = result.data.data |
|
|
|
|
this.setMenu(resData) |
|
|
|
|
} else { |
|
|
|
|
if (errorCount < 4) { |
|
|
|
|
this.getDataMenu(); |
|
|
|
|
} else { |
|
|
|
|
if (countErr) { |
|
|
|
|
await window.localStorage.setItem('countErr', countErr + 1); |
|
|
|
|
} else { |
|
|
|
|
await window.localStorage.setItem('countErr', 1); |
|
|
|
|
} |
|
|
|
|
if (countErr) { |
|
|
|
|
if (parseInt(countErr) > 2) { |
|
|
|
|
// this.signOut();
|
|
|
|
|
} else { |
|
|
|
|
window.location.reload(); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
window.location.reload(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (result && result.data && result.data.code == 200) { |
|
|
|
|
window.localStorage.setItem('countErr', 0); |
|
|
|
|
let resData = result.data.data |
|
|
|
|
this.setMenu(resData) |
|
|
|
|
} else { |
|
|
|
|
if (errorCount < 4) { |
|
|
|
|
this.getDataMenu(); |
|
|
|
|
} else { |
|
|
|
|
if (countErr) { |
|
|
|
|
await window.localStorage.setItem('countErr', countErr + 1); |
|
|
|
|
} else { |
|
|
|
|
await window.localStorage.setItem('countErr', 1); |
|
|
|
|
} |
|
|
|
|
if (countErr) { |
|
|
|
|
if (parseInt(countErr) > 2) { |
|
|
|
|
// this.signOut();
|
|
|
|
|
} else { |
|
|
|
|
window.location.reload(); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
window.location.reload(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
parseMenuChild = (data) => { |
|
|
|
|
const menu = data.map(res => { |
|
|
|
|
const obj = { |
|
|
|
|
name: res.name, |
|
|
|
|
url: res.url, |
|
|
|
|
icon: res.icon |
|
|
|
|
} |
|
|
|
|
if (res.children.length > 0) { |
|
|
|
|
obj.children = this.parseMenuChild(res.children) |
|
|
|
|
} else { |
|
|
|
|
delete obj.children |
|
|
|
|
} |
|
|
|
|
parseMenuChild = (data) => { |
|
|
|
|
const menu = data.map(res => { |
|
|
|
|
const obj = { |
|
|
|
|
name: res.name, |
|
|
|
|
url: res.url, |
|
|
|
|
icon: res.icon |
|
|
|
|
} |
|
|
|
|
if (res.children.length > 0) { |
|
|
|
|
obj.children = this.parseMenuChild(res.children) |
|
|
|
|
} else { |
|
|
|
|
delete obj.children |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return obj |
|
|
|
|
}) |
|
|
|
|
return obj |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
return menu |
|
|
|
|
} |
|
|
|
|
return menu |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setMenu = data => { |
|
|
|
|
const menu = data.map(res => { |
|
|
|
|
const obj = { |
|
|
|
|
name: res.name, |
|
|
|
|
url: res.url, |
|
|
|
|
icon: res.icon |
|
|
|
|
} |
|
|
|
|
if (res.children.length > 0) { |
|
|
|
|
obj.children = this.parseMenuChild(res.children) |
|
|
|
|
} else { |
|
|
|
|
delete obj.children |
|
|
|
|
} |
|
|
|
|
setMenu = data => { |
|
|
|
|
const menu = data.map(res => { |
|
|
|
|
const obj = { |
|
|
|
|
name: res.name, |
|
|
|
|
url: res.url, |
|
|
|
|
icon: res.icon |
|
|
|
|
} |
|
|
|
|
if (res.children.length > 0) { |
|
|
|
|
obj.children = this.parseMenuChild(res.children) |
|
|
|
|
} else { |
|
|
|
|
delete obj.children |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return obj |
|
|
|
|
}) |
|
|
|
|
return obj |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.setState({ menu: { items: menu } }, () => { |
|
|
|
|
}) |
|
|
|
|
this.setState({ menu: { items: menu } }, () => { |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
checkLocation = () => { |
|
|
|
|
const { pathname } = this.props.location; |
|
|
|
|
let getIndex = this.getIndexMenu(pathname); |
|
|
|
|
if (getIndex < 0) { |
|
|
|
|
this.props.history.push("/403"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
checkLocation = () => { |
|
|
|
|
const { pathname } = this.props.location; |
|
|
|
|
let getIndex = this.getIndexMenu(pathname); |
|
|
|
|
if (getIndex < 0) { |
|
|
|
|
this.props.history.push("/403"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getIndexMenu = (url) => { |
|
|
|
|
let index = this.state.menu.items.findIndex(obj => obj.url === url); |
|
|
|
|
return index |
|
|
|
|
} |
|
|
|
|
getIndexMenu = (url) => { |
|
|
|
|
let index = this.state.menu.items.findIndex(obj => obj.url === url); |
|
|
|
|
return index |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getMenu = () => { |
|
|
|
|
const { u_group } = this.state; |
|
|
|
|
if (u_group == 'kominfo') { |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return <AppSidebarNav navConfig={this.state.menu} {...this.props} router={router} /> |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
getMenu = () => { |
|
|
|
|
const { u_group } = this.state; |
|
|
|
|
if (u_group == 'kominfo') { |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return <AppSidebarNav navConfig={this.state.menu} {...this.props} router={router} /> |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getAppBreadcrumb = () => { |
|
|
|
|
const { u_group } = this.state; |
|
|
|
|
if (u_group == 'kominfo') { |
|
|
|
|
routes.map((route, idx) => { |
|
|
|
|
if (route.path == '/dashboard-kominfo') { |
|
|
|
|
return <AppBreadcrumb appRoutes={routes} router={router} className="remove-gap-bs-breadcrumb" /> |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return <AppBreadcrumb appRoutes={routes} router={router} /> |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
if (!window.location.href.includes("dashboard")){ |
|
|
|
|
return <AppBreadcrumb appRoutes={this.state.finalRoutes} router={router} /> |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
getAppBreadcrumb = () => { |
|
|
|
|
const { u_group } = this.state; |
|
|
|
|
if (u_group == 'kominfo') { |
|
|
|
|
routes.map((route, idx) => { |
|
|
|
|
if (route.path == '/dashboard-kominfo') { |
|
|
|
|
return <AppBreadcrumb appRoutes={routes} router={router} className="remove-gap-bs-breadcrumb" /> |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return <AppBreadcrumb appRoutes={routes} router={router} /> |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
if (!window.location.href.includes("dashboard")){ |
|
|
|
|
return <AppBreadcrumb appRoutes={this.state.finalRoutes} router={router} /> |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
isKominfo = () => { |
|
|
|
|
let u_group = localStorage.getItem('u_group'); |
|
|
|
|
if (u_group == 'kominfo') { |
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
isKominfo = () => { |
|
|
|
|
let u_group = localStorage.getItem('u_group'); |
|
|
|
|
if (u_group == 'kominfo') { |
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
return ( |
|
|
|
|
<div className="app"> |
|
|
|
|
<div className="app-body"> |
|
|
|
|
<AppSidebar minimized={true} fixed display="lg"> |
|
|
|
|
<AppSidebarHeader /> |
|
|
|
|
<AppSidebarForm /> |
|
|
|
|
<Suspense> |
|
|
|
|
|
|
|
|
|
{this.getMenu()} |
|
|
|
|
</Suspense> |
|
|
|
|
<AppSidebarFooter /> |
|
|
|
|
<AppSidebarMinimizer /> |
|
|
|
|
</AppSidebar> |
|
|
|
|
<main className="main"> |
|
|
|
|
{this.state.breadrCrumbReady ? this.getAppBreadcrumb() : null} |
|
|
|
|
<Container fluid> |
|
|
|
|
<Suspense fallback={this.loading()}> |
|
|
|
|
<Switch> |
|
|
|
|
{routes.map((route, idx) => { |
|
|
|
|
return route.component ? ( |
|
|
|
|
<Route |
|
|
|
|
key={idx} |
|
|
|
|
path={route.path} |
|
|
|
|
exact={route.exact} |
|
|
|
|
name={route.name} |
|
|
|
|
render={props => ( |
|
|
|
|
<route.component params={{ name: route.name }} {...props} /> |
|
|
|
|
)} /> |
|
|
|
|
) : (null); |
|
|
|
|
})} |
|
|
|
|
<Redirect from="/" to="/dashboard" /> |
|
|
|
|
</Switch> |
|
|
|
|
</Suspense> |
|
|
|
|
</Container> |
|
|
|
|
</main> |
|
|
|
|
<AppAside fixed> |
|
|
|
|
<Suspense fallback={this.loading()}> |
|
|
|
|
<DefaultAside /> |
|
|
|
|
</Suspense> |
|
|
|
|
</AppAside> |
|
|
|
|
</div> |
|
|
|
|
{!this.isKominfo ? |
|
|
|
|
( |
|
|
|
|
<AppFooter> |
|
|
|
|
<Suspense fallback={this.loading()}> |
|
|
|
|
<DefaultFooter /> |
|
|
|
|
</Suspense> |
|
|
|
|
</AppFooter> |
|
|
|
|
) : null |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
render() { |
|
|
|
|
return ( |
|
|
|
|
<div className="app"> |
|
|
|
|
<div className="app-body"> |
|
|
|
|
<AppSidebar minimized={true} fixed display="lg"> |
|
|
|
|
{/* <div class="sidebar-header"> */} |
|
|
|
|
{/* <Suspense fallback={this.loading()}> */} |
|
|
|
|
{/* <DefaultHeader history={this.props.history} onLogout={e => this.signOut(e)} /> */} |
|
|
|
|
{/* </Suspense> */} |
|
|
|
|
{/* </div> */} |
|
|
|
|
<hr/> |
|
|
|
|
<AppSidebarHeader /> |
|
|
|
|
<AppSidebarForm /> |
|
|
|
|
<Suspense> |
|
|
|
|
{this.getMenu()} |
|
|
|
|
</Suspense> |
|
|
|
|
<AppSidebarFooter /> |
|
|
|
|
<li class="nav-item"> |
|
|
|
|
<a class="nav-link" onClick={e => this.signOut(e)}> |
|
|
|
|
<i class="nav-icon fa fa-sign-out"></i> Logout |
|
|
|
|
</a> |
|
|
|
|
</li> |
|
|
|
|
<AppSidebarMinimizer /> |
|
|
|
|
</AppSidebar> |
|
|
|
|
<main className="main"> |
|
|
|
|
{this.state.breadrCrumbReady ? this.getAppBreadcrumb() : null} |
|
|
|
|
<Container fluid> |
|
|
|
|
<Suspense fallback={this.loading()}> |
|
|
|
|
<Switch> |
|
|
|
|
{routes.map((route, idx) => { |
|
|
|
|
return route.component ? ( |
|
|
|
|
<Route |
|
|
|
|
key={idx} |
|
|
|
|
path={route.path} |
|
|
|
|
exact={route.exact} |
|
|
|
|
name={route.name} |
|
|
|
|
render={props => ( |
|
|
|
|
<route.component params={{ name: route.name }} {...props} /> |
|
|
|
|
)} /> |
|
|
|
|
) : (null); |
|
|
|
|
})} |
|
|
|
|
<Redirect from="/" to="/dashboard" /> |
|
|
|
|
</Switch> |
|
|
|
|
</Suspense> |
|
|
|
|
</Container> |
|
|
|
|
</main> |
|
|
|
|
<AppAside fixed> |
|
|
|
|
<Suspense fallback={this.loading()}> |
|
|
|
|
<DefaultAside /> |
|
|
|
|
</Suspense> |
|
|
|
|
</AppAside> |
|
|
|
|
</div> |
|
|
|
|
{!this.isKominfo ? |
|
|
|
|
( |
|
|
|
|
<AppFooter> |
|
|
|
|
<Suspense fallback={this.loading()}> |
|
|
|
|
<DefaultFooter /> |
|
|
|
|
</Suspense> |
|
|
|
|
</AppFooter> |
|
|
|
|
) : null |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default DefaultLayout; |
|
|
|
|
|
Muhammad Sulaiman Yusuf
2 years ago