src/components/Modal/Tracker/ListEmployees/ListEmployees.jsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+
+import {
+  deletePersonOnProject,
+  modalToggle
+} from "@redux/projectsTrackerSlice";
+
+import { caseOfNum, urlForLocal } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
+
+import close from "assets/icons/close.png";
+import avatarMok from "assets/images/avatarMok.png";
+
+import "./listEmployees.scss";
+
+const ListEmployees = ({
+  active,
+  setActiveListEmpl,
+  projectBoard,
+  setModalAdd
+}) => {
+  const dispatch = useDispatch();
+
+  function deletePerson(userId) {
+    apiRequest("/project/del-user", {
+      method: "DELETE",
+      data: {
+        project_id: projectBoard.id,
+        user_id: userId
+      }
+    }).then(() => {
+      dispatch(deletePersonOnProject(userId));
+    });
+  }
+
+  return (
+    <ModalLayout active={active} setActive={setActiveListEmpl}>
+      <div className="persons__list">
+        <img
+          className="persons__list__close"
+          src={close}
+          alt="close"
+          onClick={() => setActiveListEmpl(false)}
+        />
+        <div className="persons__list__count">
+          <span>{projectBoard.projectUsers?.length}</span>
+          {caseOfNum(projectBoard.projectUsers?.length, "persons")}
+        </div>
+        <div className="persons__list__info">
+          <span>В проекте - </span>
+          <p>“{projectBoard.name}”</p>
+        </div>
+        <div className="persons__list__items">
+          {projectBoard.projectUsers?.map((person) => {
+            return (
+              <div className="persons__list__item" key={person.user_id}>
+                <img
+                  className="avatar"
+                  src={
+                    person.user?.avatar
+                      ? urlForLocal(person.user.avatar)
+                      : avatarMok
+                  }
+                  alt="avatar"
+                />
+                <span>{person.user.fio}</span>
+                <img
+                  className="delete"
+                  src={close}
+                  alt="delete"
+                  onClick={() => deletePerson(person.user_id)}
+                />
+              </div>
+            );
+          })}
+        </div>
+        <div
+          className="persons__list__add"
+          onClick={() => {
+            dispatch(modalToggle("addWorker"));
+            setModalAdd(true);
+            setActiveListEmpl(false);
+          }}
+        >
+          <span className="addPerson">+</span>
+          <p>Добавить участников</p>
+        </div>
+      </div>
+    </ModalLayout>
+  );
+};
+
+export default ListEmployees;

src/components/Modal/Tracker/ListEmployees/listEmployees.scss

@@ -0,0 +1,254 @@
+.tasks {
+  &__head {
+    &__persons {
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      @media (max-width: 700px) {
+        right: -15px;
+      }
+
+      @media (max-width: 465px) {
+        width: 100%;
+      }
+
+      .projectPersons {
+        display: flex;
+        position: relative;
+        left: 5px;
+
+        img {
+          position: relative;
+          display: flex;
+          width: 32px;
+          height: 32px;
+        }
+
+        img:nth-child(1) {
+          left: -5px;
+        }
+
+        img:nth-child(2) {
+          left: -10px;
+        }
+        img:nth-child(3) {
+          left: -15px;
+        }
+      }
+
+      .onePerson {
+        display: flex;
+        position: relative;
+        left: -15px;
+
+        img {
+          position: relative;
+          display: flex;
+          width: 32px;
+          height: 32px;
+        }
+      }
+
+      span {
+        width: 32px;
+        height: 32px;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 16px;
+        border-radius: 50px;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        display: flex;
+      }
+
+      .countPersons {
+        color: #252c32;
+        border: 1px solid #dde2e4;
+        background: white;
+        left: -20px;
+      }
+
+      .addPerson {
+        background: #00c5a8;
+        color: white;
+        font-size: 14px;
+        transition: all 0.15s ease;
+        left: -28px;
+        z-index: 2;
+        cursor: pointer;
+
+        &:hover {
+          background: #10d5bb;
+        }
+      }
+
+      p {
+        position: relative;
+        left: -25px;
+        font-weight: 300;
+        font-size: 14px;
+        line-height: 17px;
+        max-width: 125px;
+      }
+
+      .persons__list {
+        position: absolute;
+        z-index: 8;
+        display: flex;
+        flex-direction: column;
+        background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
+        border-radius: 20px;
+        padding: 30px;
+        cursor: default;
+        width: 800px;
+
+        &__close {
+          cursor: pointer;
+          position: absolute;
+          right: 25px;
+          top: 25px;
+          margin-left: auto;
+          width: 35px;
+          height: 35px;
+        }
+
+        &__count {
+          display: flex;
+          align-items: end;
+          color: #1458dd;
+          font-size: 22px;
+          span {
+            font-size: 44px;
+            font-weight: 700;
+            line-height: 40px;
+            width: auto;
+            height: auto;
+            margin-right: 5px;
+          }
+        }
+
+        &__info {
+          display: flex;
+          margin: 11px 0 35px;
+          align-items: center;
+
+          span {
+            display: flex;
+            width: auto;
+            font-size: 18px;
+            line-height: 22px;
+            color: #263238;
+            font-weight: 500;
+            white-space: nowrap;
+          }
+
+          p {
+            color: #1458dd;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 22px;
+            display: flex;
+            max-width: 250px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin-left: 30px;
+          }
+        }
+
+        &__items {
+          display: flex;
+          flex-wrap: wrap;
+          row-gap: 32px;
+          column-gap: 85px;
+          margin-bottom: 38px;
+        }
+
+        &__item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          max-width: 300px;
+          width: 100%;
+
+          .avatar {
+            width: 38px;
+            height: 38px;
+            margin-right: 12px;
+          }
+
+          span {
+            display: block;
+            font-weight: 400;
+            font-size: 15px;
+            line-height: initial;
+            color: #807777;
+            width: auto;
+            height: auto;
+            max-width: 215px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .delete {
+            cursor: pointer;
+            width: 20px;
+            height: 20px;
+          }
+        }
+
+        &__add {
+          display: flex;
+          margin-left: 3px;
+          cursor: pointer;
+
+          span {
+            background: #8bcc60;
+            left: 0;
+          }
+
+          p {
+            margin-left: 17px;
+            color: #000000;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 32px;
+            position: initial;
+            max-width: none;
+          }
+        }
+
+        @media (max-width: 1000px) {
+          width: 390px;
+          padding: 30px;
+
+          .persons__list__info {
+            margin: 10px;
+          }
+
+          .persons__list__items {
+            flex-direction: column;
+            margin-bottom: 20px;
+            row-gap: 15px;
+
+            .persons__list__item {
+              max-width: none;
+              span {
+                max-width: none;
+                width: 100%;
+              }
+            }
+          }
+        }
+
+        @media (max-width: 440px) {
+          width: 290px;
+          padding: 15px 20px;
+        }
+      }
+    }
+  }
+}

src/pages/ProjectTracker/ProjectTracker.js

@@ -6,7 +6,6 @@ import { Link, useParams } from "react-router-dom";
 import {
   activeLoader,
   addNewTagToProject,
-  deletePersonOnProject,
   deleteTagProject,
   filterCreatedByMe,
   filteredExecutorTasks,
@@ -34,6 +33,7 @@ import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
+import ListEmployees from "@components/Modal/Tracker/ListEmployees/ListEmployees";
 import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
@@ -261,18 +261,6 @@ export const ProjectTracker = () => {
     });
   }
 
-  function deletePerson(userId) {
-    apiRequest("/project/del-user", {
-      method: "DELETE",
-      data: {
-        project_id: projectBoard.id,
-        user_id: userId
-      }
-    }).then(() => {
-      dispatch(deletePersonOnProject(userId));
-    });
-  }
-
   function filterParticipateTasks() {
     if (!checkBoxParticipateTasks) {
       dispatch(filteredParticipateTasks(Number(localStorage.getItem("id"))));
@@ -513,14 +501,7 @@ export const ProjectTracker = () => {
                     >
                       +
                     </BaseButton>
-                    {/* <span
+
-                      onClick={() => {
-                        dispatch(modalToggle("createColumn"));
-                        setModalAdd(true);
-                      }}
-                    >
-                      +
-                    </span> */}
                     <p>добавить колонку</p>
                   </div>
                   <div
@@ -565,65 +546,13 @@ export const ProjectTracker = () => {
                       +
                     </span>
                     <p>добавить участника</p>
-                    {personListOpen && (
+
-                      <div className="persons__list">
+                    <ListEmployees
-                        <img
+                      active={personListOpen}
-                          className="persons__list__close"
+                      setActiveListEmpl={setPersonListOpen}
-                          src={close}
+                      setModalAdd={setModalAdd}
-                          alt="close"
+                      projectBoard={projectBoard}
-                          onClick={() => setPersonListOpen(false)}
                     />
-                        <div className="persons__list__count">
-                          <span>{projectBoard.projectUsers?.length}</span>
-                          {caseOfNum(
-                            projectBoard.projectUsers?.length,
-                            "persons"
-                          )}
-                        </div>
-                        <div className="persons__list__info">
-                          <span>В проекте - </span>
-                          <p>“{projectBoard.name}”</p>
-                        </div>
-                        <div className="persons__list__items">
-                          {projectBoard.projectUsers?.map((person) => {
-                            return (
-                              <div
-                                className="persons__list__item"
-                                key={person.user_id}
-                              >
-                                <img
-                                  className="avatar"
-                                  src={
-                                    person.user?.avatar
-                                      ? urlForLocal(person.user.avatar)
-                                      : avatarMok
-                                  }
-                                  alt="avatar"
-                                />
-                                <span>{person.user.fio}</span>
-                                <img
-                                  className="delete"
-                                  src={close}
-                                  alt="delete"
-                                  onClick={() => deletePerson(person.user_id)}
-                                />
-                              </div>
-                            );
-                          })}
-                        </div>
-                        <div
-                          className="persons__list__add"
-                          onClick={() => {
-                            dispatch(modalToggle("addWorker"));
-                            setModalAdd(true);
-                            setPersonListOpen(false);
-                          }}
-                        >
-                          <span className="addPerson">+</span>
-                          <p>Добавить участников</p>
-                        </div>
-                      </div>
-                    )}
                   </div>
                   <div
                     className="tasks__head__checkBox"

src/pages/Tracker/tracker.scss

@@ -305,257 +305,6 @@
             }
           }
 
-          &__persons {
-            position: relative;
-            display: flex;
-            align-items: center;
-
-            @media (max-width: 700px) {
-              right: -15px;
-            }
-
-            @media (max-width: 465px) {
-              width: 100%;
-            }
-
-            .projectPersons {
-              display: flex;
-              position: relative;
-              left: 5px;
-
-              img {
-                position: relative;
-                display: flex;
-                width: 32px;
-                height: 32px;
-              }
-
-              img:nth-child(1) {
-                left: -5px;
-              }
-
-              img:nth-child(2) {
-                left: -10px;
-              }
-              img:nth-child(3) {
-                left: -15px;
-              }
-            }
-
-            .onePerson {
-              display: flex;
-              position: relative;
-              left: -15px;
-
-              img {
-                position: relative;
-                display: flex;
-                width: 32px;
-                height: 32px;
-              }
-            }
-
-            span {
-              width: 32px;
-              height: 32px;
-              font-weight: 500;
-              font-size: 12px;
-              line-height: 16px;
-              border-radius: 50px;
-              align-items: center;
-              justify-content: center;
-              position: relative;
-              display: flex;
-            }
-
-            .countPersons {
-              color: #252c32;
-              border: 1px solid #dde2e4;
-              background: white;
-              left: -20px;
-            }
-
-            .addPerson {
-              background: #00c5a8;
-              color: white;
-              font-size: 14px;
-              transition: all 0.15s ease;
-              left: -28px;
-              z-index: 2;
-              cursor: pointer;
-
-              &:hover {
-                background: #10d5bb;
-              }
-            }
-
-            p {
-              position: relative;
-              left: -25px;
-              font-weight: 300;
-              font-size: 14px;
-              line-height: 17px;
-              max-width: 125px;
-            }
-
-            .persons__list {
-              position: absolute;
-              z-index: 8;
-              display: flex;
-              flex-direction: column;
-              background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-              border-radius: 20px;
-              padding: 30px;
-              cursor: default;
-              width: 800px;
-
-              &__close {
-                cursor: pointer;
-                position: absolute;
-                right: 25px;
-                top: 25px;
-                margin-left: auto;
-                width: 35px;
-                height: 35px;
-              }
-
-              &__count {
-                display: flex;
-                align-items: end;
-                color: #1458dd;
-                font-size: 22px;
-                span {
-                  font-size: 44px;
-                  font-weight: 700;
-                  line-height: 40px;
-                  width: auto;
-                  height: auto;
-                  margin-right: 5px;
-                }
-              }
-
-              &__info {
-                display: flex;
-                margin: 11px 0 35px;
-                align-items: center;
-
-                span {
-                  display: flex;
-                  width: auto;
-                  font-size: 18px;
-                  line-height: 22px;
-                  color: #263238;
-                  font-weight: 500;
-                  white-space: nowrap;
-                }
-
-                p {
-                  color: #1458dd;
-                  font-weight: 600;
-                  font-size: 18px;
-                  line-height: 22px;
-                  display: flex;
-                  max-width: 250px;
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                  margin-left: 30px;
-                }
-              }
-
-              &__items {
-                display: flex;
-                flex-wrap: wrap;
-                row-gap: 32px;
-                column-gap: 85px;
-                margin-bottom: 38px;
-              }
-
-              &__item {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                max-width: 300px;
-                width: 100%;
-
-                .avatar {
-                  width: 38px;
-                  height: 38px;
-                  margin-right: 12px;
-                }
-
-                span {
-                  display: block;
-                  font-weight: 400;
-                  font-size: 15px;
-                  line-height: initial;
-                  color: #807777;
-                  width: auto;
-                  height: auto;
-                  max-width: 215px;
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                }
-
-                .delete {
-                  cursor: pointer;
-                  width: 20px;
-                  height: 20px;
-                }
-              }
-
-              &__add {
-                display: flex;
-                margin-left: 3px;
-                cursor: pointer;
-
-                span {
-                  background: #8bcc60;
-                  left: 0;
-                }
-
-                p {
-                  margin-left: 17px;
-                  color: #000000;
-                  font-weight: 400;
-                  font-size: 16px;
-                  line-height: 32px;
-                  position: initial;
-                  max-width: none;
-                }
-              }
-
-              @media (max-width: 1000px) {
-                width: 390px;
-                padding: 30px;
-
-                .persons__list__info {
-                  margin: 10px;
-                }
-
-                .persons__list__items {
-                  flex-direction: column;
-                  margin-bottom: 20px;
-                  row-gap: 15px;
-
-                  .persons__list__item {
-                    max-width: none;
-                    span {
-                      max-width: none;
-                      width: 100%;
-                    }
-                  }
-                }
-              }
-
-              @media (max-width: 440px) {
-                width: 290px;
-                padding: 15px 20px;
-              }
-            }
-          }
-
           .noProjectUsers {
             @media (max-width: 900px) {
               position: inherit;