src/components/TrackerSelectExecutor/TrackerSelectExecutor.jsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { filteredExecutorTasks } from "@redux/projectsTrackerSlice";
+
+import { removeLast, urlForLocal } from "@utils/helper";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+import close from "assets/icons/close.png";
+import avatarMok from "assets/images/avatarMok.png";
+
+import "./trackerSelectExecutor.scss";
+
+const TrackerSelectExecutor = ({
+  selectedExecutor,
+  setSelectedExecutor,
+  deleteSelectedExecutor,
+  projectBoard
+}) => {
+  const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("tasks__head__executor") ||
+            div.classList.contains("tasks__head__executor-dropdown"))
+      )
+    ) {
+      setSelectedExecutorOpen(false);
+    }
+  };
+
+  function executorFilter(user) {
+    dispatch(filteredExecutorTasks(user.user_id));
+    setSelectedExecutor(user);
+  }
+
+  useEffect(() => {
+    initListeners();
+  }, []);
+
+  if (selectedExecutor) {
+    return (
+      <div className="tasks__head__executor-selected">
+        <p>{removeLast(selectedExecutor.user.fio)}</p>
+        <img
+          className="avatar"
+          src={
+            selectedExecutor.user?.avatar
+              ? urlForLocal(selectedExecutor.user.avatar)
+              : avatarMok
+          }
+          alt="avatar"
+        />
+        <img
+          className="delete"
+          src={close}
+          alt="delete"
+          onClick={deleteSelectedExecutor}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div
+        className="tasks__head__executor"
+        onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}
+      >
+        <p>Выберите исполнителя</p>
+        <img
+          className={selectExecutorOpen ? "open" : ""}
+          src={arrowDown}
+          alt="arrow"
+        />
+        {selectExecutorOpen && (
+          <div className="tasks__head__executor-dropdown">
+            {projectBoard.projectUsers.map((user) => {
+              return (
+                <div
+                  className="executor-dropdown__person"
+                  key={user.user_id}
+                  onClick={() => executorFilter(user)}
+                >
+                  <p>{removeLast(user.user?.fio)}</p>
+                  <img
+                    src={
+                      user.user?.avatar
+                        ? urlForLocal(user.user.avatar)
+                        : avatarMok
+                    }
+                    alt="avatar"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+};
+
+export default TrackerSelectExecutor;

src/pages/ProjectTracker/ProjectTracker.jsx

@@ -40,6 +40,7 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
+import TrackerSelectExecutor from "@components/TrackerSelectExecutor/TrackerSelectExecutor";
 
 import arrow from "assets/icons/arrows/arrowRight.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
@@ -53,7 +54,6 @@ import trackerNoTasks from "assets/icons/trackerNoTasks.svg";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import accept from "assets/images/accept.png";
-import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
 
 import { getCorrectDate } from "../../utils/calendarHelper";
@@ -85,7 +85,6 @@ export const ProjectTracker = () => {
   const [filteredNoTasks, setFilteredNoTasks] = useState(false);
   const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
   const [selectedExecutor, setSelectedExecutor] = useState(null);
-  const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
   const loader = useSelector(getBoarderLoader);
@@ -288,11 +287,6 @@ export const ProjectTracker = () => {
     setCheckBoxMyTasks(!checkBoxMyTasks);
   }
 
-  function executorFilter(user) {
-    dispatch(filteredExecutorTasks(user.user_id));
-    setSelectedExecutor(user);
-  }
-
   function deleteSelectedExecutorFilter() {
     setSelectedExecutor(null);
     setCheckBoxParticipateTasks(false);
@@ -394,18 +388,6 @@ export const ProjectTracker = () => {
       setPersonListOpen(false);
     }
 
-    if (
-      event &&
-      !path.find(
-        (div) =>
-          div.classList &&
-          (div.classList.contains("tasks__head__executor") ||
-            div.classList.contains("tasks__head__executor-dropdown"))
-      )
-    ) {
-      setSelectedExecutorOpen(false);
-    }
-
     if (
       event &&
       !path.find(
@@ -577,63 +559,14 @@ export const ProjectTracker = () => {
                       {checkBoxMyTasks && <img src={accept} alt="accept" />}
                     </div>
                   </div>
-                  {selectedExecutor ? (
+
-                    <div className="tasks__head__executor-selected">
+                  <TrackerSelectExecutor
-                      <p>{removeLast(selectedExecutor.user.fio)}</p>
+                    deleteSelectedExecutor={deleteSelectedExecutorFilter}
-                      <img
+                    projectBoard={projectBoard}
-                        className="avatar"
+                    selectedExecutor={selectedExecutor}
-                        src={
+                    setSelectedExecutor={setSelectedExecutor}
-                          selectedExecutor.user?.avatar
-                            ? urlForLocal(selectedExecutor.user.avatar)
-                            : avatarMok
-                        }
-                        alt="avatar"
                   />
-                      <img
+
-                        className="delete"
-                        src={close}
-                        alt="delete"
-                        onClick={deleteSelectedExecutorFilter}
-                      />
-                    </div>
-                  ) : (
-                    <div
-                      className="tasks__head__executor"
-                      onClick={() =>
-                        setSelectedExecutorOpen(!selectExecutorOpen)
-                      }
-                    >
-                      <p>Выберите исполнителя</p>
-                      <img
-                        className={selectExecutorOpen ? "open" : ""}
-                        src={arrowDown}
-                        alt="arrow"
-                      />
-                      {selectExecutorOpen && (
-                        <div className="tasks__head__executor-dropdown">
-                          {projectBoard.projectUsers.map((user) => {
-                            return (
-                              <div
-                                className="executor-dropdown__person"
-                                key={user.user_id}
-                                onClick={() => executorFilter(user)}
-                              >
-                                <p>{removeLast(user.user?.fio)}</p>
-                                <img
-                                  src={
-                                    user.user?.avatar
-                                      ? urlForLocal(user.user.avatar)
-                                      : avatarMok
-                                  }
-                                  alt="avatar"
-                                />
-                              </div>
-                            );
-                          })}
-                        </div>
-                      )}
-                    </div>
-                  )}
                   <div className="tasks__head__tags">
                     <div
                       className="tags__add"