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 = {
zip: require('./zip.png'),
warning: require('./warning.png'),
simulasiUpload: require('./upload-simulasi.png'),
information: require('./information.png'),
}
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';
import * as R from 'ramda'
import Images from '../../../assets/Images';
import Constant from '../../../library/Constant';
import PopUpInformation from '../../../library/PopUpInformation';
export default class CreateParameter extends Component {
constructor(props) {
......@@ -69,6 +70,7 @@ export default class CreateParameter extends Component {
minMaxRegex: "",
minLength: "",
maxLength: "",
visiblePopupInformation: false,
}
}
......@@ -841,7 +843,7 @@ export default class CreateParameter extends Component {
obj = { regexValue: "", valueLength: "" }
}else {
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"){
if (R.isNil(this.state.getParameter)) {
obj = { regexValue: (/\b\d{4}\b/), valueLength: 4 }
......@@ -969,7 +971,7 @@ export default class CreateParameter extends Component {
validasiValueData(){
let obj = null
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 {
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 {
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() {
let { type } = this.props
return type === 'edit' ? this.renderEdit() : this.renderCreate()
......@@ -1387,7 +1401,10 @@ export default class CreateParameter extends Component {
{...this.state.reportName}
debug
id="report"
onChange={(event, newInputValue) => this.setState({ getReportName: newInputValue }, () => this.clearMessage())}
onChange={(event, newInputValue) => this.setState({ getReportName: newInputValue }, () => {
this.clearMessage()
this.openPopUp()
})}
renderInput={(params) =>
<TextField
{...params}
......@@ -1407,7 +1424,8 @@ export default class CreateParameter extends Component {
{...this.state.formatCurrency}
debug
id="report"
onChange={(event, newInputValue) => this.setState({ getFormatData: newInputValue }, () => this.clearMessage())}
onChange={(event, newInputValue) => this.setState({ getFormatData: newInputValue }, () =>
this.clearMessage())}
renderInput={(params) =>
<TextField
{...params}
......@@ -1646,6 +1664,12 @@ export default class CreateParameter extends Component {
</div>
</div>
</div>
{this.state.visiblePopupInformation && (
<PopUpInformation
onClickClose={() => this.setState({ visiblePopupInformation: false })}
reportName={this.state.getReportName.setting_type_name}
/>
)}
</div>
)
}
......@@ -1861,7 +1885,9 @@ export default class CreateParameter extends Component {
{...this.state.reportName}
debug
id="report"
onChange={(event, newInputValue) => this.setState({ getReportName: newInputValue }, () => this.clearMessage())}
onChange={(event, newInputValue) => this.setState({ getReportName: newInputValue }, () => {
this.clearMessage()
this.openPopUp()})}
renderInput={(params) =>
<TextField
{...params}
......@@ -1932,6 +1958,7 @@ export default class CreateParameter extends Component {
}
error={this.state.errorMinValue}
helperText={this.state.msgErrorMinValue}
>
</TextField>
</div>
......@@ -2089,6 +2116,12 @@ export default class CreateParameter extends Component {
</div>
</div>
</div>
{this.state.visiblePopupInformation && (
<PopUpInformation
onClickClose={() => this.setState({ visiblePopupInformation: false })}
reportName={this.state.getReportName.setting_type_name}
/>
)}
</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