#61 реализован фильтр по статусам

front/src/components/Account/Account.js

@@ -8,7 +8,7 @@ import { NavLink } from "react-router-dom";
 import {download} from '../../../src/functions'
 
 
-const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, stopRepeatability }) => {
+const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, stopRepeatability, statusDateChange }) => {
   const user = useSelector(state => state.users.user);
 
   // --для модалки--
@@ -38,7 +38,7 @@ const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, s
             <th>Сумма платежа</th>
             <th>Инициатор</th>
             <th>Файл</th>
-            <th>Статус платежа</th>
+            <th>Статус платежа</th>            
             {user && user.role.includes('addPayment') && <th>Повтор платежа</th>}
           </tr>
         </thead>
@@ -65,7 +65,7 @@ const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, s
                 <span onClick={() => openModal(apiURL + "/uploads/" + payment.image)}>Посмотреть</span><br />
                 <a onClick={()=> download(apiURL + "/uploads/" + payment.image, "file.jpg")}>Скачать</a>                
               </td>
-              {!registry && user && user.role.includes('viewAllPayments') && <td>
+              {!registry && user && user.role.includes('viewAllPayments') && <td onClick ={e => statusDateChange(e)}>
                 {!payment.approved && <span style={{ color: 'red' }}>Не подтвержден</span>}
                 {payment.approved && !payment.paided && <span style={{ color: 'orange' }}>Подтвержден</span>}
                 {payment.approved && payment.paided && <span style={{ color: 'green' }}>Оплачен</span>}</td>}                               

front/src/components/Header/Header.css

@@ -6,6 +6,7 @@
     align-items: center;
     position: sticky;
     top: 0;
+    z-index: 2;
 }
 .Header__link {
     text-decoration: none;

front/src/containers/Payments/Payments.css

@@ -9,20 +9,20 @@
     background: white;
 }
 .Payments__btn {
-    padding: 10px;
+    padding: 5px 10px;
     font-size: 18px;
     font-weight: bold;
-    background: #ff067c;
+    background: #f52284;
     border: none;
     margin: 20px 0;
     color: white;
-    border-radius: 10px;
+    border-radius: 5px;
     box-shadow: 0 0 3px 2px;
     outline: none;
     cursor: pointer;
 }
 .Payments__btn:hover {
-    background: #480866;
+    background: #762c80;
 }
 .Payments__btn:active {
     box-shadow: none;
@@ -50,4 +50,46 @@
     padding: 5px;
     margin: 5px;
     width: 50%;
+}
+.Payments__filter {
+    display: flex;
+    align-items: center;
+    width: 70%;
+    margin: 0 auto;
+}
+select, input {
+    padding: 5px;
+    margin: 0 10px;
+    font-size: 14px;
+}
+.dropdown {
+    position: relative;
+    display: inline-block;
+    margin: 0 10px;
+    
+}
+.dropdown__title {
+    padding: 5px 10px;
+    min-width: 150px;
+    border: 1px solid gray;
+    cursor: pointer;
+}
+.dropdown__content {
+    display: none;
+    position: absolute;
+    margin-top: 5px;
+    list-style: none;
+    background: white;
+    min-width: 144px;
+    border: 1px solid gray;
+    z-index: 1;
+}
+.dropdown:hover .dropdown__content {
+    display: block;
+}
+.dropdown__content-item {
+    padding: 5px 10px;
+}
+.dropdown__content-item:hover {
+    background: #bbb9b9;
 }
\ No newline at end of file

front/src/containers/Payments/Payments.js

@@ -16,6 +16,7 @@ const Payments = () => {
       fromDate: "",
       toDate: "",
     },
+    approved: "",
     paided: ""
   });
   useEffect(() => {
@@ -49,6 +50,25 @@ const Payments = () => {
       return { ...prevState, dateOfPayment: { ...stateCopy } };
     });
   };
+  const statusChangeHandler = e => {
+    const value = e.target.innerText
+    if(value === "Не подтвержден") {
+      setState((prevState) => {
+        return { ...prevState, approved: false };
+      });
+    }else if (value === "Подтвержден") {
+      setState((prevState) => {
+        return { ...prevState, approved: true };
+      });
+    }else if (value === "Оплачен") {
+      setState((prevState) => {
+        return { ...prevState, paided: true };
+      });
+    }
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+  }
   const postData = async () => {
     let stateCopy = { ...state };
     if (!stateCopy.dateOfPayment.fromDate && !stateCopy.dateOfPayment.toDate) {
@@ -89,7 +109,7 @@ const Payments = () => {
                     <span className="Payments__total-company">"Froot_Бизнес": <strong>{totalBusiness}</strong> KZT</span>
                 </div>
             </div>
-      <div style={{display: 'flex', alignItems: 'center', maxWidth: "80%", margin: "0 auto" }}>
+      <div className="Payments__filter">
          <select
             name="payer"
             value={state.payer}
@@ -100,33 +120,34 @@ const Payments = () => {
           <option value="Froot_Бизнес">Froot_Бизнес</option>
         </select>
 
-        <p>FROM</p>
+        <p>с</p>
 
         <input
           type="date"
           onChange={(e) => inputDateChangeHandler(e)}
           name="fromDate"
         />
-        <p>TO</p>
+        <p>до</p>
 
         <input
           type="date"
           onChange={(e) => inputDateChangeHandler(e)}
           name="toDate"
         />
-        <select
-            name="paided"
-            value={state.paided}
-            onChange={e => inputChangeHandler(e)}
-        >
-          <option value="">Все платежи</option>
-          <option value="false">Не оплаченные</option>
-          <option value="true">Оплаченные</option>
-        </select>
+        <div id="sweeties" className="dropdown">
+          <span className="dropdown__title">Статусы платежей</span>
+          <div className="dropdown__content">
+            <div className="dropdown__content-item" onClick={e=>statusChangeHandler(e)}>Не подтвержден</div>
+            <div className="dropdown__content-item" onClick={e=>statusChangeHandler(e)}>Подтвержден</div>
+            <div className="dropdown__content-item" onClick={e=>statusChangeHandler(e)}>Оплачен</div>
+          </div>
+
+        </div>
 
-        <button className="Payments__btn" onClick={() => postData()}>Apply filter</button>
+        <button className="Payments__btn" onClick={() => postData()}>Применить</button>
       </div>
       <Account payments={payments}
+        statusDateChange = {statusChangeHandler}
         />
     </div>
   );

front/src/containers/RegistryForAccountant/RegistryForAccountant.css

@@ -40,4 +40,4 @@
     font-size: 16px;
     box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
     cursor: pointer;
-}
\ No newline at end of file
+}