graphic change options fixes, help messages
This commit is contained in:
merelendor
parent
b304904576
commit
4a4a0243a4
@ -43,26 +43,51 @@ export default class DateInput extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { id, placeholder, value, min, max } = this.props;
|
||||
const { id, placeholder, value, min, max, disabled } = this.props;
|
||||
const { readonly } = this.state;
|
||||
|
||||
return (
|
||||
<div className="date_input_wrapper">
|
||||
<DatePicker
|
||||
messages={ messages }
|
||||
onFocus={ this._handle_onFocus }
|
||||
onBlur={ this._handle_onBlur }
|
||||
parse={ formats } id={ id }
|
||||
placeholder={ placeholder }
|
||||
value={ value }
|
||||
min={ min }
|
||||
max={ max }
|
||||
onChange={ this._handle_onChange }
|
||||
inputProps={{
|
||||
component: props => <input {...props} readOnly />
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
if(disabled)
|
||||
{
|
||||
return (
|
||||
<div className="date_input_wrapper" style={{ position: "relative" }}>
|
||||
<DatePicker
|
||||
messages={ messages }
|
||||
onFocus={ this._handle_onFocus }
|
||||
onBlur={ this._handle_onBlur }
|
||||
parse={ formats } id={ id }
|
||||
placeholder={ placeholder }
|
||||
value={ value }
|
||||
min={ min }
|
||||
max={ max }
|
||||
onChange={ this._handle_onChange }
|
||||
inputProps={{
|
||||
component: props => <input {...props} readOnly />
|
||||
}}
|
||||
/>
|
||||
<div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: 0.0 }} onClick={ (event) => { event.stopPropagation(); event.preventDefault(); } }/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
else
|
||||
{
|
||||
return (
|
||||
<div className="date_input_wrapper">
|
||||
<DatePicker
|
||||
messages={ messages }
|
||||
onFocus={ this._handle_onFocus }
|
||||
onBlur={ this._handle_onBlur }
|
||||
parse={ formats } id={ id }
|
||||
placeholder={ placeholder }
|
||||
value={ value }
|
||||
min={ min }
|
||||
max={ max }
|
||||
onChange={ this._handle_onChange }
|
||||
inputProps={{
|
||||
component: props => <input {...props} readOnly />
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -46,10 +46,11 @@ class PaymentDate extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { option } = this.props;
|
||||
const { value, min, max } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field">
|
||||
<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
<label>Дата платежа</label>
|
||||
<DateInput
|
||||
placeholder=""
|
||||
@ -58,6 +59,7 @@ class PaymentDate extends React.Component
|
||||
max={ max }
|
||||
id={"date_to"}
|
||||
onChange={ this._handle_onChange }
|
||||
disabled={ option.disable ? true : false }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@ -98,31 +100,34 @@ class FixLastPayment extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { option } = this.props;
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field">
|
||||
<input type="checkbox" hidden id="fix_pay" name="fix_pay" checked={ value } onChange={ this._handle_onChange }/>
|
||||
<label htmlFor="fix_pay">
|
||||
<input type="checkbox" hidden id="fix_pay" name="fix_pay" checked={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange } style={ option.disable ? { opacity: 0.5 } : {} } />
|
||||
<label htmlFor="fix_pay" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
Фиксировать последний платеж
|
||||
</label>
|
||||
<div className="help_tooltip">
|
||||
<div className="help_icon">
|
||||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
|
||||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="help_content ">
|
||||
{" "}
|
||||
{/* opened */}
|
||||
<div>
|
||||
<p>Какой-то описательный текст</p>
|
||||
<p className="button">Закрыть</p>
|
||||
{ option.information !== undefined && option.information !== null && (
|
||||
<div className="help_tooltip">
|
||||
<div className="help_icon">
|
||||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="help_content ">
|
||||
{" "}
|
||||
{/* opened */}
|
||||
<div>
|
||||
<p dangerouslySetInnerHTML={{ __html: option.information }}/>
|
||||
<p className="button">Закрыть</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -162,17 +167,18 @@ class DateOffestType extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { option } = this.props;
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field">
|
||||
<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
<label>Тип каникул</label>
|
||||
<div className="form_field">
|
||||
<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" checked={ value === 100000001 ? true : false } onChange={ () => this._handle_onChange(100000001) }/>
|
||||
<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" checked={ value === 100000001 ? true : false } disabled={ option.disable ? true : false } onChange={ () => this._handle_onChange(100000001) }/>
|
||||
<label htmlFor="weeekend_type_1">С увеличением срока</label>
|
||||
</div>
|
||||
<div className="form_field">
|
||||
<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" checked={ value === 100000000 ? true : false } onChange={ () => this._handle_onChange(100000000) }/>
|
||||
<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" checked={ value === 100000000 ? true : false } disabled={ option.disable ? true : false } onChange={ () => this._handle_onChange(100000000) }/>
|
||||
<label htmlFor="weeekend_type_2">Без изменения срока</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -224,14 +230,15 @@ class PeriodSelector extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { option } = this.props;
|
||||
const { value, periods } = this.state;
|
||||
|
||||
if(value !== null)
|
||||
{
|
||||
return (
|
||||
<div className="form_field">
|
||||
<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
<label>Увеличить график на</label>
|
||||
<select value={ value } onChange={ this._handle_onChange }>
|
||||
<select value={ value } onChange={ this._handle_onChange } disabled={ option.disable ? true : false }>
|
||||
{ periods.map((period, index) => (
|
||||
<option key={ index } value={ period }>{ index + 1 } { pluralize( index + 1, 'месяца', 'месяц', 'месяца', 'месяцев') } ({ period } { pluralize( period, 'платежа', 'платеж', 'платежа', 'платежей') })</option>
|
||||
)) }
|
||||
@ -291,33 +298,36 @@ class SumSelector extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { option } = this.props;
|
||||
const { value, min, max } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field">
|
||||
<label>Увеличить платеж на (ЧДП)</label>
|
||||
<div className="input_with_notes">
|
||||
<input type="number" placeholder="Укажите сумму" defaultValue={ value } onChange={ this._handle_onChange }/>
|
||||
<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 }/>
|
||||
<span>от { numeral(min).format(' ., ') } ₽</span>
|
||||
<span>до { numeral(max).format(' ., ') } ₽</span>
|
||||
</div>
|
||||
<div className="help_tooltip">
|
||||
<div className="help_icon">
|
||||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="help_content ">
|
||||
{" "}
|
||||
{/* opened */}
|
||||
<div>
|
||||
<p>Какой-то описательный текст</p>
|
||||
<p className="button">Закрыть</p>
|
||||
{ option.information !== undefined && option.information !== null && (
|
||||
<div className="help_tooltip">
|
||||
<div className="help_icon">
|
||||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="help_content ">
|
||||
{" "}
|
||||
{/* opened */}
|
||||
<div>
|
||||
<p dangerouslySetInnerHTML={{ __html: option.information }}/>
|
||||
<p className="button">Закрыть</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -351,52 +361,63 @@ class InsurancePriceSelector extends React.Component
|
||||
|
||||
_handle_onChange = (event) =>
|
||||
{
|
||||
const { onOption } = this.props;
|
||||
const { option, onOption } = this.props;
|
||||
const { min, max } = this.state;
|
||||
|
||||
const value = parseFloat(event.target.value.replace('/[^\d]/m', ''));
|
||||
if(value >= min && value <= max && !isNaN(value))
|
||||
{
|
||||
this.setState({ value: value }, () =>
|
||||
//if(option.disable)
|
||||
//{
|
||||
// console.log("////", option.disable);
|
||||
// this.setState({ value: this.state.value });
|
||||
//}
|
||||
//else
|
||||
//{
|
||||
const value = parseFloat(event.target.value.replace('/[^\d]/m', ''));
|
||||
if(value >= min && value <= max && !isNaN(value))
|
||||
{
|
||||
onOption(this.state.value, false);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
onOption(this.state.value, true);
|
||||
}
|
||||
this.setState({ value: value }, () =>
|
||||
{
|
||||
onOption(this.state.value, false);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
onOption(this.state.value, true);
|
||||
}
|
||||
//}
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
const { option } = this.props;
|
||||
const { value, min, max } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field">
|
||||
<label>Сумма пролонгации</label>
|
||||
<div className="input_with_notes">
|
||||
<input type="number" placeholder="Укажите сумму" defaultValue={ value } onChange={ this._handle_onChange }/>
|
||||
<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 }/>
|
||||
<span>от { numeral(min).format(' ., ') } ₽</span>
|
||||
<span>до { numeral(max).format(' ., ') } ₽</span>
|
||||
</div>
|
||||
<div className="help_tooltip">
|
||||
<div className="help_icon">
|
||||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="help_content ">
|
||||
{" "}
|
||||
{/* opened */}
|
||||
<div>
|
||||
<p>Какой-то описательный текст</p>
|
||||
<p className="button">Закрыть</p>
|
||||
{ option.information !== undefined && option.information !== null && (
|
||||
<div className="help_tooltip">
|
||||
<div className="help_icon">
|
||||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="help_content ">
|
||||
{" "}
|
||||
{/* opened */}
|
||||
<div>
|
||||
<p dangerouslySetInnerHTML={{ __html: option.information }}/>
|
||||
<p className="button">Закрыть</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -440,10 +461,11 @@ class InsuranceDateFromSelector extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { option } = this.props;
|
||||
const { value, min, max } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field">
|
||||
<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
<label>Дата начала пролонгации</label>
|
||||
<DateInput
|
||||
placeholder=""
|
||||
@ -452,6 +474,7 @@ class InsuranceDateFromSelector extends React.Component
|
||||
max={ max }
|
||||
id={"date_to"}
|
||||
onChange={ this._handle_onChange }
|
||||
disabled={ option.disable ? true : false }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -25,6 +25,21 @@ export default class VariantsList extends React.Component
|
||||
}
|
||||
}
|
||||
|
||||
_getVariantHelp = (type) =>
|
||||
{
|
||||
const { variants } = this.props;
|
||||
|
||||
for(let i in variants.types)
|
||||
{
|
||||
if(variants.types[i].name === type)
|
||||
{
|
||||
return variants.types[i].information;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
_checkVariant = (type) =>
|
||||
{
|
||||
const { variants } = this.props;
|
||||
@ -52,7 +67,9 @@ export default class VariantsList extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { number, variants_types, selected, blocked, loading } = this.props;
|
||||
const { number, variants, variants_types, selected, blocked, loading } = this.props;
|
||||
console.log("variants_typesvariants_typesvariants_typesvariants_typesvariants_types");
|
||||
console.log(variants_types);
|
||||
|
||||
return (
|
||||
<div className="block" style={{ position: "relative" }}>
|
||||
@ -62,11 +79,13 @@ export default class VariantsList extends React.Component
|
||||
{ variants_types.map((variant, index) =>
|
||||
{
|
||||
const disabled = this._checkVariant(variant.type);
|
||||
const help = this._getVariantHelp(variant.type);
|
||||
|
||||
return (
|
||||
<div className="form_field" key={ index }>
|
||||
<input type="checkbox" hidden id={ `variant_${ index }` } name="variants" disabled={ disabled } checked={ selected.indexOf(variant.type) > -1 ? true : false } onChange={ () => { this._handle_onVariant(variant.type) } }/>
|
||||
<label htmlFor={ `variant_${ index }` } className="unselectable"
|
||||
style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }<br/><small>{ variant.type }</small></label>
|
||||
style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }</label>
|
||||
<div className="help_tooltip">
|
||||
<div className="help_icon">
|
||||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
|
||||
@ -75,14 +94,16 @@ export default class VariantsList extends React.Component
|
||||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="help_content ">
|
||||
{ help !== null && (
|
||||
<div className="help_content">
|
||||
{" "}
|
||||
{/* opened */}
|
||||
<div>
|
||||
<p>{ variant.help }</p>
|
||||
<p className="button">Закрыть</p>
|
||||
{/* opened */}
|
||||
<div>
|
||||
<p dangerouslySetInnerHTML={{ __html: help }}/>
|
||||
<p className="button">Закрыть</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user