Skip to content

T
Tia-dev
Commit 2e72d422 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'GGMAC' into 'master' 

deploy demo

See merge request !1278
parents 8c836b76 4ad98e6e
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 45 deletions
src/container/HomePage.js
View file @ 2e72d422
...@@ -46,12 +46,13 @@ class HomePage extends Component { ...@@ -46,12 +46,13 @@ class HomePage extends Component {
accessMR: false, accessMR: false,
company: [], company: [],
dataDashboardCAT: [], dataDashboardCAT: [],
loading2: false loading2: false,
loading3: false
} }
} }
componentDidMount() { componentDidMount() {
this.setState({ loading: true, loading2: true }) this.setState({ loading: true, loading2: true, loading3: true })
let userId = localStorage.getItem(Constant.USER) let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => { api.create().getDetailUser(userId).then((response) => {
if (response.data) { if (response.data) {
...@@ -137,7 +138,11 @@ class HomePage extends Component { ...@@ -137,7 +138,11 @@ class HomePage extends Component {
} }
}) })
console.log(data) console.log(data)
this.setState({ dataDashboardCAT: data, loading: false, loading2: false }) this.setState({ dataDashboardCAT: data, loading: false, loading2: false }, () => {
setTimeout(() => {
this.setState({loading3: false})
}, 1000);
})
} }
}) })
} }
...@@ -588,7 +593,7 @@ class HomePage extends Component { ...@@ -588,7 +593,7 @@ class HomePage extends Component {
let tahun = new Date().getFullYear() let tahun = new Date().getFullYear()
return ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}> <div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
{this.state.loading && loadingComponent} {(this.state.loading || this.state.loading2 || this.state.loading3) && loadingComponent}
{this.state.isApprover === true ? {this.state.isApprover === true ?
<div> <div>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
...@@ -601,7 +606,7 @@ class HomePage extends Component { ...@@ -601,7 +606,7 @@ class HomePage extends Component {
<Autocomplete <Autocomplete
{...this.state.listMonthCAT} {...this.state.listMonthCAT}
id="monthCAT" id="monthCAT"
onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true, loading3: true}, () => {
this.getDashboardCAT() this.getDashboardCAT()
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// this.getCompanySubmitted() // this.getCompanySubmitted()
...@@ -618,7 +623,7 @@ class HomePage extends Component { ...@@ -618,7 +623,7 @@ class HomePage extends Component {
<Autocomplete <Autocomplete
{...this.state.listPeriodeCAT} {...this.state.listPeriodeCAT}
id="periodeCAT" id="periodeCAT"
onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true, loading3: true }, () => {
this.getDashboardCAT() this.getDashboardCAT()
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// this.getCompanySubmitted() // this.getCompanySubmitted()
...@@ -633,48 +638,48 @@ class HomePage extends Component { ...@@ -633,48 +638,48 @@ class HomePage extends Component {
value={this.state.periodeCAT} value={this.state.periodeCAT}
/> />
</div> </div>
{this.state.dataDashboardCAT.map((items, indexs) => { {this.state.dataDashboardCAT.map((item, index) => {
return ( return (
<div> <div>
<Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{items.item_business}</Typography> <Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{item.item_business}</Typography>
<div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.9 }}> <div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.9 }}>
{items.category.map((item, index) => { {item.category.map((items, indexs) => {
return ( return (
<Link to={{ <Link to={{
pathname: `/home/cat-dashboard/`, pathname: `/home/cat-dashboard/`,
state: { state: {
userType: 'user', userType: 'user',
rawData: { month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: item.company_id } rawData: { month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: items.company_id }
} }
}}> }}>
<div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}> <div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: indexs == item.category.length - 1 ? 25 : 0, marginLeft: indexs == 0 ? 5 : 25 }}>
{/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */} {/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
<div style={{ fontSize: '17px', width: '100%', height: 25 }}> <div style={{ fontSize: '17px', width: '100%', height: 25 }}>
<Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{item.category_name}</Typography> <Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{items.category_name}</Typography>
</div> </div>
{item.total_kpi != null && {items.total_kpi != null &&
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}> <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}>
<span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span> <span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span>
{/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */} {/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
</div>} </div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: items.total_kpi == null ? 50 : 0 }}>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}> <div style={{ backgroundColor: items.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography> <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{items.performance}</Typography>
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'center' }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer <ReactSpeedometer
maxSegmentLabels={0} maxSegmentLabels={0}
segmentColors={[ segmentColors={[
item.performanceColor, items.performanceColor,
"#d8d8d8" "#d8d8d8"
]} ]}
needleColor={"#4b4b4b"} needleColor={"#4b4b4b"}
value={Number(item.current_value).toFixed(2)} value={Number(items.current_value).toFixed(2)}
valueFormat={'.2f'} valueFormat={'.2f'}
minValue={Number(item.low)} minValue={Number(items.low)}
maxValue={Number(item.high)} maxValue={Number(items.high)}
customSegmentStops={[0, Number(item.current_value), 5]} customSegmentStops={[0, Number(items.current_value), 5]}
width={200} width={200}
height={140} height={140}
ringWidth={25} ringWidth={25}
...@@ -682,13 +687,13 @@ class HomePage extends Component { ...@@ -682,13 +687,13 @@ class HomePage extends Component {
/> />
</div> </div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}> <div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
{item.is_higher == '-' ? {items.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography> <Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
</div> </div>
: :
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ? {items.is_higher == 'true' ?
<img src={Images.up} /> : <img src={Images.down} />} <img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography> <Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div> </div>
...@@ -875,7 +880,7 @@ class HomePage extends Component { ...@@ -875,7 +880,7 @@ class HomePage extends Component {
<Autocomplete <Autocomplete
{...this.state.listMonthCAT} {...this.state.listMonthCAT}
id="monthCAT" id="monthCAT"
onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true, loading3: true }, () => {
this.getDashboardCAT() this.getDashboardCAT()
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// this.getCompanySubmitted() // this.getCompanySubmitted()
...@@ -892,7 +897,7 @@ class HomePage extends Component { ...@@ -892,7 +897,7 @@ class HomePage extends Component {
<Autocomplete <Autocomplete
{...this.state.listPeriodeCAT} {...this.state.listPeriodeCAT}
id="periodeCAT" id="periodeCAT"
onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true, loading3: true }, () => {
this.getDashboardCAT() this.getDashboardCAT()
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// this.getCompanySubmitted() // this.getCompanySubmitted()
...@@ -907,62 +912,62 @@ class HomePage extends Component { ...@@ -907,62 +912,62 @@ class HomePage extends Component {
value={this.state.periodeCAT} value={this.state.periodeCAT}
/> />
</div> </div>
{this.state.dataDashboardCAT.map((items, indexs) => { {this.state.dataDashboardCAT.map((item, index) => {
return ( return (
<div> <div>
<Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{items.item_business}</Typography> <Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{item.item_business}</Typography>
<div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.9 }}> <div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.9 }}>
{items.category.map((item, index) => { {item.category.map((items, indexs) => {
return ( return (
<Link to={{ <Link to={{
pathname: `/home/cat-dashboard/`, pathname: `/home/cat-dashboard/`,
state: { state: {
userType: 'user', userType: 'user',
rawData: { month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: item.company_id } rawData: { month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: items.company_id }
} }
}}> }}>
<div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}> <div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: indexs == item.category.length - 1 ? 25 : 0, marginLeft: indexs == 0 ? 5 : 25 }}>
{/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */} {/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
<div style={{ fontSize: '17px', width: '100%', height: 25 }}> <div style={{ fontSize: '17px', width: '100%', height: 25 }}>
<Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{item.category_name}</Typography> <Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{items.category_name}</Typography>
</div> </div>
{item.total_kpi != null && {items.total_kpi != null &&
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}> <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}>
<span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span> <span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{items.total_kpi}</span>
{/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */} {/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
</div>} </div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: items.total_kpi == null ? 50 : 0 }}>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}> <div style={{ backgroundColor: items.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{item.performance}</Typography> <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{items.performance}</Typography>
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'center' }}> {!this.state.loading3 && <div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer <ReactSpeedometer
maxSegmentLabels={0} maxSegmentLabels={0}
segmentColors={[ segmentColors={[
item.performanceColor, items.performanceColor,
"#d8d8d8" "#d8d8d8"
]} ]}
needleColor={"#4b4b4b"} needleColor={"#4b4b4b"}
value={Number(item.current_value).toFixed(2)} value={Number(items.current_value).toFixed(2)}
valueFormat={'.2f'} valueFormat={'.2f'}
minValue={Number(item.low)} minValue={Number(items.low)}
maxValue={Number(item.high)} maxValue={Number(items.high)}
customSegmentStops={[0, Number(item.current_value), 5]} customSegmentStops={[0, Number(items.current_value), 5]}
width={200} width={200}
height={140} height={140}
ringWidth={25} ringWidth={25}
textColor={'#4b4b4b'} textColor={'#4b4b4b'}
/> />
</div> </div>}
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}> <div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
{item.is_higher == '-' ? {items.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography> <Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
</div> </div>
: :
<div style={{ textAlign: '-webkit-center' }}> <div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ? {items.is_higher == 'true' ?
<img src={Images.up} /> : <img src={Images.down} />} <img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography> <Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div> </div>
......
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