From dad0abe9b8e15dae4ca9a3af760e079ce8bfedb4 Mon Sep 17 00:00:00 2001
From: sync <mick@vikingkong.xyz>
Date: Fri, 4 Oct 2024 20:11:57 +0300
Subject: [PATCH] Implement highlighting fields with error/warning values and
 focusing appropriate field on clicking on the error message.

---
 src/Form.jsx     | 49 +++++++++++++++++++++++++++++++++++++++++++-----
 src/Messages.jsx |  2 ++
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/Form.jsx b/src/Form.jsx
index 677ca76..11d8e84 100644
--- a/src/Form.jsx
+++ b/src/Form.jsx
@@ -138,6 +138,25 @@ function Form() {
     },
   ];
 
+  const focusField = (fieldName) => {
+    document.getElementById(fieldName).focus();
+  };
+
+  const getBorderColor = (fieldName) => {
+    try {
+      switch (messages[fieldName].status) {
+        case 'ERROR':
+          return 'red';
+        case 'WARNING':
+          return 'orange';
+        default:
+          return 'black';
+      }
+    } catch {
+      return 'black';
+    }
+  };
+
   const handleBlur = () => {
     setFirstRender(false);
     (async () => {
@@ -244,9 +263,11 @@ function Form() {
             <div className="child">
               <span>
                 <input
+                  id="amount"
                   value={amount}
                   onChange={(e) => setAmount(e.target.value)}
                   onBlur={handleBlur}
+                  style={{ borderColor: getBorderColor('amount') }}
                 />
                 RUB
               </span>
@@ -282,10 +303,14 @@ function Form() {
             <div className="child">БИК:</div>
             <div className="child">
               <input
+                id="bnf_bank_bic"
                 value={bnfBankBic}
                 onChange={(e) => setBNFBankBic(e.target.value)}
                 onBlur={handleBlur}
-                style={{ maxWidth: '32ch' }}
+                style={{
+                  maxWidth: '32ch',
+                  borderColor: getBorderColor('bnf_bank_bic'),
+                }}
               />
             </div>
             <div className="child">№ Корр. счета:</div>
@@ -306,19 +331,27 @@ function Form() {
             <div className="child">ИНН:</div>
             <div className="child">
               <input
+                id="bnf_inn"
                 value={bnfINN}
                 onChange={(e) => setBNFINN(e.target.value)}
                 onBlur={handleBlur}
-                style={{ maxWidth: '32ch' }}
+                style={{
+                  maxWidth: '32ch',
+                  borderColor: getBorderColor('bnf_inn'),
+                }}
               />
             </div>
             <div className="child">КПП (103):</div>
             <div className="child">
               <input
+                id="bnf_kpp"
                 value={bnfKPP}
                 onChange={(e) => setBNFKPP(e.target.value)}
                 onBlur={handleBlur}
-                style={{ maxWidth: '32ch' }}
+                style={{
+                  maxWidth: '32ch',
+                  borderColor: getBorderColor('bnf_kpp'),
+                }}
               />
             </div>
           </div>
@@ -326,10 +359,14 @@ function Form() {
             <div className="child">Наименование:</div>
             <div className="child">
               <input
+                id="bnf_name"
                 value={bnfName}
                 onChange={(e) => setBNFName(e.target.value)}
                 onBlur={handleBlur}
-                style={{ width: '100ch' }}
+                style={{
+                  width: '100ch',
+                  borderColor: getBorderColor('bnf_name'),
+                }}
               />
             </div>
             <div className="child">Банк получателя:</div>
@@ -337,12 +374,14 @@ function Form() {
             <div className="child">Назначение платежа:</div>
             <div className="child">
               <textarea
+                id="payment_details"
                 value={paymentDetails}
                 onChange={(e) => setPaymentDetails(e.target.value)}
                 onBlur={handleBlur}
                 style={{
                   height: '60px',
                   width: '133ch',
+                  borderColor: getBorderColor('payment_details'),
                 }}
               />
             </div>
@@ -378,7 +417,7 @@ function Form() {
       {Object.keys(messages)?.filter((item) => messages[item]?.status != 'OK')
         .length > 0 ? (
         <div className="payment_messages">
-          <Messages messages={messages} />
+          <Messages messages={messages} focusField={focusField} />
         </div>
       ) : null}
     </div>
diff --git a/src/Messages.jsx b/src/Messages.jsx
index 7d42219..2dc5bce 100644
--- a/src/Messages.jsx
+++ b/src/Messages.jsx
@@ -6,6 +6,7 @@ function Messages(props) {
     ?.filter((item) => props.messages[item]?.status !== 'OK')
     .map((item, ind) => (
       <div
+        onClick={() => props.focusField(item)}
         key={`messages_${ind}`}
         style={{
           backgroundColor:
@@ -13,6 +14,7 @@ function Messages(props) {
           width: '500px',
           padding: '5px',
           border: 'solid 1px',
+          cursor: 'pointer',
         }}
       >
         <img