fix ModalTicket logic

2024-07-25 18:17:39 +03:00 · 2024-07-25 18:17:39 +03:00 · ca0a509077
commit ca0a509077
parent 7e64150378
4 changed files with 364 additions and 285 deletions
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/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"
--- a/src/components/TrackerCardTask/TrackerCardTask.jsx
+++ b/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;
--- a/src/pages/ProjectTracker/ProjectTracker.jsx
+++ b/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;
-    const newUrl = `${currentUrl}/task/${task.id}`;
-    window.history.pushState({}, "", newUrl);
+    updateUrlWithTaskId(task.id);
    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;
+                                }}
                              />
                            );
                          })}
--- a/src/pages/roles/DeveloperPage.jsx
+++ b/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"