From 93ed3adfee49125a0d3457e93b19a1b69254a90c Mon Sep 17 00:00:00 2001
From: Gubar Nikita <dacentspartanec@gmail.com>
Date: Sun, 7 Jul 2024 23:56:26 +0300
Subject: [PATCH] fix ModalTicketToReport

---
 .../ModalTicketToReport.jsx                   | 71 +++++++++----------
 .../modalTicketToReport.scss                  | 45 ++++++------
 2 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/src/components/Modal/Tracker/ModalTicketToReport/ModalTicketToReport.jsx b/src/components/Modal/Tracker/ModalTicketToReport/ModalTicketToReport.jsx
index c9a2d69a..3991a818 100644
--- a/src/components/Modal/Tracker/ModalTicketToReport/ModalTicketToReport.jsx
+++ b/src/components/Modal/Tracker/ModalTicketToReport/ModalTicketToReport.jsx
@@ -2,7 +2,6 @@ import { format } from "date-fns";
 import React, { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { useNavigate } from "react-router";
 
 import { apiRequest } from "@api/request";
 
@@ -14,10 +13,9 @@ import "./modalTicketToReport.scss";
 
 const ModalTicketToReport = ({ show, onClose, additionalData }) => {
   const [date, setDate] = useState(new Date());
-  const [inputValue, setInputValue] = useState(0);
+  const [inputValue, setInputValue] = useState(1);
   const [taskDescription, setTaskDescription] = useState("");
 
-  const navigate = useNavigate();
   const { showNotification } = useNotification();
 
   useEffect(() => {
@@ -33,7 +31,9 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
 
   useEffect(() => {
     const hoursSpent = additionalData.task.hours_spent;
-    setInputValue(hoursSpent);
+    if (hoursSpent !== 0) {
+      setInputValue(hoursSpent);
+    }
   }, [additionalData.task.hours_spent]);
 
   const handleSubmit = async () => {
@@ -64,9 +64,15 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
               text: "Отчет успешно создан",
               type: "true"
             });
+            return true;
           })
-          .catch((error) => {
-            console.error("Error:", error);
+          .catch(() => {
+            showNotification({
+              show: true,
+              text: "Error",
+              type: "error"
+            });
+            return false;
           });
       })
       .catch((error) => {
@@ -74,15 +80,6 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
       });
   };
 
-  const toTheReport = async () => {
-    const success = await handleSubmit();
-    if (success) {
-      navigate(
-        `/profile/calendar/view/${additionalData.created_at}/${additionalData.user_id}`
-      );
-    }
-  };
-
   const handleInputChange = (e) => {
     const value = Number(e.target.value);
     if (value !== 0) {
@@ -101,25 +98,27 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
       >
         <div className="modal-report-close" onClick={onClose}></div>
         <h2>Выгрузка в отчет</h2>
-        <div className="modal-report-date-picker">
-          <label htmlFor="date-picker">Дата отчета:</label>
-          <DatePicker
-            id="date-picker"
-            className="datePicker"
-            locale="ru"
-            selected={date}
-            onChange={(date) => setDate(date)}
-            dateFormat="dd/MM/yyyy"
-          />
+        <div className="modal-report-form">
+          <div className="modal-report-date-picker">
+            <label htmlFor="date-picker">Дата отчета:</label>
+            <DatePicker
+              id="date-picker"
+              className="datePicker"
+              locale="ru"
+              selected={date}
+              onChange={(date) => setDate(date)}
+              dateFormat="dd/MM/yyyy"
+            />
+          </div>
+          <label className="modal-report-input-time">
+            Время выполнения:
+            <input
+              type="number"
+              value={inputValue}
+              onChange={handleInputChange}
+            />
+          </label>
         </div>
-        <label className="modal-report-input-time">
-          Время выполнения:
-          <input
-            type="number"
-            value={inputValue}
-            onChange={handleInputChange}
-          />
-        </label>
 
         <div className="modal-report__buttons">
           <BaseButton
@@ -128,12 +127,6 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
           >
             Выгрузить в отчет
           </BaseButton>
-          <BaseButton
-            styles={`button-add add-person-btn ${show ? "" : "disable"}`}
-            onClick={toTheReport}
-          >
-            Выгрузить и перейти в отчет
-          </BaseButton>
         </div>
       </div>
     </div>
diff --git a/src/components/Modal/Tracker/ModalTicketToReport/modalTicketToReport.scss b/src/components/Modal/Tracker/ModalTicketToReport/modalTicketToReport.scss
index dca48573..f53032b3 100644
--- a/src/components/Modal/Tracker/ModalTicketToReport/modalTicketToReport.scss
+++ b/src/components/Modal/Tracker/ModalTicketToReport/modalTicketToReport.scss
@@ -22,12 +22,15 @@
     padding: 20px;
     border-radius: 5px;
     position: relative;
-    max-width: 600px;
-    height: 500px;
-    width: 100%;
+    width: 450px;
+    height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
+    @media (max-width: 880px) {
+      width: 300px;
+    }
   }
 
   &-close {
@@ -59,17 +62,24 @@
     }
   }
 
-  &-date-picker {
-    // .datePicker {
-    //   visibility: hidden;
-    //   height: 0;
-    //   padding: 0;
-    //   width: 0;
-    //   position: absolute;
-    // }
+  &-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 40px;
 
-    .react-datepicker-wrapper {
-      //   position: absolute;
+    @media (max-width: 880px) {
+      flex-direction: column;
+      row-gap: 20px;
+    }
+  }
+
+  &-date-picker {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      margin: 0;
     }
 
     .react-datepicker {
@@ -78,14 +88,7 @@
     }
 
     .react-datepicker-popper {
-      top: -90px !important;
-      left: 250px !important;
       z-index: 10;
-
-      @media (max-width: 880px) {
-        left: 0 !important;
-        top: -15px !important;
-      }
     }
 
     .react-datepicker__current-month {
@@ -155,7 +158,7 @@
   &-input-time {
     display: flex;
     flex-direction: column;
-    width: 30%;
+    margin: 0;
   }
 
   &__buttons {