Skip to content

T
Tia-dev
Commit 009d4e3a authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

minor gabisa create report item + benerin tooltip

parent 90c3e505
Show whitespace changes
Inline Side-by-side
Showing with 69 additions and 75 deletions
src/container/MasterData/ReportItems.js
View file @ 009d4e3a
import React, { Component } from "react"; import React, { Component } from "react";
import { createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles'; import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import Images from "../../assets/Images"; import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import { InputBase, Snackbar, withStyles } from "@material-ui/core"; import { InputBase, Snackbar, Tooltip, withStyles } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer'; import { ExcelRenderer } from 'react-excel-renderer';
import UploadFile from "../../library/Upload"; import UploadFile from "../../library/Upload";
import MuiAlert from '@material-ui/lab/Alert'; import MuiAlert from '@material-ui/lab/Alert';
...@@ -17,6 +17,15 @@ import PopUpDelete from "../../library/PopUpDelete"; ...@@ -17,6 +17,15 @@ import PopUpDelete from "../../library/PopUpDelete";
import { css } from "@emotion/core"; import { css } from "@emotion/core";
import PropagateLoader from "react-spinners/PropagateLoader" import PropagateLoader from "react-spinners/PropagateLoader"
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
...@@ -150,12 +159,11 @@ export default class ReportItems extends Component { ...@@ -150,12 +159,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="reportname"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="reportname" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -175,12 +183,11 @@ export default class ReportItems extends Component { ...@@ -175,12 +183,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="companyname"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="companyname" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -200,12 +207,11 @@ export default class ReportItems extends Component { ...@@ -200,12 +207,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="order"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === null ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === null ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === null ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="order" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -225,12 +231,11 @@ export default class ReportItems extends Component { ...@@ -225,12 +231,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="desc"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="desc" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -250,12 +255,11 @@ export default class ReportItems extends Component { ...@@ -250,12 +255,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="parents"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="parents" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -275,12 +279,11 @@ export default class ReportItems extends Component { ...@@ -275,12 +279,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="uoms"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="uoms" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -300,12 +303,11 @@ export default class ReportItems extends Component { ...@@ -300,12 +303,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="weights"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="weights" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -325,12 +327,11 @@ export default class ReportItems extends Component { ...@@ -325,12 +327,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="datatype"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="datatype" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -350,12 +351,11 @@ export default class ReportItems extends Component { ...@@ -350,12 +351,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="formulas"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="formulas" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -375,12 +375,11 @@ export default class ReportItems extends Component { ...@@ -375,12 +375,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="values"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="values" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -400,12 +399,11 @@ export default class ReportItems extends Component { ...@@ -400,12 +399,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="conditions"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="conditions" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -425,12 +423,11 @@ export default class ReportItems extends Component { ...@@ -425,12 +423,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="kpi_type"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="kpi_type" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -450,12 +447,11 @@ export default class ReportItems extends Component { ...@@ -450,12 +447,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="max_ach"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="max_ach" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -475,12 +471,11 @@ export default class ReportItems extends Component { ...@@ -475,12 +471,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="formula_ytd"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="formula_ytd" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -500,12 +495,11 @@ export default class ReportItems extends Component { ...@@ -500,12 +495,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="startdate"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -525,12 +519,11 @@ export default class ReportItems extends Component { ...@@ -525,12 +519,11 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ? {tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="enddate"> <LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -600,7 +593,7 @@ export default class ReportItems extends Component { ...@@ -600,7 +593,7 @@ export default class ReportItems extends Component {
} }
getData() { getData() {
this.setState({loading: true}) this.setState({ loading: true })
api.create().getReportItems().then((response) => { api.create().getReportItems().then((response) => {
console.log(response) console.log(response)
if (response.data) { if (response.data) {
...@@ -612,7 +605,7 @@ export default class ReportItems extends Component { ...@@ -612,7 +605,7 @@ export default class ReportItems extends Component {
}) })
this.setState({ dataTable: listData, listData: response.data.data }, () => { this.setState({ dataTable: listData, listData: response.data.data }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({loading: false}) this.setState({ loading: false })
}, 2000); }, 2000);
}) })
} else { } else {
...@@ -718,6 +711,7 @@ export default class ReportItems extends Component { ...@@ -718,6 +711,7 @@ export default class ReportItems extends Component {
createReportItems = (payload) => { createReportItems = (payload) => {
this.setState({ add: false }) this.setState({ add: false })
api.create().createReportItems(payload).then(response => { api.create().createReportItems(payload).then(response => {
console.log(response);
if (response.data) { if (response.data) {
if (response.ok) { if (response.ok) {
if (response.data.status == 'success') { if (response.data.status == 'success') {
...@@ -1045,7 +1039,7 @@ export default class ReportItems extends Component { ...@@ -1045,7 +1039,7 @@ export default class ReportItems extends Component {
["", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"], ["", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
] ]
const loadingComponent = ( const loadingComponent = (
<div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}> <div style={{ position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader <PropagateLoader
// css={override} // css={override}
size={20} size={20}
......
src/container/MasterData/formReportItems/CreateReportItems.js
View file @ 009d4e3a
...@@ -203,8 +203,8 @@ export default class CreateReportItems extends Component { ...@@ -203,8 +203,8 @@ export default class CreateReportItems extends Component {
"weight": this.state.weight, "weight": this.state.weight,
"condition_if_wrong": this.state.condition, "condition_if_wrong": this.state.condition,
"condition_it_should_be": this.state.realVal, "condition_it_should_be": this.state.realVal,
"type_kpi": this.state.kpiTypeValue.value, "type_kpi": this.state.kpiTypeValue ? this.state.kpiTypeValue.value : null,
"max_ach": this.state.maxAchValue.value, "max_ach": this.state.maxAchValue ? this.state.maxAchValue.value : null,
"formula_ytd": this.state.formulaYTDValue, "formula_ytd": this.state.formulaYTDValue,
"start_date": this.state.startDate, "start_date": this.state.startDate,
"end_date": this.state.endDate "end_date": this.state.endDate
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment