From 9dbdd1c1af4c79a0f9084c06605b5a21fc66c216 Mon Sep 17 00:00:00 2001 From: wahyuun Date: Tue, 27 Feb 2024 16:49:12 +0700 Subject: [PATCH] add padding in logo --- src/containers/DefaultLayout/DefaultHeader.js | 592 +++++++++--------- 1 file changed, 296 insertions(+), 296 deletions(-) diff --git a/src/containers/DefaultLayout/DefaultHeader.js b/src/containers/DefaultLayout/DefaultHeader.js index b04fb21..de15875 100644 --- a/src/containers/DefaultLayout/DefaultHeader.js +++ b/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 ( - - - Notifications - - {dataAlert.map((n, index) => { - currentLoop++; - if (currentLoop < 6) { - return ( - -

{n.keterangan ? n.keterangan : n.join.alert_keterangan ? n.join.alert_keterangan : "-"}

- - ) - } - })} - {totalAlert > 5 ? - <> - - - Lihat Selengkapnya - : null} - {totalAlert === 0 ? - Tidak ada notifikasi untuk saat ini! - : null} - - ) - } - - 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 ( -
- -
- ) - } - // logo_ospro - getHeaderMenu = () => { - const { fullname, u_group } = this.state; - if (u_group == 'kominfo') { - /*return ( - - )*/ - - - return ( -
-
Layanan Telekomunikasi
-
- ) - } - else { - return ( - - ) - } - } - - render() { - - const { children, ...attributes } = this.props; - - return ( - - - {this.getLogo()} - - - - ); - } -} - -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 ( + + + Notifications + + {dataAlert.map((n, index) => { + currentLoop++; + if (currentLoop < 6) { + return ( + +

{n.keterangan ? n.keterangan : n.join.alert_keterangan ? n.join.alert_keterangan : "-"}

+ + ) + } + })} + {totalAlert > 5 ? + <> + + + Lihat Selengkapnya + : null} + {totalAlert === 0 ? + Tidak ada notifikasi untuk saat ini! + : null} + + ) + } + + 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 ( +
+ +
+ ) + } + // logo_ospro + getHeaderMenu = () => { + const { fullname, u_group } = this.state; + if (u_group == 'kominfo') { + /*return ( + + )*/ + + + return ( +
+
Layanan Telekomunikasi
+
+ ) + } + else { + return ( + + ) + } + } + + render() { + + const { children, ...attributes } = this.props; + + return ( + + + {this.getLogo()} + + + + ); + } +} + +DefaultHeader.propTypes = propTypes; +DefaultHeader.defaultProps = defaultProps; + +export default DefaultHeader;