Finished project menu

src/components/ProjectTiket/ProjectTiket.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import ModalSettings from "../UI/ModalSettings/ModalSettings";
+
+import link from "../../images/link.svg";
+import archiveSet from "../../images/archive.svg";
+import del from "../../images/delete.svg";
+import edit from "../../images/edit.svg";
+
+import "./projectTiket.scss";
+
+export const ProjectTiket = ({ project, index, setOpenProject }) => {
+  const [modalSettings, setModalSettings] = useState(false);
+
+  useEffect(() => {
+    initListeners();
+  }, []);
+
+  function initListeners() {
+    document.addEventListener("click", closeByClickingOut);
+  }
+
+  function closeByClickingOut(event) {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+      event &&
+      !path.find((item) => item.classList && item.classList.contains("project"))
+    ) {
+      setModalSettings(false);
+    }
+  }
+
+  return (
+    <div className="project" key={index}>
+      <h3 onClick={() => setOpenProject(true)}>{project.name}</h3>
+      <div className="project__info">
+        <p>Открытые задачи</p>
+        <span className="count">{project.count}</span>
+        <span className="add">+</span>
+        <span className="menu-settings" onClick={() => setModalSettings(true)}>
+          ...
+        </span>
+      </div>
+
+      <ModalSettings active={modalSettings}>
+        <div className="project__settings-menu">
+          <div>
+            <img src={edit}></img>
+            <p>редактировать</p>
+          </div>
+          <div>
+            <img src={link}></img>
+            <p>ссылка на проект</p>
+          </div>
+          <div>
+            <img src={archiveSet}></img>
+            <p>в архив</p>
+          </div>
+          <div>
+            <img src={del}></img>
+            <p>удалить</p>
+          </div>
+        </div>
+      </ModalSettings>
+    </div>
+  );
+};
+
+export default ProjectTiket;

src/components/ProjectTiket/projectTiket.scss

@@ -0,0 +1,85 @@
+.project {
+  position: relative;
+  width: 48%;
+  background: #f1f1f1;
+  border-radius: 12px;
+  padding: 17px 26px 16px;
+  cursor: pointer;
+  max-width: 440px;
+
+  @media (max-width: 1068px) {
+    width: 47%;
+  }
+
+  @media (max-width: 785px) {
+    width: 100%;
+  }
+
+  @media (max-width: 430px) {
+    padding: 8px 13px 8px;
+  }
+
+  h3 {
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 32px;
+    color: #111112;
+    margin-bottom: 10px;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    @media (max-width: 430px) {
+      justify-content: space-between;
+    }
+
+    p {
+      color: #6f6f6f;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 24px;
+      margin-bottom: 0;
+    }
+
+    .count {
+      margin-left: 8px;
+      width: 21px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #dddddd;
+      border-radius: 4px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 24px;
+      color: #6f6f6f;
+    }
+
+    .add {
+      color: #6f6f6f;
+      font-size: 17px;
+      margin: 0 25px 0 auto;
+
+      @media (max-width: 430px) {
+        display: none;
+      }
+    }
+
+    .menu-settings {
+      position: absolute;
+      font-size: 21px;
+      color: #6f6f6f;
+      right: 0;
+      top: -35%;
+      z-index: 999;
+
+      @media (max-width: 430px) {
+        display: none;
+      }
+    }
+  }
+}

src/components/UI/ModalSettings/modalSettings.scss

@@ -25,5 +25,6 @@
 
   &__settings.active {
     transform: scale(1);
+    z-index: 99;
   }
 }

src/pages/Tracker/Tracker.js

@@ -10,6 +10,7 @@ import { getProjects } from "../../redux/projectsTrackerSlice";
 import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
 import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
 import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
+import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
 
 import project from "../../images/trackerProject.svg";
 import tasks from "../../images/trackerTasks.svg";
@@ -21,13 +22,8 @@ import filesBoard from "../../images/filesBoard.svg";
 import search from "../../images/serchIcon.png";
 import noProjects from "../../images/noProjects.png";
 import arrow from "../../images/arrowCalendar.png";
-import link from "../../images/link.svg";
-import archiveSet from "../../images/archive.svg";
-import del from "../../images/delete.svg";
-import edit from "../../images/edit.svg";
 
 import "./tracker.scss";
-import ModalSettings from "../../components/UI/ModalSettings/ModalSettings";
 
 export const Tracker = () => {
   const [toggleTab, setToggleTab] = useState(1);
@@ -367,7 +363,6 @@ export const Tracker = () => {
   const [modalCreateProject, setModalCreateProject] = useState(false);
   const [modalCreateColl, setModalCreateColl] = useState(false);
   const [modalCreateTiket, setModalCreateTiket] = useState(false);
-  const [modalSettings, setModalSettings] = useState(false);
   const [valueTiket, setValueTiket] = useState("");
   const [valueColl, setValueColl] = useState("");
   //
@@ -534,34 +529,6 @@ export const Tracker = () => {
     setModalCreateColl(false);
   }
 
-  function selectedProject(project) {
-    projects.filter((item) => {
-      if (item.name == project.name) {
-        console.log(project);
-        setModalSettings(true);
-      }
-    });
-  }
-
-  useEffect(() => {
-    initListeners();
-  }, []);
-
-  function initListeners() {
-    document.addEventListener("click", closeByClickingOut);
-  }
-
-  function closeByClickingOut(event) {
-    const path = event.path || (event.composedPath && event.composedPath());
-
-    if (
-      event &&
-      !path.find((item) => item.classList && item.classList.contains("project"))
-    ) {
-      setModalSettings(false);
-    }
-  }
-
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -618,43 +585,11 @@ export const Tracker = () => {
               !projectTasksOpen &&
               projects.map((project, index) => {
                 return (
-                  <div className="project" key={index}>
-                    <h3 onClick={() => setProjectTasksOpen(true)}>
-                      {project.name}
-                    </h3>
-                    <div className="project__info">
-                      <p>Открытые задачи</p>
-                      <span className="count">{project.count}</span>
-                      <span className="add">+</span>
-                      <span
-                        className="menu-settings"
-                        onClick={() => selectedProject(project)}
-                      >
-                        ...
-                      </span>
-                    </div>
-
-                    <ModalSettings active={modalSettings}>
-                      <div className="project__settings-menu">
-                        <div>
-                          <img src={edit}></img>
-                          <p>редактировать</p>
-                        </div>
-                        <div>
-                          <img src={link}></img>
-                          <p>ссылка на проект</p>
-                        </div>
-                        <div>
-                          <img src={archive}></img>
-                          <p>в архив</p>
-                        </div>
-                        <div>
-                          <img src={del}></img>
-                          <p>удалить</p>
-                        </div>
-                      </div>
-                    </ModalSettings>
-                  </div>
+                  <ProjectTiket
+                    key={index}
+                    project={project}
+                    setOpenProject={setProjectTasksOpen}
+                  ></ProjectTiket>
                 );
               })}
             {!Boolean(projects.length) && !projectTasksOpen && (

src/pages/Tracker/tracker.scss

@@ -120,92 +120,6 @@
           padding: 15px;
         }
 
-        .project {
-          position: relative;
-          width: 48%;
-          background: #f1f1f1;
-          border-radius: 12px;
-          padding: 17px 26px 16px;
-          cursor: pointer;
-          max-width: 440px;
-
-          @media (max-width: 1068px) {
-            width: 47%;
-          }
-
-          @media (max-width: 785px) {
-            width: 100%;
-          }
-
-          @media (max-width: 430px) {
-            padding: 8px 13px 8px;
-          }
-
-          h3 {
-            font-weight: 700;
-            font-size: 18px;
-            line-height: 32px;
-            color: #111112;
-            margin-bottom: 10px;
-          }
-
-          &__info {
-            display: flex;
-            align-items: center;
-            position: relative;
-
-            @media (max-width: 430px) {
-              justify-content: space-between;
-            }
-
-            p {
-              color: #6f6f6f;
-              font-weight: 500;
-              font-size: 12px;
-              line-height: 24px;
-              margin-bottom: 0;
-            }
-
-            .count {
-              margin-left: 8px;
-              width: 21px;
-              height: 24px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              background: #dddddd;
-              border-radius: 4px;
-              font-weight: 500;
-              font-size: 14px;
-              line-height: 24px;
-              color: #6f6f6f;
-            }
-
-            .add {
-              color: #6f6f6f;
-              font-size: 17px;
-              margin: 0 25px 0 auto;
-
-              @media (max-width: 430px) {
-                display: none;
-              }
-            }
-
-            .menu-settings {
-              position: absolute;
-              font-size: 21px;
-              color: #6f6f6f;
-              right: 0;
-              top: -35%;
-              z-index: 999;
-
-              @media (max-width: 430px) {
-                display: none;
-              }
-            }
-          }
-        }
-
         .no-projects {
           display: flex;
           flex-direction: column;