VikingKong
/
UCB_PAYMENT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: VikingKong:f9fa63e4994bad11279503b3ff436f7f2e40e2e4
Branches Tags
VikingKong:master
...
compare: VikingKong:7184ec126ecb61f6bc9cfd3e204f866fca048542
Branches Tags
VikingKong:master

2 Commits
f9fa63e499 ... 7184ec126e

Author SHA1 Message Date
sync 7184ec126e Implement validating form on pressing 'Enter' on input fields.
1 year ago
sync f5e452438d Improve CSS styling (for now wide screens only).
1 year ago
5 changed files with 83 additions and 38 deletions
Show Stats

14
src/Form.css
Unescape View File

@ -83,8 +83,8 @@ body {
position: relative; position: relative;
padding: var(--padding); padding: var(--padding);
gap: 8px; gap: 8px;
height: 45vh; height: 35vh;
height: 45svh; height: 35svh;
display: grid; display: grid;
grid-area: 4 / 1 / span 6 / span 4; grid-area: 4 / 1 / span 6 / span 4;
grid-template-columns: 1fr 1.5fr 0.5fr 1.3fr; grid-template-columns: 1fr 1.5fr 0.5fr 1.3fr;
@ -123,8 +123,10 @@ body {
place-content: self-start center; place-content: self-start center;
background: hsl(0deg 100% 100%); background: hsl(0deg 100% 100%);
color: black; color: black;
font-size: 1.3125rem; font-size: 1.2125rem;
/* font-size: 1.3125rem; */ /* font-size: 1.3125rem; */
}
.label {
font-weight: bold; font-weight: bold;
} }
.title { .title {
@ -144,3 +146,9 @@ input, select {
border: 2px solid gray; border: 2px solid gray;
border-radius: 4px; border-radius: 4px;
} }
textarea {
font-size: 16px;
font-size: max(16px, 1em);
font-family: inherit;
width: 92%;
}

73
src/Form.jsx
Unescape View File

@ -149,6 +149,12 @@ function Form() {
}, },
]; ];
const handlePressEnter = (e, field = null) => {
if (e.key === 'Enter') {
handleBlur(field);
}
};
const focusField = (fieldName) => { const focusField = (fieldName) => {
document.getElementById(fieldName).focus(); document.getElementById(fieldName).focus();
}; };
@ -274,12 +280,13 @@ function Form() {
<div className="section_line"></div> <div className="section_line"></div>
</div> </div>
<div className="payer"> <div className="payer">
<div className="child">Плательщик:</div> <div className="child label">Плательщик:</div>
<div className="child">{`${payerName} ${clientId}`}</div> <div className="child">{`${payerName} ${clientId}`}</div>
<div className="child">Номер счета:</div> <div className="child label">Номер счета:</div>
<div className="child"> <div className="child">
<select <select
value={payerAccount} value={payerAccount}
style={{ width: '40ch' }}
onChange={(e) => { onChange={(e) => {
setPayerAccount(e.target.value); setPayerAccount(e.target.value);
handleBlur(); handleBlur();
@ -294,28 +301,29 @@ function Form() {
))} ))}
</select> </select>
</div> </div>
<div className="child">ИНН:</div> <div className="child label">ИНН:</div>
<div className="child">{payerINN}</div> <div className="child">{payerINN}</div>
<div className="child">Сумма:</div> <div className="child label">Сумма:</div>
<div className="child"> <div className="child">
<span> <span>
<input <input
id="amount" id="amount"
value={amount} value={amount}
onChange={(e) => setAmount(e.target.value)} onChange={(e) => setAmount(e.target.value)}
onKeyDown={(e) => handlePressEnter(e)}
onBlur={handleBlur} onBlur={handleBlur}
style={{ borderColor: getBorderColor('amount') }} style={{ borderColor: getBorderColor('amount') }}
/> />
RUB RUB
</span> </span>
</div> </div>
<div className="child">Телефон или электронный адрес:</div> <div className="child label">Телефон или электронный адрес:</div>
<div className="child">{payerPhoneEmail}</div> <div className="child">{payerPhoneEmail}</div>
<div className="child"></div> <div className="child"></div>
<div className="child"></div> <div className="child"></div>
<div className="child">Адрес места жительства:</div> <div className="child label">Адрес места жительства:</div>
<div className="child">{payerAddress}</div> <div className="child">{payerAddress}</div>
<div className="child">Комиссии и расходы:</div> <div className="child label">Комиссии и расходы:</div>
<div className="child"> <div className="child">
<select <select
value={chargesDetails} value={chargesDetails}
@ -337,67 +345,70 @@ function Form() {
<div className="receiver_1"> <div className="receiver_1">
<div className="child"></div> <div className="child"></div>
<div className="child"></div> <div className="child"></div>
<div className="child">БИК:</div> <div className="child label">БИК:</div>
<div className="child"> <div className="child">
<input <input
id="bnf_bank_bic" id="bnf_bank_bic"
value={bnfBankBic} value={bnfBankBic}
onChange={(e) => setBNFBankBic(e.target.value)} onChange={(e) => setBNFBankBic(e.target.value)}
onBlur={(e) => handleBlur('bnf_bank_bic')} onBlur={(e) => handleBlur('bnf_bank_bic')}
onKeyDown={(e) => handlePressEnter(e, 'bnf_bank_bic')}
style={{ style={{
maxWidth: '32ch', maxWidth: '32ch',
borderColor: getBorderColor('bnf_bank_bic'), borderColor: getBorderColor('bnf_bank_bic'),
}} }}
/> />
</div> </div>
<div className="child">№ Корр. счета:</div> <div className="child label">№ Корр. счета:</div>
<div className="child"> <div className="child">
<select <select
onChange={(e) => { onChange={(e) => {
setBNFBankAccount(e.target.value); setBNFBankAccount(e.target.value);
/* handleBlur(); */
}} }}
value={bnfBankAccount} value={bnfBankAccount}
style={{ maxWidth: '34ch' }} style={{ width: '28ch' }}
> >
{bnfBankAccounts.map((item, ind) => ( {bnfBankAccounts.map((item, ind) => (
<option key={`bnfBankAccount_${ind}`}>{item}</option> <option key={`bnfBankAccount_${ind}`}>{item}</option>
))} ))}
</select> </select>
</div> </div>
<div className="child">Номер счета:</div> <div className="child label">Номер счета:</div>
<div className="child"> <div className="child">
<input <input
id="bnf_account" id="bnf_account"
value={bnfAccount} value={bnfAccount}
onChange={(e) => setBNFAccount(e.target.value)} onChange={(e) => setBNFAccount(e.target.value)}
onBlur={(e) => handleBlur('bnf_account')} onBlur={(e) => handleBlur('bnf_account')}
onKeyDown={(e) => handlePressEnter(e, 'bnf_account')}
style={{ style={{
maxWidth: '32ch', maxWidth: '32ch',
borderColor: getBorderColor('bnf_account'), borderColor: getBorderColor('bnf_account'),
}} }}
/> />
</div> </div>
<div className="child">ИНН:</div> <div className="child label">ИНН:</div>
<div className="child"> <div className="child">
<input <input
id="bnf_inn" id="bnf_inn"
value={bnfINN} value={bnfINN}
onChange={(e) => setBNFINN(e.target.value)} onChange={(e) => setBNFINN(e.target.value)}
onBlur={(e) => handleBlur('bnf_inn')} onBlur={(e) => handleBlur('bnf_inn')}
onKeyDown={(e) => handlePressEnter(e, 'bnf_inn')}
style={{ style={{
maxWidth: '32ch', maxWidth: '32ch',
borderColor: getBorderColor('bnf_inn'), borderColor: getBorderColor('bnf_inn'),
}} }}
/> />
</div> </div>
<div className="child">КПП (103):</div> <div className="child label">КПП (103):</div>
<div className="child"> <div className="child">
<input <input
id="bnf_kpp" id="bnf_kpp"
value={bnfKPP} value={bnfKPP}
onChange={(e) => setBNFKPP(e.target.value)} onChange={(e) => setBNFKPP(e.target.value)}
onBlur={handleBlur} onBlur={handleBlur}
onKeyDown={(e) => handlePressEnter(e)}
style={{ style={{
maxWidth: '32ch', maxWidth: '32ch',
borderColor: getBorderColor('bnf_kpp'), borderColor: getBorderColor('bnf_kpp'),
@ -406,58 +417,66 @@ function Form() {
</div> </div>
</div> </div>
<div className="receiver_2"> <div className="receiver_2">
<div className="child">Наименование:</div> <div className="child label">Наименование:</div>
<div className="child"> <div className="child">
<input <input
id="bnf_name" id="bnf_name"
value={bnfName} value={bnfName}
onChange={(e) => setBNFName(e.target.value)} onChange={(e) => setBNFName(e.target.value)}
onBlur={handleBlur} onBlur={handleBlur}
onKeyDown={(e) => handlePressEnter(e)}
style={{ style={{
width: '100ch', width: '91%',
borderColor: getBorderColor('bnf_name'), borderColor: getBorderColor('bnf_name'),
}} }}
/> />
</div> </div>
<div className="child">Банк получателя:</div> <div className="child label">Банк получателя:</div>
<div className="child">{bnfBankName}</div> <div className="child">{bnfBankName}</div>
<div className="child">Назначение платежа:</div> <div className="child label">Назначение платежа:</div>
<div className="child"> <div className="child">
<textarea <textarea
id="payment_details" id="payment_details"
value={paymentDetails} value={paymentDetails}
onChange={(e) => setPaymentDetails(e.target.value)} onChange={(e) => setPaymentDetails(e.target.value)}
onBlur={handleBlur} onBlur={handleBlur}
onKeyDown={(e) => handlePressEnter(e)}
style={{ style={{
height: '60px', height: '60px',
width: '133ch',
borderColor: getBorderColor('payment_details'), borderColor: getBorderColor('payment_details'),
}} }}
/> />
</div> </div>
<div className="child">Код вида дохода:</div> <div className="child label">Код вида дохода:</div>
<div className="child"> <div className="child">
<select <select
style={{ width: '102ch' }} style={{ width: '60ch' }}
value={codePurpose} value={codePurpose}
onChange={(e) => { onChange={(e) => {
setCodePurpose(e.target.value); setCodePurpose(e.target.value);
handleBlur(); handleBlur();
}} }}
> >
<option>1</option> <option>1 - напр., заработная плата</option>
<option>2</option> <option>2 - алименты (периодические выплаты)</option>
<option>3</option> <option>
<option>4</option> 3 - возмещение вреда здоровью (периодические выплаты)
<option>5</option> </option>
<option>
4 - мат. помощь на рождение ребенка (единовременная выплата)
</option>
<option>
5 - возмещение вреда здоровью (единовременная выплата)
</option>
</select> </select>
</div> </div>
<div className="child">Код (УИП) (22):</div> <div className="child label">Код (УИП) (22):</div>
<div className="child"> <div className="child">
<input <input
value={taxUINCode} value={taxUINCode}
onChange={(e) => setTaxUINCode(e.target.value)} onChange={(e) => setTaxUINCode(e.target.value)}
onBlur={handleBlur} onBlur={handleBlur}
onKeyDown={(e) => handlePressEnter(e)}
style={{ maxWidth: '32ch' }} style={{ maxWidth: '32ch' }}
/> />
</div> </div>

17
src/Messages.css
Unescape View File

@ -0,0 +1,17 @@
.message_error {
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,36,36,0.9528186274509804) 0%, rgba(249,126,126,1) 100%);
min-width: 460px;
margin: 3px;
border-radius: 2em / 4em;
cursor: pointer;
}
.message_warning {
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,179,36,0.9528186274509804) 0%, rgba(249,229,126,1) 100%);
min-width: 460px;
margin: 3px;
cursor: pointer;
border-radius: 2em / 4em;
}

14
src/Messages.jsx
Unescape View File

@ -1,21 +1,19 @@
import errorIcon from './assets/error.svg'; import errorIcon from './assets/error.svg';
import warningIcon from './assets/warning.svg'; import warningIcon from './assets/warning.svg';
import './Messages.css';
function Messages(props) { function Messages(props) {
return Object.keys(props.messages) return Object.keys(props.messages)
?.filter((item) => props.messages[item]?.status !== 'OK') ?.filter((item) => props.messages[item]?.status !== 'OK')
.map((item, ind) => ( .map((item, ind) => (
<div <div
className={
props.messages[item].status === 'ERROR'
? 'message_error'
: 'message_warning'
}
onClick={() => props.focusField(item)} onClick={() => props.focusField(item)}
key={`messages_${ind}`} key={`messages_${ind}`}
style={{
backgroundColor:
props.messages[item].status === 'ERROR' ? '#ffcccc' : '#ffebcc',
width: '500px',
padding: '5px',
border: 'solid 1px',
cursor: 'pointer',
}}
> >
<img <img
style={{ height: '20px' }} style={{ height: '20px' }}

3
src/Payment.css
Unescape View File

@ -9,4 +9,7 @@
.payment_messages { .payment_messages {
float: left; float: left;
max-width: 25%; max-width: 25%;
height: 100vh;
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,255,255,0.9528186274509804) 0%, rgba(236,236,234,1) 100%);
} }

Write Preview
Loading…
Cancel
Save