evo/evoleasing-account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hotfix for forms submission by enter key on calculations form, possible fix for double calculation call

Browse Source
This commit is contained in:
merelendor 2022-09-27 19:49:07 +03:00
parent 5f7981974e
commit a53600fb85
2 changed files with 58 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
pages/contract/change/components/Options/index.js
View File

@ -323,6 +323,15 @@ class SumSelector extends React.Component
}
}
_handle_onKeyDown = (event) =>
{
if(event.keyCode === 13)
{
event.preventDefault();
this.props.onSubmit(event);
}
}
_handle_onMin = () =>
{
const { onOption } = this.props;
@ -366,7 +375,7 @@ class SumSelector extends React.Component
<div className="form_field">
<label style={ option.disable ? { opacity: 0.5 } : {} }>Изменить сумму платежа</label>
<div className="input_with_notes" style={ option.disable ? { opacity: 0.5 } : {} }>
<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange }/>
<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange } onKeyDown={ this._handle_onKeyDown }/>
<span className="interactive" style={{ textDecoration: "underline" }} onClick={ this._handle_onMin }>от { numeral(min).format(' ., ') }&nbsp;₽</span>
<span className="interactive" style={{ textDecoration: "underline" }} onClick={ this._handle_onMax }>до { numeral(max).format(' ., ') }&nbsp;₽</span>
</div>
@ -446,6 +455,15 @@ class InsurancePriceSelector extends React.Component
//}
}
_handle_onKeyDown = (event) =>
{
if(event.keyCode === 13)
{
event.preventDefault();
this.props.onSubmit(event);
}
}
_handle_onMin = () =>
{
const { min } = this.state;
@ -479,7 +497,7 @@ class InsurancePriceSelector extends React.Component
<>{ numeral(value).format(' ., ') }&nbsp;₽</>
) : (
<>
<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange }/>
<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange } onKeyDown={ this._handle_onKeyDown }/>
<span className="interactive" style={{ textDecoration: "underline" }} onClick={ this._handle_onMin }>от { numeral(min).format(' ., ') }&nbsp;₽</span>
<span className="interactive" style={{ textDecoration: "underline" }} onClick={ this._handle_onMax }>до { numeral(max).format(' ., ') }&nbsp;₽</span>
</>
@ -622,37 +640,39 @@ export default class Options extends React.Component
_handle_onCalculate = (event) =>
{
event.preventDefault();
event.stopPropagation();
const { sending, number_paydate, period_new, fix_last_payment_available, date_offset_type, sum, insurance_price_result, datefrom, } = this.state;
const { number, options, variants, onCalculate } = this.props;
event.preventDefault();
console.log(this.props);
const selected = {
number_planpayment: options.number_planpayment.value,
};
if(number_paydate !== null) { selected.number_paydate = moment(number_paydate).format(); }
if(period_new !== null) { selected.period_new = period_new; }
//if(fix_last_payment_available !== null) { selected.fix_last_payment_available = fix_last_payment_available; }
if(date_offset_type !== null) { selected.date_offset_type = date_offset_type; }
if(sum !== null) { selected.sum = sum; }
if(insurance_price_result !== null) { selected.insurance_price_result = insurance_price_result; }
//if(early_redemption_change !== null) { selected.early_redemption_change = early_redemption_change; }
if(datefrom !== null) { selected.datefrom = moment(datefrom).format(); }
if(!sending)
{
const v = {};
for(let i in variants.types) { v[ variants.types[i].name ] = variants.types[i].value; }
const payload = {
...{ contract_number: number },
...v,
...selected
};
this.setState({ sending: true, }, () =>
{
console.log("_handle_onCalculate ?");
const selected = {
number_planpayment: options.number_planpayment.value,
};
if(number_paydate !== null) { selected.number_paydate = moment(number_paydate).format(); }
if(period_new !== null) { selected.period_new = period_new; }
//if(fix_last_payment_available !== null) { selected.fix_last_payment_available = fix_last_payment_available; }
if(date_offset_type !== null) { selected.date_offset_type = date_offset_type; }
if(sum !== null) { selected.sum = sum; }
if(insurance_price_result !== null) { selected.insurance_price_result = insurance_price_result; }
//if(early_redemption_change !== null) { selected.early_redemption_change = early_redemption_change; }
if(datefrom !== null) { selected.datefrom = moment(datefrom).format(); }
const v = {};
for(let i in variants.types) { v[ variants.types[i].name ] = variants.types[i].value; }
const payload = {
...{ contract_number: number },
...v,
...selected
};
getContractGraphicChangeCalculate(payload)
.then((calculation) =>
{
@ -665,7 +685,7 @@ export default class Options extends React.Component
alert("К сожалению, при расчёте возникла ошибка.\n\nДля расчёта вариантов изменения графика обратитесь, пожалуйста, в Службу клиентского сервиса по адресу электронной почты clint@evoleasing.ru или по телефону Горячей линии 8 800 333 75 75.");
});
});
});
});
}
}
@ -731,6 +751,7 @@ export default class Options extends React.Component
{
const { loading, sending, } = this.state;
const { variants, options } = this.props;
/*this._checkAllowCalculate() ? this._handle_onCalculate : {}*/
return (
<div className="block">
@ -741,7 +762,7 @@ export default class Options extends React.Component
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" style={{ marginTop: "-45px", marginLeft: "-45px", }}/>
</div>
) : (
<form className="calc">
<form className="calc" onSubmit={ this._handle_onCalculate }>
{ options !== undefined && options !== null && options.number_paydate !== undefined && options.number_paydate !== null && options.number_paydate.visible && (
<PaymentDate option={ options.number_paydate } onOption={ this._handle_onPaymentDateChange } />
) }
@ -755,17 +776,17 @@ export default class Options extends React.Component
<PeriodSelector option={ options.period_new } onOption={ this._handle_onPeriodChange } />
) }
{ options !== undefined && options !== null && options.sum !== undefined && options.sum !== null && options.sum.visible && (
<SumSelector option={ options.sum } onOption={ this._handle_onSumChange } />
<SumSelector option={ options.sum } onOption={ this._handle_onSumChange } onSubmit={ this._handle_onCalculate }/>
) }
{ options !== undefined && options !== null && options.insurance_price_result !== undefined && options.insurance_price_result !== null && options.insurance_price_result.visible && (
<InsurancePriceSelector option={ options.insurance_price_result } onOption={ this._handle_onInsurancePriceChange } />
<InsurancePriceSelector option={ options.insurance_price_result } onOption={ this._handle_onInsurancePriceChange } onSubmit={ this._handle_onCalculate }/>
) }
{ options !== undefined && options !== null && options.datefrom !== undefined && options.datefrom !== null && options.datefrom.visible && (
<InsuranceDateFromSelector option={ options.datefrom } onOption={ this._handle_onInsuranceDateFromChange } />
) }
<div className="btn_group">
<button className="button button-gray" onClick={ this._handle_onBack }>Назад</button>
<button className="button button-blue" onClick={ this._handle_onCalculate } disabled={ this._checkAllowCalculate() ? false : true } style={{ minWidth: 350 }}>
<button type="submit" className="button button-blue" disabled={ this._checkAllowCalculate() ? false : true } style={{ minWidth: 350 }}>
{ sending ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
) : ( "Рассчитать график" ) }

10
pages/contract/change/components/VariantsList/index.js
View File

@ -61,8 +61,10 @@ export default class VariantsList extends React.Component
return false;
}
_handle_onOptions = () =>
_handle_onOptions = (event) =>
{
event.preventDefault();
this.props.onOptions();
}
@ -95,7 +97,7 @@ export default class VariantsList extends React.Component
<div className="block" style={{ position: "relative" }}>
<p className="title">Варианты изменения графиков</p>
<div style={ loading ? { opacity: 0.5, } : {} }>
<form onSubmit={ (e) => e.preventDefault() }>
<form onSubmit={ this._handle_onOptions }>
{ variants_types !== undefined && variants_types !== null && variants_types.map((variant, index) =>
{
const disabled = this._checkVariant(variant.type);
@ -129,8 +131,8 @@ export default class VariantsList extends React.Component
)
}) }
{ selected !== undefined && selected !== null && (
<button className="button button-blue" disabled={ blocked || loading ? true : selected.length > 0 ? false : true } onClick={ this._handle_onOptions }>Далее</button>
)}
<button type="submit" className="button button-blue" disabled={ blocked || loading ? true : selected.length > 0 ? false : true }>Далее</button>
) }
</form>
</div>
{ loading && (