Browse Source

add padding in logo

pull/1/head
wahyuun 7 months ago
parent
commit
9dbdd1c1af
  1. 592
      src/containers/DefaultLayout/DefaultHeader.js

592
src/containers/DefaultLayout/DefaultHeader.js

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

Loading…
Cancel
Save