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
Hide 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 { createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import Images from "../../assets/Images";
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 UploadFile from "../../library/Upload";
import MuiAlert from '@material-ui/lab/Alert';
......@@ -17,6 +17,15 @@ import PopUpDelete from "../../library/PopUpDelete";
import { css } from "@emotion/core";
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");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
......@@ -150,12 +159,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{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>
</a> :
</LightTooltip> :
<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 >
);
}
......@@ -175,12 +183,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{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>
</a> :
</LightTooltip> :
<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 >
);
}
......@@ -200,12 +207,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="order">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === null ? "Empty" : val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<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 >
);
}
......@@ -225,12 +231,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{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>
</a> :
</LightTooltip> :
<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 >
);
}
......@@ -250,12 +255,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="parents">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="parents" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -275,12 +279,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="uoms">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="uoms" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -300,12 +303,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="weights">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="weights" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -325,12 +327,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{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>
</a> :
</LightTooltip> :
<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 >
);
}
......@@ -350,12 +351,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="formulas">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="formulas" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -375,12 +375,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="values">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="values" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -400,12 +399,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="conditions">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="conditions" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -425,12 +423,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="kpi_type">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="kpi_type" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -450,12 +447,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="max_ach">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="max_ach" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -475,12 +471,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[16] != null && check > -1 ?
<a data-tip={tableMeta.rowData[16][check].message} data-for="formula_ytd">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<LightTooltip title={tableMeta.rowData[16][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="formula_ytd" place="bottom" type="light" effect="solid" />
</div >
);
}
......@@ -500,12 +495,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{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>
</a> :
</LightTooltip> :
<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 >
);
}
......@@ -525,12 +519,11 @@ export default class ReportItems extends Component {
return (
<div style={{ display: 'flex' }}>
{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>
</a> :
</LightTooltip> :
<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 >
);
}
......@@ -600,7 +593,7 @@ export default class ReportItems extends Component {
}
getData() {
this.setState({loading: true})
this.setState({ loading: true })
api.create().getReportItems().then((response) => {
console.log(response)
if (response.data) {
......@@ -612,7 +605,7 @@ export default class ReportItems extends Component {
})
this.setState({ dataTable: listData, listData: response.data.data }, () => {
setTimeout(() => {
this.setState({loading: false})
this.setState({ loading: false })
}, 2000);
})
} else {
......@@ -718,6 +711,7 @@ export default class ReportItems extends Component {
createReportItems = (payload) => {
this.setState({ add: false })
api.create().createReportItems(payload).then(response => {
console.log(response);
if (response.data) {
if (response.ok) {
if (response.data.status == 'success') {
......@@ -838,7 +832,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{this.state.buttonEdit &&
{this.state.buttonEdit &&
<span>
<a data-tip={'Edit'} data-for="edit">
<button
......@@ -856,7 +850,7 @@ export default class ReportItems extends Component {
<ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
</span>
}
{this.state.buttonDelete &&
{this.state.buttonDelete &&
<span>
<a data-tip={'Delete'} data-for="delete">
<button
......@@ -1045,15 +1039,15 @@ export default class ReportItems extends Component {
["", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
]
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)'}}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
<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
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
);
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
......@@ -1156,7 +1150,7 @@ export default class ReportItems extends Component {
</div>
</div>
<div style={{ padding: 25 }}>
{this.state.loading && loadingComponent}
{this.state.loading && loadingComponent}
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
......
src/container/MasterData/formReportItems/CreateReportItems.js
View file @ 009d4e3a
......@@ -203,8 +203,8 @@ export default class CreateReportItems extends Component {
"weight": this.state.weight,
"condition_if_wrong": this.state.condition,
"condition_it_should_be": this.state.realVal,
"type_kpi": this.state.kpiTypeValue.value,
"max_ach": this.state.maxAchValue.value,
"type_kpi": this.state.kpiTypeValue ? this.state.kpiTypeValue.value : null,
"max_ach": this.state.maxAchValue ? this.state.maxAchValue.value : null,
"formula_ytd": this.state.formulaYTDValue,
"start_date": this.state.startDate,
"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