ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix endline

pull/1/head
wahyu 1 year ago
parent
ffb38c70cb
commit
025f499341
1 changed files with 327 additions and 327 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 654
      src/containers/DefaultLayout/DefaultLayout.js

654
src/containers/DefaultLayout/DefaultLayout.js
Unescape View File

@ -1,327 +1,327 @@
import React, { Component, Suspense, Divider } from 'react'; import React, { Component, Suspense, Divider } from 'react';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'; import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import * as router from 'react-router-dom'; import * as router from 'react-router-dom';
import { Button, Container, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap'; import { Button, Container, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
import axios from 'axios'; 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 { ALERTUSER_SEARCH, ALERT_SEARCH, MENU_SEARCH, ROLEMENU_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, MENU_MANAGEMENT, CONTROL_MONITORING_SEARCH } from '../../const/ApiConst';
import { handleChangeLng } from "../../utils/LangUtils"; import { handleChangeLng } from "../../utils/LangUtils";
import { import {
AppAside, AppAside,
AppFooter, AppFooter,
AppHeader, AppHeader,
AppSidebar, AppSidebar,
AppSidebarFooter, AppSidebarFooter,
AppSidebarForm, AppSidebarForm,
AppSidebarHeader, AppSidebarHeader,
AppSidebarMinimizer, AppSidebarMinimizer,
AppBreadcrumb2 as AppBreadcrumb, AppBreadcrumb2 as AppBreadcrumb,
AppSidebarNav2 as AppSidebarNav, AppSidebarNav2 as AppSidebarNav,
} from '@coreui/react'; } from '@coreui/react';
import LayoutHelper from '../../../node_modules/@coreui/react/lib/Shared/layout/layout'; import LayoutHelper from '../../../node_modules/@coreui/react/lib/Shared/layout/layout';
import navigation from '../../_nav'; import navigation from '../../_nav';
import routes from '../../routes'; import routes from '../../routes';
import { emptyConstants } from '../../const/MapConst.js'; import { emptyConstants } from '../../const/MapConst.js';
const countErr = localStorage.getItem('countErr'); const countErr = localStorage.getItem('countErr');
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
const DefaultAside = React.lazy(() => import('./DefaultAside')); const DefaultAside = React.lazy(() => import('./DefaultAside'));
const DefaultFooter = React.lazy(() => import('./DefaultFooter')); const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
const DefaultHeader = React.lazy(() => import('./DefaultHeader')); const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
let errorCount = 0; let errorCount = 0;
const config = { const config = {
headers: headers:
{ {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
"Content-type": `application/json` "Content-type": `application/json`
} }
}; };
class DefaultLayout extends Component { class DefaultLayout extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
role_id: localStorage.getItem('role_id'), role_id: localStorage.getItem('role_id'),
token: localStorage.getItem('token'), token: localStorage.getItem('token'),
menu: { items: [] }, menu: { items: [] },
routes2: routes, routes2: routes,
finalRoutes: [], finalRoutes: [],
breadrCrumbReady: false, breadrCrumbReady: false,
minimized: true minimized: true
} }
} }
async componentDidMount() { async componentDidMount() {
const menu = localStorage.getItem("menu_login") const menu = localStorage.getItem("menu_login")
if (menu) this.setMenu(JSON.parse(menu)) if (menu) this.setMenu(JSON.parse(menu))
this.getAppBreadcrumb(); this.getAppBreadcrumb();
if (!localStorage.getItem("token")) { if (!localStorage.getItem("token")) {
this.signOut(); this.signOut();
} }
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
const menu = localStorage.getItem("menu_login") const menu = localStorage.getItem("menu_login")
const { pathname } = this.props.location; const { pathname } = this.props.location;
if (this.state.token !== prevState.token) { if (this.state.token !== prevState.token) {
this.setMenu(JSON.parse(menu)) this.setMenu(JSON.parse(menu))
} }
if (this.state.role_id !== prevState.role_id) { if (this.state.role_id !== prevState.role_id) {
this.setMenu(JSON.parse(menu)) this.setMenu(JSON.parse(menu))
} }
if (this.state.menu !== prevState.menu) { if (this.state.menu !== prevState.menu) {
this.setFinalRoutes() this.setFinalRoutes()
} }
} }
toggleMinimized = () => { toggleMinimized = () => {
this.setState((prevState) => ({ minimized: !prevState.minimized })); this.setState((prevState) => ({ minimized: !prevState.minimized }));
LayoutHelper.sidebarToggle(!this.state.minimized); LayoutHelper.sidebarToggle(!this.state.minimized);
}; };
setFinalRoutes = () => { setFinalRoutes = () => {
const { routes2 } = this.state; const { routes2 } = this.state;
if (routes2) { if (routes2) {
const newRouter2 = routes2; const newRouter2 = routes2;
this.state.routes2.map((val, index) => { this.state.routes2.map((val, index) => {
let indexRes = this.state.menu.items.findIndex(x => x.url === val.path); let indexRes = this.state.menu.items.findIndex(x => x.url === val.path);
if (indexRes >= 0) { if (indexRes >= 0) {
let obj = newRouter2[index] let obj = newRouter2[index]
obj['name'] = this.state.menu.items[indexRes].name obj['name'] = this.state.menu.items[indexRes].name
newRouter2[index] = obj newRouter2[index] = obj
} }
}) })
this.setState({ finalRoutes: newRouter2 }, () => { this.setState({ finalRoutes: newRouter2 }, () => {
this.setState({ breadrCrumbReady: true }) 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) { async signOut(e) {
if (e) { if (e) {
e.preventDefault() e.preventDefault()
} }
await localStorage.removeItem("role_id"); await localStorage.removeItem("role_id");
await window.localStorage.clear(); await window.localStorage.clear();
this.props.history.replace('/login') this.props.history.replace('/login')
} }
getDataMenu = async () => { getDataMenu = async () => {
errorCount++; errorCount++;
let url = MENU_MANAGEMENT(this.state.role_id) let url = MENU_MANAGEMENT(this.state.role_id)
const result = await axios const result = await axios
.get(url, config) .get(url, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code == 200) { if (result && result.data && result.data.code == 200) {
window.localStorage.setItem('countErr', 0); window.localStorage.setItem('countErr', 0);
let resData = result.data.data let resData = result.data.data
this.setMenu(resData) this.setMenu(resData)
} else { } else {
if (errorCount < 4) { if (errorCount < 4) {
this.getDataMenu(); this.getDataMenu();
} else { } else {
if (countErr) { if (countErr) {
await window.localStorage.setItem('countErr', countErr + 1); await window.localStorage.setItem('countErr', countErr + 1);
} else { } else {
await window.localStorage.setItem('countErr', 1); await window.localStorage.setItem('countErr', 1);
} }
if (countErr) { if (countErr) {
if (parseInt(countErr) > 2) { if (parseInt(countErr) > 2) {
// this.signOut(); // this.signOut();
} else { } else {
window.location.reload(); window.location.reload();
} }
} else { } else {
window.location.reload(); window.location.reload();
} }
} }
} }
} }
parseMenuChild = (data) => { parseMenuChild = (data) => {
const menu = data.map(res => { const menu = data.map(res => {
const obj = { const obj = {
name: res.name, name: res.name,
url: res.url, url: res.url,
icon: res.icon icon: res.icon
} }
if (res.children.length > 0) { if (res.children.length > 0) {
obj.children = this.parseMenuChild(res.children) obj.children = this.parseMenuChild(res.children)
} else { } else {
delete obj.children delete obj.children
} }
return obj return obj
}) })
return menu return menu
} }
setMenu = data => { setMenu = data => {
const menu = data.map(res => { const menu = data.map(res => {
const obj = { const obj = {
name: res.name, name: res.name,
url: res.url, url: res.url,
icon: res.icon icon: res.icon
} }
if (res.children.length > 0) { if (res.children.length > 0) {
obj.children = this.parseMenuChild(res.children) obj.children = this.parseMenuChild(res.children)
} else { } else {
delete obj.children delete obj.children
} }
return obj return obj
}) })
this.setState({ menu: { items: menu } }, () => { this.setState({ menu: { items: menu } }, () => {
}) })
} }
checkLocation = () => { checkLocation = () => {
const { pathname } = this.props.location; const { pathname } = this.props.location;
let getIndex = this.getIndexMenu(pathname); let getIndex = this.getIndexMenu(pathname);
if (getIndex < 0) { if (getIndex < 0) {
this.props.history.push("/403"); this.props.history.push("/403");
} }
} }
getIndexMenu = (url) => { getIndexMenu = (url) => {
let index = this.state.menu.items.findIndex(obj => obj.url === url); let index = this.state.menu.items.findIndex(obj => obj.url === url);
return index return index
} }
getMenu = () => { getMenu = () => {
const { u_group } = this.state; const { u_group } = this.state;
if (u_group == 'kominfo') { if (u_group == 'kominfo') {
} }
else { else {
return <AppSidebarNav navConfig={this.state.menu} {...this.props} router={router} /> return <AppSidebarNav navConfig={this.state.menu} {...this.props} router={router} />
} }
} }
getAppBreadcrumb = () => { getAppBreadcrumb = () => {
const { u_group } = this.state; const { u_group } = this.state;
if (u_group == 'kominfo') { if (u_group == 'kominfo') {
routes.map((route, idx) => { routes.map((route, idx) => {
if (route.path == '/dashboard-kominfo') { if (route.path == '/dashboard-kominfo') {
return <AppBreadcrumb appRoutes={routes} router={router} className="remove-gap-bs-breadcrumb" /> return <AppBreadcrumb appRoutes={routes} router={router} className="remove-gap-bs-breadcrumb" />
} }
else { else {
return <AppBreadcrumb appRoutes={routes} router={router} /> return <AppBreadcrumb appRoutes={routes} router={router} />
} }
}); });
} }
else { else {
if (!window.location.href.includes("dashboard")) { if (!window.location.href.includes("dashboard")) {
return <AppBreadcrumb appRoutes={this.state.finalRoutes} router={router} /> return <AppBreadcrumb appRoutes={this.state.finalRoutes} router={router} />
} }
} }
} }
isKominfo = () => { isKominfo = () => {
let u_group = localStorage.getItem('u_group'); let u_group = localStorage.getItem('u_group');
if (u_group == 'kominfo') { if (u_group == 'kominfo') {
return true; return true;
} }
else { else {
return false; return false;
} }
} }
render() { render() {
const { location } = this.props; const { location } = this.props;
const { pathname } = location; const { pathname } = location;
let renderSidebar = false let renderSidebar = false
if (pathname.includes("/dashboard-project")) { if (pathname.includes("/dashboard-project")) {
// Remove the base URL and hash // Remove the base URL and hash
const path = pathname.replace("/dashboard-project/", ""); const path = pathname.replace("/dashboard-project/", "");
// Split the remaining path by "/" // Split the remaining path by "/"
const parts = path.split("/"); const parts = path.split("/");
if (parts[2] == "1") { if (parts[2] == "1") {
renderSidebar = true renderSidebar = true
} }
} }
return ( return (
<div className="app"> <div className="app">
<div className="app-body"> <div className="app-body">
{!window.location.href.includes("dashboard-project") || renderSidebar ? ( {!window.location.href.includes("dashboard-project") || renderSidebar ? (
<AppSidebar minimized={this.state.minimized} fixed display="lg"> <AppSidebar minimized={this.state.minimized} fixed display="lg">
{/* <div class="sidebar-header"> {/* <div class="sidebar-header">
<Suspense fallback={this.loading()}> <Suspense fallback={this.loading()}>
<DefaultHeader history={this.props.history} onLogout={e => this.signOut(e)} /> <DefaultHeader history={this.props.history} onLogout={e => this.signOut(e)} />
</Suspense> </Suspense>
</div> */} </div> */}
<hr /> <hr />
<AppSidebarHeader /> <AppSidebarHeader />
<AppSidebarForm /> <AppSidebarForm />
<Suspense> <Suspense>
{this.getMenu()} {this.getMenu()}
</Suspense> </Suspense>
<AppSidebarFooter /> <AppSidebarFooter />
{this.state.minimized ? null : {this.state.minimized ? null :
<UncontrolledDropdown direction="down"> <UncontrolledDropdown direction="down">
<DropdownToggle nav> <DropdownToggle nav>
<i className="nav-icon fa fa-user-circle"></i> {localStorage.getItem('user_name')} <i className="nav-icon fa fa-user-circle"></i> {localStorage.getItem('user_name')}
</DropdownToggle> </DropdownToggle>
<DropdownMenu right> <DropdownMenu right>
<DropdownItem color="primary" size="sm" onClick={() => handleChangeLng("id")}>ID</DropdownItem> <DropdownItem color="primary" size="sm" onClick={() => handleChangeLng("id")}>ID</DropdownItem>
<DropdownItem color="success" size="sm" onClick={() => handleChangeLng("en")}>EN</DropdownItem> <DropdownItem color="success" size="sm" onClick={() => handleChangeLng("en")}>EN</DropdownItem>
<DropdownItem href="#/settings"><i className="fa fa-user"></i>Profile</DropdownItem> <DropdownItem href="#/settings"><i className="fa fa-user"></i>Profile</DropdownItem>
<DropdownItem onClick={e => this.signOut(e)}><i className="fa fa-sign-out"></i> Logout</DropdownItem> <DropdownItem onClick={e => this.signOut(e)}><i className="fa fa-sign-out"></i> Logout</DropdownItem>
</DropdownMenu> </DropdownMenu>
</UncontrolledDropdown>} </UncontrolledDropdown>}
<button className='sidebar-minimizer mt-auto' type='button' onClick={this.toggleMinimized}> <button className='sidebar-minimizer mt-auto' type='button' onClick={this.toggleMinimized}>
</button> </button>
</AppSidebar> </AppSidebar>
) : null} ) : null}
<main className="main"> <main className="main">
{this.state.breadrCrumbReady ? this.getAppBreadcrumb() : null} {this.state.breadrCrumbReady ? this.getAppBreadcrumb() : null}
<Container fluid> <Container fluid>
<Suspense fallback={this.loading()}> <Suspense fallback={this.loading()}>
<Switch> <Switch>
{routes.map((route, idx) => { {routes.map((route, idx) => {
return route.component ? ( return route.component ? (
<Route <Route
key={idx} key={idx}
path={route.path} path={route.path}
exact={route.exact} exact={route.exact}
name={route.name} name={route.name}
render={props => ( render={props => (
<route.component params={{ name: route.name }} {...props} /> <route.component params={{ name: route.name }} {...props} />
)} /> )} />
) : (null); ) : (null);
})} })}
<Redirect from="/" to="/dashboard" /> <Redirect from="/" to="/dashboard" />
</Switch> </Switch>
</Suspense> </Suspense>
</Container> </Container>
</main> </main>
<AppAside fixed> <AppAside fixed>
<Suspense fallback={this.loading()}> <Suspense fallback={this.loading()}>
<DefaultAside /> <DefaultAside />
</Suspense> </Suspense>
</AppAside> </AppAside>
</div> </div>
{!this.isKominfo ? {!this.isKominfo ?
( (
<AppFooter> <AppFooter>
<Suspense fallback={this.loading()}> <Suspense fallback={this.loading()}>
<DefaultFooter /> <DefaultFooter />
</Suspense> </Suspense>
</AppFooter> </AppFooter>
) : null ) : null
} }
</div> </div>
); );
} }
} }
export default withRouter(DefaultLayout); export default withRouter(DefaultLayout);

Write Preview
Loading…
Cancel
Save