fix ModalTicket logic

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

@@ -122,15 +122,6 @@ export const ModalTiсket = ({
     setShowModalToReport(!showModalToReport);
   };
 
-  const closeModal = () => {
-    setActive(false);
-    const currentUrl = window.location.pathname;
-    const newUrl = currentUrl.replace(/\/task\/\d+$/, "");
-    window.history.replaceState({}, "", newUrl);
-    document.body.style.overflow = "auto";
-    console.log(task);
-  };
-
   const [isExpanded, setIsExpanded] = useState(false);
 
   const toggleModalSize = () => {
@@ -310,6 +301,17 @@ export const ModalTiсket = ({
     });
   }
 
+  const closeModal = () => {
+    if (timerStart) {
+      stopTaskTimer();
+    }
+    setActive(false);
+    const currentUrl = window.location.pathname;
+    const newUrl = currentUrl.replace(/\/task\/\d+$/, "");
+    window.history.replaceState({}, "", newUrl);
+    document.body.style.overflow = "auto";
+  };
+
   function taskExecutor(person) {
     apiRequest("/task/update-task", {
       method: "PUT",
@@ -380,7 +382,22 @@ export const ModalTiсket = ({
   }
 
   useEffect(() => {
+    if (active) {
+      setStartDate(task.dead_line ? new Date(task.dead_line) : new Date());
+      setTaskPriority(task.execution_priority);
+      setMembers(task.taskUsers);
+      setTaskTags(task.mark);
+      setExecutorId(task.executor_id);
+      setDeadLine(task.dead_line);
+      setExecutor(task.executor);
+      setInputsValue({
+        title: task.title,
+        description: task.description,
+        comment: ""
+      });
+
       initListeners();
+
       apiRequest(
         `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
       ).then((res) => {
@@ -396,8 +413,11 @@ export const ModalTiсket = ({
         }, []);
         setComments(comments);
       });
-    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
+
-      (res) => {
+      apiRequest(
+        `/timer/get-by-entity?entity_type=2&entity_id=${task.id}`
+      ).then((res) => {
+        if (Array.isArray(res)) {
           let timerSeconds = 0;
           res.length &&
             res.forEach((time) => {
@@ -410,30 +430,38 @@ export const ModalTiсket = ({
               updateTimerHours = Math.floor(timerSeconds / 60 / 60);
               updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
               updateTimerSec = timerSeconds % 60;
+
               if (!time.stopped_at) {
                 setTimerStart(true);
                 startTimer();
                 setTimerInfo(time);
               }
             });
+        } else {
+          setCurrentTimerCount({
+            hours: 0,
+            minute: 0,
+            seconds: 0
+          });
         }
-    );
+      });
 
       apiRequest(`/file/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
         (res) => {
           if (Array.isArray(res)) {
             setTaskFiles(res);
+          } else {
+            setTaskFiles([]);
           }
         }
       );
 
       if (
         localStorage.getItem("role_status") !== "18" &&
-      Boolean(
+        Array.isArray(correctProjectUsers) &&
         !correctProjectUsers.find(
           (item) => item.user_id === profileInfo.id_user
         )
-      )
       ) {
         setCorrectProjectUsers((prevState) => [
           ...prevState,
@@ -446,16 +474,19 @@ export const ModalTiсket = ({
           }
         ]);
       }
-  }, []);
+    }
+  }, [active]);
 
   useEffect(() => {
-    let tagIds = taskTags.map((tag) => tag.id);
+    if (Array.isArray(taskTags)) {
+      const tagIds = taskTags.map((tag) => tag.id);
       setCorrectProjectTags(
         projectMarks.reduce((acc, cur) => {
           if (!tagIds.includes(cur.id)) acc.push(cur);
           return acc;
         }, [])
       );
+    }
   }, [taskTags]);
 
   async function handleUpload(event) {
@@ -534,13 +565,15 @@ export const ModalTiсket = ({
   }
 
   useEffect(() => {
-    let ids = members.map((user) => user.user_id);
+    if (Array.isArray(members)) {
+      const ids = members.map((user) => user.user_id);
       setUsers(
         projectUsers.reduce((acc, cur) => {
           if (!ids.includes(cur.user_id)) acc.push(cur);
           return acc;
         }, [])
       );
+    }
   }, [members]);
 
   function copyTicketLink() {
@@ -717,7 +750,7 @@ export const ModalTiсket = ({
               )}
               {/*<img src={taskImg} className="image-task"></img>*/}
             </div>
-            {Boolean(taskFiles.length) && (
+            {Boolean(taskFiles?.length) && (
               <div className="task__files">
                 {taskFiles.map((file) => {
                   return (
@@ -877,7 +910,7 @@ export const ModalTiсket = ({
                 )}
               </div>
             )}
-            {Boolean(members.length) && (
+            {Boolean(members?.length) && (
               <div className="members">
                 <h5>Участники:</h5>
                 <div className="members__list">
@@ -1009,7 +1042,8 @@ export const ModalTiсket = ({
           <div className="workers_box-tag">
             <div className="tags">
               <div className="tags__selected">
-                {taskTags.map((tag) => {
+                {Array.isArray(taskTags) &&
+                  taskTags.map((tag) => {
                     return (
                       <div
                         className="tags__selected__item"

src/components/TrackerCardTask/TrackerCardTask.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 
 import { movePositionProjectTask } from "@redux/projectsTrackerSlice";
@@ -14,7 +14,9 @@ import avatarMok from "assets/images/avatarMok.webp";
 
 import "./trackerCardTask.scss";
 
-const TrackerCardTask = ({
+const TrackerCardTask = forwardRef(
+  (
+    {
       task,
       projectBoard,
       titleColor,
@@ -22,7 +24,9 @@ const TrackerCardTask = ({
       openTicket,
       startWrapperIndexTest,
       setWrapperHover
-}) => {
+    },
+    ref
+  ) => {
     const dispatch = useDispatch();
     const [taskHover, setTaskHover] = useState({});
 
@@ -94,6 +98,7 @@ const TrackerCardTask = ({
 
     return (
       <div
+        ref={ref}
         key={task.id}
         className={`tasks__board__item ${
           taskHover[task.id] ? "task__hover" : ""
@@ -104,7 +109,7 @@ const TrackerCardTask = ({
         onDragLeave={(e) => dragLeaveTaskHandler(e)}
         onDragEnd={() => dragEndTaskHandler()}
         onDrop={(e) => dragDropTaskHandler(e, task, column)}
-      onClick={(e) => openTicket(e, task)}
+        onClick={() => openTicket(task)}
       >
         <div className="tasks__board__item__title">
           <p className="task__board__item__title">{task.title}</p>
@@ -181,6 +186,9 @@ const TrackerCardTask = ({
         />
       </div>
     );
-};
+  }
+);
+
+TrackerCardTask.displayName = "TrackerCardTask";
 
 export default TrackerCardTask;

src/pages/ProjectTracker/ProjectTracker.jsx

@@ -1,7 +1,7 @@
 import moment from "moment";
 import React, { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Link, useParams } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 
 import {
   activeLoader,
@@ -51,6 +51,8 @@ import avatarMok from "assets/images/avatarMok.webp";
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
   const projectId = useParams();
+  const taskParams = useParams();
+  const taskRefs = useRef([]);
 
   const [openColumnSelect, setOpenColumnSelect] = useState({});
   const [selectedTab, setSelectedTab] = useState(0);
@@ -78,6 +80,29 @@ export const ProjectTracker = () => {
     initListeners();
   }, []);
 
+  useEffect(() => {
+    // const observer = new MutationObserver(() => {
+    //   if (taskParams.taskId && taskRefs.current[taskParams.taskId]) {
+    //     taskRefs.current[taskParams.taskId].click();
+    //     console.log(taskRefs.current[taskParams.taskId]);
+    //   }
+    // });
+
+    // observer.observe(document.body, { childList: true, subtree: true });
+
+    // return () => observer.disconnect();
+    if (projectBoard.columns && taskParams.taskId) {
+      for (const column of projectBoard.columns) {
+        const task = column.tasks.find((task) => task.id == taskParams.taskId);
+        if (task) {
+          openTicket(task);
+          return;
+        }
+      }
+      console.log(projectBoard);
+    }
+  }, [projectBoard]);
+
   useEffect(() => {
     let columnsTasksEmpty = true;
     if (Object.keys(projectBoard).length) {
@@ -145,21 +170,32 @@ export const ProjectTracker = () => {
     setPriorityTask(length);
   }
 
-  function openTicket(e, task) {
+  const updateUrlWithTaskId = (taskId) => {
+    const currentUrl = window.location.pathname;
+    const taskUrlSegment = `/task/`;
+
+    if (currentUrl.includes(taskUrlSegment)) {
+      // Если URL содержит '/task/', заменяем старый ID на новый
+      const baseUrl = currentUrl.substring(
+        0,
+        currentUrl.indexOf(taskUrlSegment) + taskUrlSegment.length
+      );
+      const newUrl = `${baseUrl}${taskId}`;
+      window.history.pushState({}, "", newUrl);
+    } else {
+      // Если URL не содержит '/task/', добавляем '/task/${taskId}'
+      const newUrl = `${currentUrl}${taskUrlSegment}${taskId}`;
+      window.history.pushState({}, "", newUrl);
+    }
+  };
+
+  function openTicket(task) {
     setSelectedTicket(task);
     setModalActiveTicket(true);
-    const currentUrl = window.location.pathname;
+    updateUrlWithTaskId(task.id);
-    const newUrl = `${currentUrl}/task/${task.id}`;
-    window.history.pushState({}, "", newUrl);
     document.body.style.overflow = "hidden";
   }
 
-  useEffect(() => {
-    const currentUrl = window.location.pathname;
-    const newUrl = currentUrl.replace(/\/task\/\d+$/, "");
-    window.history.replaceState({}, "", newUrl);
-  }, []);
-
   function deleteColumn(column) {
     const priorityColumns = [];
     apiRequest("/project-column/update-column", {
@@ -421,8 +457,6 @@ export const ProjectTracker = () => {
                   </Link>
                 </div>
               </div>
-
-              {Boolean(modalActiveTicket) && (
               <ModalTicket
                 active={modalActiveTicket}
                 setActive={setModalActiveTicket}
@@ -433,7 +467,6 @@ export const ProjectTracker = () => {
                 projectOwnerId={projectBoard.owner_id}
                 projectMarks={projectBoard.mark}
               />
-              )}
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
@@ -535,6 +568,9 @@ export const ProjectTracker = () => {
                                 startWrapperIndexTest={startWrapperIndexTest}
                                 task={task}
                                 titleColor={titleColor}
+                                ref={(el) => {
+                                  taskRefs.current[task.id] = el;
+                                }}
                               />
                             );
                           })}

src/pages/roles/DeveloperPage.jsx

@@ -24,6 +24,7 @@ export const DeveloperPage = () => {
   return (
     <Routes>
       <Route exact path="/tracker/task/:id" element={<TicketFullScreen />} />
+
       <Route
         exact
         path="/tracker/project/:id/task/:taskId"