complete ModalTicketToReport

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -88,20 +88,19 @@ export const ModalTiсket = ({
     minute: 0,
     seconds: 0
   });
+
   const additionalData = {
-    difficulties: "",
+    user_id: task.executor_id,
     project_id: task.project_id,
-    status: task.status,
+    company_id: null,
-    tasks: [
+    task: {
-      {
+      hours_spent: currentTimerCount.hours,
-        hours_spent: currentTimerCount.hours,
+      minutes_spent: currentTimerCount.minute,
-        minutes_spent: currentTimerCount.minute,
+      id: task.id,
-        task: task.title
+      description: task.description
-      }
+    }
-    ],
-    tomorrow: "",
-    user_id: task.executor_id
   };
+
   const [timerId, setTimerId] = useState(null);
   const [taskFiles, setTaskFiles] = useState([]);
   const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
@@ -128,7 +127,6 @@ export const ModalTiсket = ({
     const currentUrl = window.location.pathname;
     const newUrl = currentUrl.replace(/\/task\/\d+$/, "");
     window.history.replaceState({}, "", newUrl);
-    // Восстанавливаем скролл при закрытии модального окна
     document.body.style.overflow = "auto";
     console.log(task);
   };

src/components/Modal/Tracker/ModalTicketToReport/ModalTicketToReport.jsx

@@ -1,33 +1,92 @@
-import axios from "axios";
 import { format } from "date-fns";
-import React, { useState } from "react";
+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";
 
+import { useNotification } from "@hooks/useNotification";
+
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 
 import "./modalTicketToReport.scss";
 
 const ModalTicketToReport = ({ show, onClose, additionalData }) => {
   const [date, setDate] = useState(new Date());
+  const [inputValue, setInputValue] = useState(0);
+  const [taskDescription, setTaskDescription] = useState("");
+
+  const navigate = useNavigate();
+  const { showNotification } = useNotification();
+
+  useEffect(() => {
+    if (additionalData.task.description) {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(
+        additionalData.task.description,
+        "text/html"
+      );
+      setTaskDescription(doc.body.textContent || "");
+    }
+  }, [additionalData.task.description]);
+
+  useEffect(() => {
+    const hoursSpent = additionalData.task.hours_spent;
+    setInputValue(hoursSpent);
+  }, [additionalData.task.hours_spent]);
 
   const handleSubmit = async () => {
     const formattedDate = format(date, "yyyy-MM-dd");
-    const data = {
-      created_at: formattedDate,
-      ...additionalData
-    };
-    console.log(data);
 
-    try {
+    apiRequest("https://back.itguild.info/api/reports/find-or-create", {
-      await apiRequest("https://back.itguild.info/api/reports/create", {
+      method: "GET",
-        method: "POST",
+      params: {
-        data: data
+        user_id: additionalData.user_id,
+        created_at: formattedDate,
+        project_id: additionalData.project_id,
+        company_id: additionalData.company_id
+      }
+    })
+      .then((res) => {
+        apiRequest("https://back.itguild.info/api/reports/add-task-to-report", {
+          method: "POST",
+          data: {
+            report_id: res[0].id,
+            tasks: taskDescription,
+            hours_spent: inputValue,
+            minutes_spent: additionalData.task.minutes_spent
+          }
+        })
+          .then(() => {
+            showNotification({
+              show: true,
+              text: "Отчет успешно создан",
+              type: "true"
+            });
+          })
+          .catch((error) => {
+            console.error("Error:", error);
+          });
+      })
+      .catch((error) => {
+        console.error("Error:", error);
       });
-    } catch (error) {
+  };
-      console.error("Error:", error);
+
+  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) {
+      setInputValue(value);
     }
   };
 
@@ -43,7 +102,9 @@ 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}
@@ -51,6 +112,14 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
             dateFormat="dd/MM/yyyy"
           />
         </div>
+        <label className="modal-report-input-time">
+          Время выполнения:
+          <input
+            type="number"
+            value={inputValue}
+            onChange={handleInputChange}
+          />
+        </label>
 
         <div className="modal-report__buttons">
           <BaseButton
@@ -61,7 +130,7 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
           </BaseButton>
           <BaseButton
             styles={`button-add add-person-btn ${show ? "" : "disable"}`}
-            onClick={handleSubmit}
+            onClick={toTheReport}
           >
             Выгрузить и перейти в отчет
           </BaseButton>

src/components/Modal/Tracker/ModalTicketToReport/modalTicketToReport.scss

@@ -22,7 +22,7 @@
     padding: 20px;
     border-radius: 5px;
     position: relative;
-    max-width: 500px;
+    max-width: 600px;
     height: 500px;
     width: 100%;
     display: flex;
@@ -78,8 +78,8 @@
     }
 
     .react-datepicker-popper {
-      top: -150px !important;
+      top: -90px !important;
-      left: 180px !important;
+      left: 250px !important;
       z-index: 10;
 
       @media (max-width: 880px) {
@@ -152,14 +152,20 @@
     }
   }
 
+  &-input-time {
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+  }
+
   &__buttons {
     display: flex;
     justify-content: center;
-    column-gap: 100px;
+    column-gap: 60px;
     margin: 30px 0;
 
     .button {
-      height: 47px;
+      width: 220px;
       font-size: 15px;
       line-height: 16px;
     }

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -49,6 +49,7 @@ import watch from "assets/icons/watch.svg";
 import archive from "assets/images/archiveIcon.webp";
 import avatarMok from "assets/images/avatarMok.webp";
 
+import ModalTicketToReport from "../ModalTicketToReport/ModalTicketToReport";
 import "./ticketFullScreen.scss";
 
 registerLocale("ru", ru);
@@ -71,6 +72,18 @@ export const TicketFullScreen = () => {
     minute: 0,
     seconds: 0
   });
+  const additionalData = {
+    user_id: taskInfo.executor_id,
+    project_id: taskInfo.project_id,
+    company_id: null,
+    task: {
+      hours_spent: currentTimerCount.hours,
+      minutes_spent: currentTimerCount.minute,
+      id: taskInfo.id,
+      description: taskInfo.description
+    }
+  };
+
   const profileInfo = useSelector(getProfileInfo);
   const [timerId, setTimerId] = useState(null);
   const [dropListOpen, setDropListOpen] = useState(false);
@@ -90,6 +103,15 @@ export const TicketFullScreen = () => {
   const [correctProjectTags, setCorrectProjectTags] = useState([]);
   const { showNotification } = useNotification();
   const [commentSendDisable, setCommentSendDisable] = useState(false);
+  const [showModalToReport, setShowModalToReport] = useState(false);
+
+  const openModalToReport = () => {
+    setShowModalToReport(!showModalToReport);
+  };
+
+  const closeModalToReport = () => {
+    setShowModalToReport(!showModalToReport);
+  };
 
   const priority = {
     2: "Высокий",
@@ -1096,7 +1118,7 @@ export const TicketFullScreen = () => {
                 </div>
                 <div className="workers_box-bottom">
                   <div
-                    className={editOpen ? "edit" : ""}
+                    className={`bottom-button ${editOpen ? "edit" : ""}`}
                     onClick={() => {
                       if (editOpen) {
                         editTask();
@@ -1108,30 +1130,39 @@ export const TicketFullScreen = () => {
                     <img src={edit} alt="edit"></img>
                     <p>{editOpen ? "сохранить" : "редактировать"}</p>
                   </div>
-                  <div>
+                  <div className="bottom-button">
                     <img src={link} alt="link"></img>
                     <p onClick={copyTicketLink}>ссылка на задачу</p>
                   </div>
+                  <div className="bottom-button">
+                    <img src={link}></img>
+                    <p onClick={openModalToReport}>выгрузка в отчет</p>
+                    <ModalTicketToReport
+                      show={showModalToReport}
+                      onClose={closeModalToReport}
+                      additionalData={additionalData}
+                    ></ModalTicketToReport>
+                  </div>
                   <div
                     onClick={archiveTask}
-                    className={
+                    className={`bottom-button ${
                       profileInfo.id_user === projectInfo.owner_id ||
                       profileInfo.id_user === taskInfo.user_id
                         ? ""
                         : "disable"
-                    }
+                    }`}
                   >
                     <img src={archive} alt="arch"></img>
                     <p>в архив</p>
                   </div>
                   <div
                     onClick={deleteTask}
-                    className={
+                    className={`bottom-button ${
                       profileInfo.id_user === projectInfo.owner_id ||
                       profileInfo.id_user === taskInfo.user_id
                         ? ""
                         : "disable"
-                    }
+                    }`}
                   >
                     <img src={del} alt="delete"></img>
                     <p>удалить</p>

src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss

@@ -18,6 +18,10 @@
 .ticket {
   border: none;
   justify-content: center;
+  margin: 20px auto;
+  padding: 30px;
+  max-height: none;
+  max-width: 1200px;
 
   &-whith {
     width: 850px !important;

src/pages/roles/DeveloperPage.jsx

@@ -15,12 +15,14 @@ import { Summary } from "@pages/Summary/Summary";
 import { Tracker } from "@pages/Tracker/Tracker";
 import { ViewReport } from "@pages/ViewReport/ViewReport";
 
+import TicketFullScreen from "@components/Modal/Tracker/TicketFullScreen/TicketFullScreen";
 import { ProfileCalendar } from "@components/ProfileCalendar/ProfileCalendar";
 import { ReportForm } from "@components/ReportForm/ReportForm";
 
 export const DeveloperPage = () => {
   return (
     <Routes>
+      <Route exact path="/tracker/task/:id" element={<TicketFullScreen />} />
       <Route
         exact
         path="/tracker/project/:id/task/:taskId"