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

add padding in logo

pull/1/head
wahyuun 10 months ago
parent
82b2703dd2
commit
9dbdd1c1af
1 changed files with 296 additions and 296 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. 592
      src/containers/DefaultLayout/DefaultHeader.js

592
src/containers/DefaultLayout/DefaultHeader.js
Unescape View File

@ -1,296 +1,296 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { Badge, Nav, NavItem } from 'reactstrap'; import { Badge, Nav, NavItem } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Menu, Dropdown } from 'antd' import { Menu, Dropdown } from 'antd'
import { ALERTUSER_SEARCH, ALERT_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, APP_MODE, BASE_SIMPRO_LUMEN_IMAGE } from '../../const/ApiConst'; import { ALERTUSER_SEARCH, ALERT_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, APP_MODE, BASE_SIMPRO_LUMEN_IMAGE } from '../../const/ApiConst';
import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react'; import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
import logo_ospro from '../../assets/img/OSPRO.png' import logo_ospro from '../../assets/img/OSPRO.png'
import axios from 'axios'; import axios from 'axios';
import './Default.css' import './Default.css'
const propTypes = { const propTypes = {
children: PropTypes.node, children: PropTypes.node,
}; };
const defaultProps = {}; const defaultProps = {};
class DefaultHeader extends Component { class DefaultHeader extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
fullname: localStorage.getItem('fullname'), fullname: localStorage.getItem('fullname'),
u_group: localStorage.getItem('u_group'), u_group: localStorage.getItem('u_group'),
dataAlert: [], dataAlert: [],
totalAlert: 0, totalAlert: 0,
listReadNotif: [] listReadNotif: []
} }
this.callAlert = ""; this.callAlert = "";
} }
componentDidMount() { componentDidMount() {
this.getHeaderMenu(); this.getHeaderMenu();
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
const role = window.localStorage.getItem('role_name'); const role = window.localStorage.getItem('role_name');
if (role !== 'Super Admin') { if (role !== 'Super Admin') {
this.setState({ this.setState({
configApp: JSON.parse(window.localStorage.getItem('configApp')), configApp: JSON.parse(window.localStorage.getItem('configApp')),
}); });
} }
this.setState({ this.setState({
config: { config: {
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
'Content-type': `application/json`, 'Content-type': `application/json`,
}, },
}, },
}); });
} }
getLogoHeaderContent = () => { getLogoHeaderContent = () => {
const { configApp } = this.state; const { configApp } = this.state;
const logoHeaderContent = configApp && configApp.logo_header ? configApp.logo_header.content : null; const logoHeaderContent = configApp && configApp.logo_header ? configApp.logo_header.content : null;
return logoHeaderContent return logoHeaderContent
? `${BASE_SIMPRO_LUMEN_IMAGE}/${logoHeaderContent}` ? `${BASE_SIMPRO_LUMEN_IMAGE}/${logoHeaderContent}`
: logo_ospro; : logo_ospro;
}; };
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (this.state.listReadNotif !== prevState.listReadNotif) { if (this.state.listReadNotif !== prevState.listReadNotif) {
if (this.state.listReadNotif.length > 0) { if (this.state.listReadNotif.length > 0) {
this.markAsRead(); this.markAsRead();
} }
} }
} }
componentWillUnmount() { componentWillUnmount() {
clearInterval(this.callAlert); clearInterval(this.callAlert);
} }
getDataAlert = async () => { getDataAlert = async () => {
let url = ''; let url = '';
let payload = ''; let payload = '';
if (parseInt(localStorage.getItem('role_id')) === 1) { if (parseInt(localStorage.getItem('role_id')) === 1) {
url = ALERT_SEARCH; url = ALERT_SEARCH;
payload = { payload = {
"paging": { "start": 0, "length": -1 }, "paging": { "start": 0, "length": -1 },
"columns": [ "columns": [
{ "name": "status_view", "logic_operator": "=", "value": "false", "operator": "AND" }, { "name": "status_view", "logic_operator": "=", "value": "false", "operator": "AND" },
], ],
"joins": [ "joins": [
{ "name": "config_alert", "column_join": "config_alert_id", "column_results": ["nama", "keterangan"] }, { "name": "config_alert", "column_join": "config_alert_id", "column_results": ["nama", "keterangan"] },
{ "name": "laporan_planning", "column_join": "laporan_planning_id", "column_results": ["deskripsi", "status", "jumlah_pekerjaan"] }, { "name": "laporan_planning", "column_join": "laporan_planning_id", "column_results": ["deskripsi", "status", "jumlah_pekerjaan"] },
{ "name": "m_satuan", "column_join": "satuan_id", "column_results": ["name", "description"] } { "name": "m_satuan", "column_join": "satuan_id", "column_results": ["name", "description"] }
], ],
"orders": { "columns": ["created_at"], "ascending": false } "orders": { "columns": ["created_at"], "ascending": false }
} }
} else { } else {
url = ALERTUSER_SEARCH; url = ALERTUSER_SEARCH;
payload = { payload = {
"paging": { "start": 0, "length": -1 }, "paging": { "start": 0, "length": -1 },
"columns": [ "columns": [
{ "name": "status_view", "logic_operator": "=", "value": "false", "operator": "AND" }, { "name": "status_view", "logic_operator": "=", "value": "false", "operator": "AND" },
{ "name": "user_id", "logic_operator": "=", "value": localStorage.getItem('user_id'), "operator": "AND" }, { "name": "user_id", "logic_operator": "=", "value": localStorage.getItem('user_id'), "operator": "AND" },
], ],
"joins": [ "joins": [
{ "name": "alert", "column_join": "alert_id", "column_results": ["nama", "keterangan"] }, { "name": "alert", "column_join": "alert_id", "column_results": ["nama", "keterangan"] },
{ "name": "config_alert", "column_join": "config_alert_id", "column_results": ["nama", "keterangan"] }, { "name": "config_alert", "column_join": "config_alert_id", "column_results": ["nama", "keterangan"] },
{ "name": "laporan_planning", "column_join": "laporan_planning_id", "column_results": ["deskripsi", "status", "jumlah_pekerjaan"] }, { "name": "laporan_planning", "column_join": "laporan_planning_id", "column_results": ["deskripsi", "status", "jumlah_pekerjaan"] },
{ "name": "m_satuan", "column_join": "satuan_id", "column_results": ["name", "description"] }, { "name": "m_satuan", "column_join": "satuan_id", "column_results": ["name", "description"] },
{ "name": "m_users", "column_join": "user_id", "column_results": ["name", "username", "email", "phone_number", "gender"] } { "name": "m_users", "column_join": "user_id", "column_results": ["name", "username", "email", "phone_number", "gender"] }
], ],
"orders": { "columns": ["created_at"], "ascending": false } "orders": { "columns": ["created_at"], "ascending": false }
} }
} }
if (localStorage.getItem('userConfigAlert')) { if (localStorage.getItem('userConfigAlert')) {
if (parseInt(localStorage.getItem('role_id')) === 1) { if (parseInt(localStorage.getItem('role_id')) === 1) {
payload['columns'].push({ "name": "config_alert_id", "logic_operator": "IN", "value": localStorage.getItem('userConfigAlert'), "operator": "AND" }) payload['columns'].push({ "name": "config_alert_id", "logic_operator": "IN", "value": localStorage.getItem('userConfigAlert'), "operator": "AND" })
} else { } else {
payload['columns'].push({ "name": "config_alert_id", "logic_operator": "IN", "value": localStorage.getItem('userConfigAlert'), "operator": "AND", "table_name": "alert" }) payload['columns'].push({ "name": "config_alert_id", "logic_operator": "IN", "value": localStorage.getItem('userConfigAlert'), "operator": "AND", "table_name": "alert" })
} }
} else { } else {
if (parseInt(localStorage.getItem('role_id')) === 1) { if (parseInt(localStorage.getItem('role_id')) === 1) {
payload['columns'].push({ "name": "config_alert_id", "logic_operator": "IN", "value": "0", "operator": "AND" }) payload['columns'].push({ "name": "config_alert_id", "logic_operator": "IN", "value": "0", "operator": "AND" })
} else { } else {
payload['columns'].push({ "name": "config_alert_id", "logic_operator": "IN", "value": "0", "operator": "AND", "table_name": "alert" }) payload['columns'].push({ "name": "config_alert_id", "logic_operator": "IN", "value": "0", "operator": "AND", "table_name": "alert" })
} }
} }
const result = await axios const result = await axios
.post(url, payload, this.state.config) .post(url, payload, this.state.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) {
this.setState({ dataAlert: result.data.data, totalAlert: result.data.totalRecord }); this.setState({ dataAlert: result.data.data, totalAlert: result.data.totalRecord });
} }
} }
dropDownMenu = () => { dropDownMenu = () => {
const { dataAlert, totalAlert } = this.state const { dataAlert, totalAlert } = this.state
let dataAlertLength = dataAlert.length let dataAlertLength = dataAlert.length
let currentLoop = 0; let currentLoop = 0;
return ( return (
<Menu style={{ width: "300px", paddingTop: 0, borderRadius: "10px" }}> <Menu style={{ width: "300px", paddingTop: 0, borderRadius: "10px" }}>
<Menu.Item key="201" style={{ backgroundColor: "lightgray", fontWeight: 'bold', borderBottom: "1px solid black", borderRadius: "10px 10px 0 0", cursor: 'default' }}> <Menu.Item key="201" style={{ backgroundColor: "lightgray", fontWeight: 'bold', borderBottom: "1px solid black", borderRadius: "10px 10px 0 0", cursor: 'default' }}>
Notifications Notifications
</Menu.Item> </Menu.Item>
{dataAlert.map((n, index) => { {dataAlert.map((n, index) => {
currentLoop++; currentLoop++;
if (currentLoop < 6) { if (currentLoop < 6) {
return ( return (
<Menu.Item onClick={this.gotoReportAlert} key={index}> <Menu.Item onClick={this.gotoReportAlert} key={index}>
<p style={{ whiteSpace: 'normal', textAlign: 'flex-start' }}>{n.keterangan ? n.keterangan : n.join.alert_keterangan ? n.join.alert_keterangan : "-"}</p> <p style={{ whiteSpace: 'normal', textAlign: 'flex-start' }}>{n.keterangan ? n.keterangan : n.join.alert_keterangan ? n.join.alert_keterangan : "-"}</p>
</Menu.Item> </Menu.Item>
) )
} }
})} })}
{totalAlert > 5 ? {totalAlert > 5 ?
<> <>
<Menu.Divider></Menu.Divider> <Menu.Divider></Menu.Divider>
<Menu.Item onClick={this.gotoReportAlert} key="202" style={{ textAlign: 'center', fontWeight: 'bold' }}> <Menu.Item onClick={this.gotoReportAlert} key="202" style={{ textAlign: 'center', fontWeight: 'bold' }}>
Lihat Selengkapnya Lihat Selengkapnya
</Menu.Item></> : null} </Menu.Item></> : null}
{totalAlert === 0 ? <Menu.Item key="202" style={{ textAlign: 'center', cursor: 'default' }}> {totalAlert === 0 ? <Menu.Item key="202" style={{ textAlign: 'center', cursor: 'default' }}>
Tidak ada notifikasi untuk saat ini! Tidak ada notifikasi untuk saat ini!
</Menu.Item> : null} </Menu.Item> : null}
</Menu> </Menu>
) )
} }
gotoReportAlert = () => { gotoReportAlert = () => {
this.props.history.replace('/laporan-alert') this.props.history.replace('/laporan-alert')
} }
onReadNotif = (visible) => { onReadNotif = (visible) => {
if (!visible) { if (!visible) {
const { dataAlert } = this.state const { dataAlert } = this.state
let currentLoop = 0; let currentLoop = 0;
let listId = [] let listId = []
dataAlert.map((val, index) => { dataAlert.map((val, index) => {
currentLoop++; currentLoop++;
if (currentLoop < 6) { if (currentLoop < 6) {
listId.push(val.id); listId.push(val.id);
} }
}); });
this.setState({ listReadNotif: listId }); this.setState({ listReadNotif: listId });
} }
} }
markAsRead = async () => { markAsRead = async () => {
let data = this.state.listReadNotif let data = this.state.listReadNotif
const payload = { const payload = {
"status_view": true "status_view": true
} }
let promises = [] let promises = []
let result = [] let result = []
if (data.length > 0) { if (data.length > 0) {
if (parseInt(localStorage.getItem('role_id')) === 1) { if (parseInt(localStorage.getItem('role_id')) === 1) {
data.map((val, index) => { data.map((val, index) => {
let url = ALERT_STATUSVIEW(val) let url = ALERT_STATUSVIEW(val)
promises.push(axios.put(url, payload, this.state.config) promises.push(axios.put(url, payload, this.state.config)
.then(res => result.push(res))); .then(res => result.push(res)));
}); });
} else { } else {
data.map((val, index) => { data.map((val, index) => {
let url = ALERTUSER_STATUSVIEW(val) let url = ALERTUSER_STATUSVIEW(val)
promises.push(axios.put(url, payload, this.state.config) promises.push(axios.put(url, payload, this.state.config)
.then(res => result.push(res))) .then(res => result.push(res)))
}); });
} }
await Promise.all(promises); await Promise.all(promises);
} }
this.setState({ listReadNotif: [] }, () => { this.setState({ listReadNotif: [] }, () => {
}); });
} }
getLogo = () => { getLogo = () => {
return ( return (
<div style={{ width: '10%', display: 'flex', justifyContent: 'center' }}> <div style={{ width: '10%', display: 'flex', justifyContent: 'center', paddingLeft:'10px' }}>
<img <img
style={{ width: '100%', height: '100%' }} style={{ width: '100%', height: '100%' }}
src={this.getLogoHeaderContent()} src={this.getLogoHeaderContent()}
/> />
</div> </div>
) )
} }
// logo_ospro // logo_ospro
getHeaderMenu = () => { getHeaderMenu = () => {
const { fullname, u_group } = this.state; const { fullname, u_group } = this.state;
if (u_group == 'kominfo') { if (u_group == 'kominfo') {
/*return ( /*return (
<Nav className="d-md-down-none" navbar> <Nav className="d-md-down-none" navbar>
<NavItem className="px-3"> <NavItem className="px-3">
<NavLink to="/dashboard-kominfo" className="nav-link" >Dashboard</NavLink> <NavLink to="/dashboard-kominfo" className="nav-link" >Dashboard</NavLink>
</NavItem> </NavItem>
<NavItem className="px-3"> <NavItem className="px-3">
<Link to="/map/view" className="nav-link">Map</Link> <Link to="/map/view" className="nav-link">Map</Link>
</NavItem> </NavItem>
</Nav> </Nav>
)*/ )*/
return ( return (
<div className="dashboard-title"> <div className="dashboard-title">
<h5>Layanan Telekomunikasi</h5> <h5>Layanan Telekomunikasi</h5>
</div> </div>
) )
} }
else { else {
return ( return (
<Nav className="d-md-down-none" navbar> <Nav className="d-md-down-none" navbar>
{/* <NavItem className="px-3"> {/* <NavItem className="px-3">
<NavLink to="/dashboard" className="nav-link" >Dashboard</NavLink> <NavLink to="/dashboard" className="nav-link" >Dashboard</NavLink>
</NavItem> */} </NavItem> */}
{/*<NavItem className="px-3"> {/*<NavItem className="px-3">
<NavLink to="/dashboardb2b" className="nav-link" >Dashboard B2B</NavLink> <NavLink to="/dashboardb2b" className="nav-link" >Dashboard B2B</NavLink>
</NavItem> </NavItem>
<NavItem className="px-3"> <NavItem className="px-3">
<NavLink to="/dashboardb2c" className="nav-link" >Dashboard B2C</NavLink> <NavLink to="/dashboardb2c" className="nav-link" >Dashboard B2C</NavLink>
</NavItem>*/} </NavItem>*/}
{/* <NavItem className="px-3"> {/* <NavItem className="px-3">
<Link to="/user" className="nav-link">Users</Link> <Link to="/user" className="nav-link">Users</Link>
</NavItem> */} </NavItem> */}
{/* <NavItem className="px-3"> {/* <NavItem className="px-3">
<Link to="/map/view" className="nav-link">Map</Link> <Link to="/map/view" className="nav-link">Map</Link>
</NavItem> */} </NavItem> */}
</Nav> </Nav>
) )
} }
} }
render() { render() {
const { children, ...attributes } = this.props; const { children, ...attributes } = this.props;
return ( return (
<React.Fragment> <React.Fragment>
<AppSidebarToggler className="d-lg-none" display="md" mobile /> <AppSidebarToggler className="d-lg-none" display="md" mobile />
{this.getLogo()} {this.getLogo()}
<AppSidebarToggler className="d-md-down-none" display="lg" /> <AppSidebarToggler className="d-md-down-none" display="lg" />
<Nav className="ml-auto" navbar> <Nav className="ml-auto" navbar>
{/* <Dropdown onVisibleChange={(visible) => this.onReadNotif(visible)} overlay={this.dropDownMenu} trigger={['click']}> {/* <Dropdown onVisibleChange={(visible) => this.onReadNotif(visible)} overlay={this.dropDownMenu} trigger={['click']}>
<NavItem className="d-md-down-none"> <NavItem className="d-md-down-none">
<NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color={this.state.totalAlert > 0 ? "danger" : "default"}>{this.state.totalAlert > 0 ? this.state.totalAlert : null}</Badge></NavLink> <NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color={this.state.totalAlert > 0 ? "danger" : "default"}>{this.state.totalAlert > 0 ? this.state.totalAlert : null}</Badge></NavLink>
</NavItem> </NavItem>
</Dropdown> */} </Dropdown> */}
</Nav> </Nav>
</React.Fragment> </React.Fragment>
); );
} }
} }
DefaultHeader.propTypes = propTypes; DefaultHeader.propTypes = propTypes;
DefaultHeader.defaultProps = defaultProps; DefaultHeader.defaultProps = defaultProps;
export default DefaultHeader; export default DefaultHeader;

Write Preview
Loading…
Cancel
Save