Skip to content

T
Tia-dev
Commit 5c7398a4 authored by fahrur huzain's avatar fahrur huzain
Browse files
Options

pop up information parameter currency

parent 27da6d73
Hide whitespace changes
Inline Side-by-side
Showing with 378 additions and 5 deletions
src/assets/Images.js
View file @ 5c7398a4
...@@ -58,6 +58,7 @@ const Images = { ...@@ -58,6 +58,7 @@ const Images = {
zip: require('./zip.png'), zip: require('./zip.png'),
warning: require('./warning.png'), warning: require('./warning.png'),
simulasiUpload: require('./upload-simulasi.png'), simulasiUpload: require('./upload-simulasi.png'),
information: require('./information.png'),
} }
export default Images export default Images
\ No newline at end of file
src/container/MasterData/Parameter/CreateParameter.js
View file @ 5c7398a4
...@@ -7,6 +7,7 @@ import { format } from 'date-fns'; ...@@ -7,6 +7,7 @@ import { format } from 'date-fns';
import * as R from 'ramda' import * as R from 'ramda'
import Images from '../../../assets/Images'; import Images from '../../../assets/Images';
import Constant from '../../../library/Constant'; import Constant from '../../../library/Constant';
import PopUpInformation from '../../../library/PopUpInformation';
export default class CreateParameter extends Component { export default class CreateParameter extends Component {
constructor(props) { constructor(props) {
...@@ -69,6 +70,7 @@ export default class CreateParameter extends Component { ...@@ -69,6 +70,7 @@ export default class CreateParameter extends Component {
minMaxRegex: "", minMaxRegex: "",
minLength: "", minLength: "",
maxLength: "", maxLength: "",
visiblePopupInformation: false,
} }
} }
...@@ -841,7 +843,7 @@ export default class CreateParameter extends Component { ...@@ -841,7 +843,7 @@ export default class CreateParameter extends Component {
obj = { regexValue: "", valueLength: "" } obj = { regexValue: "", valueLength: "" }
}else { }else {
if (this.state.getTypes.setting_group_name === "CURRENCY"){ if (this.state.getTypes.setting_group_name === "CURRENCY"){
obj = { regexValue: (/^\d+$/), valueLength: 20 } obj = { regexValue: (/\d+(\.\d+)?/), valueLength: 20 }
} else if (this.state.getTypes.setting_group_name === "REPORT_SUBMIT_PERIOD"){ } else if (this.state.getTypes.setting_group_name === "REPORT_SUBMIT_PERIOD"){
if (R.isNil(this.state.getParameter)) { if (R.isNil(this.state.getParameter)) {
obj = { regexValue: (/\b\d{4}\b/), valueLength: 4 } obj = { regexValue: (/\b\d{4}\b/), valueLength: 4 }
...@@ -969,7 +971,7 @@ export default class CreateParameter extends Component { ...@@ -969,7 +971,7 @@ export default class CreateParameter extends Component {
validasiValueData(){ validasiValueData(){
let obj = null let obj = null
if (this.props.type === "edit"){ if (this.props.type === "edit"){
obj = {value: this.state.tempData.value, minValue: this.state.tempData.min_value, maxValue: this.state.tempData.max_value, endDate: this.state.tempData.end_date, startDate: this.state.tempData.start_date} obj = {value: this.state.tempData.value.toString(), minValue: this.state.tempData.min_value, maxValue: this.state.tempData.max_value, endDate: this.state.tempData.end_date, startDate: this.state.tempData.start_date}
}else { }else {
obj = {value: this.state.value, minValue: this.state.minValue, maxValue: this.state.maxValue, endDate: this.state.endDate, startDate: this.state.startDate} obj = {value: this.state.value, minValue: this.state.minValue, maxValue: this.state.maxValue, endDate: this.state.endDate, startDate: this.state.startDate}
} }
...@@ -1165,6 +1167,18 @@ export default class CreateParameter extends Component { ...@@ -1165,6 +1167,18 @@ export default class CreateParameter extends Component {
this.props.createParameter(body) this.props.createParameter(body)
} }
openPopUp() {
if (!R.isNil(this.state.getTypes)){
if (this.state.getTypes.setting_group_name == "CURRENCY"){
if (!R.isNil(this.state.getReportName)){
this.setState({
visiblePopupInformation: true
})
}
}
}
}
render() { render() {
let { type } = this.props let { type } = this.props
return type === 'edit' ? this.renderEdit() : this.renderCreate() return type === 'edit' ? this.renderEdit() : this.renderCreate()
...@@ -1387,7 +1401,10 @@ export default class CreateParameter extends Component { ...@@ -1387,7 +1401,10 @@ export default class CreateParameter extends Component {
{...this.state.reportName} {...this.state.reportName}
debug debug
id="report" id="report"
onChange={(event, newInputValue) => this.setState({ getReportName: newInputValue }, () => this.clearMessage())} onChange={(event, newInputValue) => this.setState({ getReportName: newInputValue }, () => {
this.clearMessage()
this.openPopUp()
})}
renderInput={(params) => renderInput={(params) =>
<TextField <TextField
{...params} {...params}
...@@ -1407,7 +1424,8 @@ export default class CreateParameter extends Component { ...@@ -1407,7 +1424,8 @@ export default class CreateParameter extends Component {
{...this.state.formatCurrency} {...this.state.formatCurrency}
debug debug
id="report" id="report"
onChange={(event, newInputValue) => this.setState({ getFormatData: newInputValue }, () => this.clearMessage())} onChange={(event, newInputValue) => this.setState({ getFormatData: newInputValue }, () =>
this.clearMessage())}
renderInput={(params) => renderInput={(params) =>
<TextField <TextField
{...params} {...params}
...@@ -1646,6 +1664,12 @@ export default class CreateParameter extends Component { ...@@ -1646,6 +1664,12 @@ export default class CreateParameter extends Component {
</div> </div>
</div> </div>
</div> </div>
{this.state.visiblePopupInformation && (
<PopUpInformation
onClickClose={() => this.setState({ visiblePopupInformation: false })}
reportName={this.state.getReportName.setting_type_name}
/>
)}
</div> </div>
) )
} }
...@@ -1861,7 +1885,9 @@ export default class CreateParameter extends Component { ...@@ -1861,7 +1885,9 @@ export default class CreateParameter extends Component {
{...this.state.reportName} {...this.state.reportName}
debug debug
id="report" id="report"
onChange={(event, newInputValue) => this.setState({ getReportName: newInputValue }, () => this.clearMessage())} onChange={(event, newInputValue) => this.setState({ getReportName: newInputValue }, () => {
this.clearMessage()
this.openPopUp()})}
renderInput={(params) => renderInput={(params) =>
<TextField <TextField
{...params} {...params}
...@@ -1932,6 +1958,7 @@ export default class CreateParameter extends Component { ...@@ -1932,6 +1958,7 @@ export default class CreateParameter extends Component {
} }
error={this.state.errorMinValue} error={this.state.errorMinValue}
helperText={this.state.msgErrorMinValue} helperText={this.state.msgErrorMinValue}
> >
</TextField> </TextField>
</div> </div>
...@@ -2089,6 +2116,12 @@ export default class CreateParameter extends Component { ...@@ -2089,6 +2116,12 @@ export default class CreateParameter extends Component {
</div> </div>
</div> </div>
</div> </div>
{this.state.visiblePopupInformation && (
<PopUpInformation
onClickClose={() => this.setState({ visiblePopupInformation: false })}
reportName={this.state.getReportName.setting_type_name}
/>
)}
</div> </div>
) )
} }
......
src/library/PopUpInformation.js 0 → 100644
View file @ 5c7398a4
import React, { Component } from 'react';
import Images from '../assets/Images';
export default class PopUpInformation extends Component {
constructor(props) {
super(props)
this.state = {
notes : false,
notesMessage : ""
}
}
namaJudul(){
if (this.props.reportName == "MASTER_BUDGET"){
return "Master Budget"
} else if (this.props.reportName == "MONTHLY_REPORT"){
return "Monthly Report"
} else if (this.props.reportName == "OUTLOOK_Q1"){
return "Outlook Q1"
} else if (this.props.reportName == "OUTLOOK_Q2"){
return "Outlook Q2"
} else if (this.props.reportName == "OUTLOOK_Q3"){
return "Outlook Q3"
} else if (this.props.reportName == "OUTLOOK_PA"){
return "Outlook PA"
}
}
minValue(){
if (this.props.reportName == "MASTER_BUDGET"){
return "1 Jan 2023"
} else if (this.props.reportName == "OUTLOOK_Q1"){
return "1 Apr 2023"
} else if (this.props.reportName == "OUTLOOK_Q2"){
return "1 Jul 2023"
} else if (this.props.reportName == "OUTLOOK_Q3"){
return "1 Oct 2023"
} else if (this.props.reportName == "OUTLOOK_PA"){
return "1 Nov 2023"
}
}
maxValue(){
if (this.props.reportName == "MASTER_BUDGET"){
return "31 Dec 2023"
} else if (this.props.reportName == "OUTLOOK_Q1"){
return "30 Apr 2023"
} else if (this.props.reportName == "OUTLOOK_Q2"){
return "30 Jul 2023"
} else if (this.props.reportName == "OUTLOOK_Q3"){
return "31 Oct 2023"
} else if (this.props.reportName == "OUTLOOK_PA"){
return "30 Nov 2023"
}
}
componentDidMount(){
if (this.props.reportName == "OUTLOOK_Q1"){
this.setState({
notes: true,
notesMessage: "Q1 is until 7 Jun 2023;"
})
} else if (this.props.reportName == "OUTLOOK_Q2"){
this.setState({
notes: true,
notesMessage: "Q2 is until 30 Aug 2023;"
})
} else if (this.props.reportName == "OUTLOOK_Q3"){
this.setState({
notes: true,
notesMessage: "Q3 is until 30 Nov 2023;"
})
} else {
this.setState({
notes: false
})
}
}
reportName(){
if (this.props.reportName == "MASTER_BUDGET"){
return "master budget"
} else if (this.props.reportName == "OUTLOOK_Q1"){
return "rolling outlook"
} else if (this.props.reportName == "OUTLOOK_Q2"){
return "rolling outlook"
} else if (this.props.reportName == "OUTLOOK_Q3"){
return "rolling outlook"
} else if (this.props.reportName == "OUTLOOK_PA"){
return "outlook PA"
}
}
notesMessage (){
return this.state.notesMessage
}
render() {
if (this.props.reportName == "MONTHLY_REPORT"){
return (
<div className="test app-popup-show">
<div className="popup-content border-radius" style={{ background: '#FFF27D', borderRadius: 10, width: 600, height: 550 }}>
<div style={{ margin: 30 }}>
<div style={{ display: 'grid', justifyContent: 'center', marginTop: 20, paddingBottom: 20 }}>
<span style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
{this.namaJudul()}
</span>
</div>
<div className="border-top grid grid-2x" >
<div className="column-1" style={{ alignSelf: 'center', width: 70 }}>
<img src={Images.information}
style={{
resizeMode: 'repeat',
height: 70,
width: 70,
}}/>
</div>
<div className="column-2" style={{ display: 'grid', justifyContent: 'center', marginTop: 20, marginLeft: 20, paddingBottom: 20, width: 400 }}>
<div style={{ justifyContent: 'center', fontSize: 14, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Please enter the date in the following format: <b>'dd MMM YYYY.'</b>
</div>
<div style={{ justifyContent: 'center', fontSize: 14, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
For example, 1 Jan 2023.
</div>
<div style={{ justifyContent: 'center', fontSize: 14, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
<b>format max-min value</b> Monthly Report:
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Jan:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Jan 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 31 Jan 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Feb:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Feb 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 29 Feb 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Mar:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Mar 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 31 Mar 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Apr:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Apr 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 30 Apr 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
May:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 May 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 31 May 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Jun:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Jun 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 30 Jun 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Jul:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Jul 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 31 Jul 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Aug:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Aug 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 31 Aug 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Sep:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Sep 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 30 Sep 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Oct:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Oct 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 31 Oct 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Nov:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Nov 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 30 Nov 2023
</div>
</div>
<div className="grid grid-3x" >
<div className="column-1" style={{ justifyContent: 'center', fontSize: 14, width: 40, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Dec:
</div>
<div className="column-2" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : 1 Dec 2023
</div>
<div className="column-3" style={{ justifyContent: 'center', fontSize: 14, width: 175, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : 31 Dec 2023
</div>
</div>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', paddingRight: 20}}>
<button
type="button"
onClick={() => this.props.onClickClose()}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Ok</span>
</div>
</button>
</div>
</div>
</div>
</div>
);
}else {
return (
<div className="test app-popup-show">
<div className="popup-content border-radius" style={{ background: '#FFF27D', borderRadius: 10, width: 500, height: (this.props.reportName == "MASTER_BUDGET") || (this.props.reportName=="OUTLOOK_PA") ? 300 : 350 }}>
<div style={{ margin: 30 }}>
<div style={{ display: 'grid', justifyContent: 'center', marginTop: 20, paddingBottom: 20 }}>
<span style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
{this.namaJudul()}
</span>
</div>
<div className="border-top grid grid-2x" >
<div className="column-1" style={{ alignSelf: 'center', width: 70 }}>
<img src={Images.information}
style={{
resizeMode: 'repeat',
height: 70,
width: 70,
}}/>
</div>
<div className="column-2" style={{ display: 'grid', justifyContent: 'center', marginTop: 20, paddingBottom: 20, width: 350 }}>
<div style={{ justifyContent: 'center', fontSize: 14, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Please enter the date in the following format: <b>'dd MMM YYYY.'</b>
</div>
<div style={{ justifyContent: 'center', fontSize: 14, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
For example, 1 Jan 2023.
</div>
<div style={{ justifyContent: 'center', fontSize: 14, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
<b>format max-min value</b> <span>{this.reportName()}</span> :
</div>
<div style={{ justifyContent: 'center', fontSize: 14, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Min Value : <span>{this.minValue()}</span>
</div>
<div style={{ justifyContent: 'center', fontSize: 14, color: '#1D2995', paddingBottom: 5, fontFamily: 'Nunito Sans, sans-serif' }}>
Max Value : <span>{this.maxValue()}</span>
</div>
{this.state.notes &&
<div style={{ justifyContent: 'center', fontSize: 12, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
Note: The actual maximum value <span>{this.notesMessage()}</span>
</div>
}
{this.state.notes &&
<div style={{ justifyContent: 'center', fontSize: 12, color: '#1D2995', fontFamily: 'Nunito Sans, sans-serif' }}>
however, you can select any date within this range for the rolling outlook.
</div>
}
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', paddingRight: 20}}>
<button
type="button"
onClick={() => this.props.onClickClose()}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Ok</span>
</div>
</button>
</div>
</div>
</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