Finished fixed modal

src/components/ProjectTiket/ProjectTiket.jsx

@@ -5,7 +5,7 @@ import { apiRequest } from "../../api/request";
 import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice";
 
 import { ModalSelect } from "../UI/ModalSelect/ModalSelect";
-import ModalAdd from "../UI/ModalAdd/ModalAdd";
+import TrackerModal from "../UI/TrackerModal/TrackerModal";
 
 import link from "../../images/link.svg";
 import archiveSet from "../../images/archive.svg";
@@ -67,11 +67,11 @@ export const ProjectTiket = ({ project, index }) => {
         </span>
       </div>
 
-      <ModalAdd
+      <TrackerModal
         active={modalAdd}
         setActive={setModalAdd}
         defautlInput={project.name}
-      ></ModalAdd>
+      ></TrackerModal>
 
       <ModalSelect active={modalSelect}>
         <div className="project__settings-menu">

src/components/UI/ModalAspt/ModalAspt.jsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 
+import { Link } from "react-router-dom";
+import ModalLayout from "../ModalLayout/ModalLayout";
+
 import avatar from "../../../images/mokPerson.png";
 import logoTg from "../../../images/TgLogo.svg";
 import arrow from "../../../images/right-arrow.png";
 import interview from "../../../images/interviewLogo.svg";
 
-import { Link } from "react-router-dom";
-import ModalAdd from "../ModalAdd/ModalAdd";
-
 import "./modalAspt.scss";
 
 export const ModalAspt = ({ active, setActive, level }) => {
@@ -82,7 +82,8 @@ export const ModalAspt = ({ active, setActive, level }) => {
         </div>
         <span className="exit" onClick={() => setActive(false)}></span>
       </div>
-      <ModalAdd active={modalSend} setActive={setModalSend}>
+
+      <ModalLayout active={modalSend} setActive={setModalSend}>
         <div className="send">
           <img src={interview}></img>
           <h2>Спасибо, собеседование назначено</h2>
@@ -93,7 +94,7 @@ export const ModalAspt = ({ active, setActive, level }) => {
             Время собеседования: <span>{time}</span>
           </p>
         </div>
-      </ModalAdd>
+      </ModalLayout>
     </div>
   );
 };

src/components/UI/ModalLayout/ModalLayout.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export const ModalLayout = ({ active, setActive, children }) => {
+  return (
+    <div
+      className={active ? "modal-add active" : "modal-add"}
+      onClick={() => setActive(false)}
+    >
+      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ModalLayout;

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import ModalAdd from "../ModalAdd/ModalAdd";
+import TrackerModal from "../TrackerModal/TrackerModal";
 import { apiRequest } from "../../../api/request";
 import { useDispatch } from "react-redux";
 import {
@@ -158,11 +158,11 @@ export const ModalTiсket = ({
         </div>
       </div>
 
-      <ModalAdd
+      <TrackerModal
         active={addSubtask}
         setActive={setAddSubtask}
         defautlInput={task.column_id}
-      ></ModalAdd>
+      ></TrackerModal>
     </div>
   );
 };

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -4,11 +4,11 @@ import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../Footer/Footer";
 import { Link, useParams, useNavigate } from "react-router-dom";
-import ModalAdd from "../ModalAdd/ModalAdd";
+import TrackerModal from "../TrackerModal/TrackerModal";
 import { Navigation } from "../../Navigation/Navigation";
 
 import { useDispatch } from "react-redux";
-import { setToggleTab } from "../../../redux/projectsTrackerSlice";
+import { modalToggle, setToggleTab } from "../../../redux/projectsTrackerSlice";
 import { apiRequest } from "../../../api/request";
 
 import project from "../../../images/trackerProject.svg";
@@ -31,9 +31,7 @@ import edit from "../../../images/edit.svg";
 import "./ticketFullScreen.scss";
 
 export const TicketFullScreen = ({}) => {
-  const [addSubtask, setAddSubtask] = useState(false);
   const [modalAddWorker, setModalAddWorker] = useState(false);
-  const [valueTiket, setValueTiket] = useState("");
   const ticketId = useParams();
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -114,31 +112,22 @@ export const TicketFullScreen = ({}) => {
             <div className="tasks__head__wrapper">
               <h4>Проект : {projectInfo.name}</h4>
 
-              <ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
+              <TrackerModal
-                <div className="title-project">
+                active={modalAddWorker}
-                  <h4>Добавьте участника</h4>
+                setActive={setModalAddWorker}
-                  <p className="title-project__decs">Введите имя или e-mail</p>
+              ></TrackerModal>
-                  <div className="input-container">
-                    <input
-                      className="name-project"
-                      value={valueTiket}
-                      onChange={(e) => setValueTiket(e.target.value)}
-                    ></input>
-                  </div>
-                </div>
-                <button
-                  className="button-add"
-                  onClick={(e) => e.preventDefault()}
-                >
-                  Добавить
-                </button>
-              </ModalAdd>
 
               <div className="tasks__head__persons">
                 <img src={avatarTest} alt="avatar" />
                 <img src={avatarTest} alt="avatar" />
                 <span className="countPersons">+9</span>
-                <span className="addPerson" onClick={setModalAddWorker}>
+                <span
+                  className="addPerson"
+                  onClick={() => {
+                    dispatch(modalToggle("addWorker"));
+                    setModalAddWorker(true);
+                  }}
+                >
                   +
                 </span>
                 <p>добавить участника в проект</p>
@@ -172,7 +161,12 @@ export const TicketFullScreen = ({}) => {
               </div>
               <div className="content__communication">
                 <p className="tasks">
-                  <button onClick={() => setAddSubtask(true)}>
+                  <button
+                    onClick={() => {
+                      dispatch(modalToggle("addSubtask"));
+                      setModalAddWorker(true);
+                    }}
+                  >
                     <img src={plus}></img>
                     Добавить под задачу
                   </button>
@@ -210,7 +204,14 @@ export const TicketFullScreen = ({}) => {
               </div>
 
               <div className="add-worker moreItems">
-                <button>+</button>
+                <button
+                  onClick={() => {
+                    dispatch(modalToggle("addWorker"));
+                    setModalAddWorker(true);
+                  }}
+                >
+                  +
+                </button>
                 <span>Добавить участников</span>
               </div>
             </div>
@@ -247,21 +248,6 @@ export const TicketFullScreen = ({}) => {
             </div>
           </div>
         </div>
-
-        <ModalAdd active={addSubtask} setActive={setAddSubtask}>
-          <div className="title-project subtask">
-            <h4>
-              Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
-            </h4>
-            <p className="title-project__decs">Введите текст</p>
-            <div>
-              <textarea className="title-project__textarea"></textarea>
-            </div>
-          </div>
-          <button className="button-add" onClick={(e) => e.preventDefault()}>
-            Добавить
-          </button>
-        </ModalAdd>
       </div>
       <Footer />
     </section>

src/components/UI/TrackerModal/TrackerModal.jsx

@@ -9,9 +9,9 @@ import {
   setProjectBoardFetch,
 } from "../../../redux/projectsTrackerSlice";
 
-import "./modalAdd.scss";
+import "./trackerModal.scss";
 
-export const ModalAdd = ({
+export const TrackerModal = ({
   active,
   setActive,
   selectedTab,
@@ -115,7 +115,7 @@ export const ModalAdd = ({
                   className="name-project"
                   value={emailWorker}
                   onChange={(e) => setEmailWorker(e.target.value)}
-                ></input>
+                />
               </div>
             </div>
             <button
@@ -139,7 +139,7 @@ export const ModalAdd = ({
                   value={valueTiket}
                   onChange={(e) => setValueTiket(e.target.value)}
                   placeholder="Название задачи"
-                ></input>
+                />
               </div>
               <div className="input-container">
                 <input
@@ -147,7 +147,7 @@ export const ModalAdd = ({
                   value={descriptionTicket}
                   onChange={(e) => setDescriptionTicket(e.target.value)}
                   placeholder="Описание задачи"
-                ></input>
+                />
               </div>
             </div>
             <button className="button-add" onClick={createTiket}>
@@ -164,7 +164,7 @@ export const ModalAdd = ({
                   className="name-project"
                   value={ProjectName}
                   onChange={(e) => editProjectName(e.target.value)}
-                ></input>
+                />
               </div>
             </div>
             <button className="button-add" onClick={editProject}>
@@ -215,7 +215,7 @@ export const ModalAdd = ({
                   className="name-project"
                   value={valueColumn}
                   onChange={(e) => setValueColumn(e.target.value)}
-                ></input>
+                />
               </div>
             </div>
             <button className="button-add" onClick={createTab}>
@@ -233,7 +233,7 @@ export const ModalAdd = ({
                   className="name-project"
                   value={defautlInput}
                   onChange={(e) => setValueTiket(e.target.value)}
-                ></input>
+                />
               </div>
             </div>
             <button className="button-add" onClick={(e) => e.preventDefault()}>
@@ -248,4 +248,4 @@ export const ModalAdd = ({
   );
 };
 
-export default ModalAdd;
+export default TrackerModal;

src/pages/PartnerBid/PartnerBid.jsx

@@ -13,7 +13,7 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
 import { Footer } from "../../components/Footer/Footer";
 import { Navigation } from "../../components/Navigation/Navigation";
 import { Loader } from "../../components/Loader/Loader";
-import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
+import ModalLayout from "../../components/UI/ModalLayout/ModalLayout";
 
 import { apiRequest } from "../../api/request";
 import { getCorrectDate } from "../../components/Calendar/calendarHelper";
@@ -76,7 +76,7 @@ export const PartnerBid = () => {
     <div className="partnerBid">
       <ProfileHeader />
       <Navigation />
-      <ModalAdd active={modalDelete} setActive={setModalDelete}>
+      <ModalLayout active={modalDelete} setActive={setModalDelete}>
         <div className="title-project modal-title-delete">
           <h4>Подтверждение удаления</h4>
           <p className="title-project__decs modal-decs">
@@ -99,7 +99,7 @@ export const PartnerBid = () => {
             </button>
           </div>
         </div>
-      </ModalAdd>
+      </ModalLayout>
 
       <div className="container">
         <ProfileBreadcrumbs

src/pages/ProjectTracker/ProjectTracker.js

@@ -15,11 +15,11 @@ import {
   moveProjectTask,
   setProjectBoardFetch,
   setToggleTab,
-  activeLoader
+  activeLoader,
 } from "../../redux/projectsTrackerSlice";
 
 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
-import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
+import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
 
 import project from "../../images/trackerProject.svg";
 import tasks from "../../images/trackerTasks.svg";
@@ -45,10 +45,10 @@ export const ProjectTracker = () => {
 
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
-  const loader = useSelector(getBoarderLoader)
+  const loader = useSelector(getBoarderLoader);
 
   useEffect(() => {
-    dispatch(activeLoader())
+    dispatch(activeLoader());
     dispatch(setProjectBoardFetch(projectId.id));
   }, []);
 
@@ -191,20 +191,18 @@ export const ProjectTracker = () => {
           </Link>
         </div>
         <div className="tracker__tabs__content">
-          {loader &&
+          {loader && <Loader style="green" />}
-            <Loader style='green' />
+          {!loader && (
-          }
-          {!loader &&
             <div className="tracker__tabs__content__tasks tasks active__content">
               <div className="tasks__head">
                 <div className="tasks__head__wrapper">
                   <h4>Проект : {projectBoard.name}</h4>
 
-                <ModalAdd
+                  <TrackerModal
                     active={modalAdd}
                     setActive={setModalAdd}
                     selectedTab={selectedTab}
-                ></ModalAdd>
+                  ></TrackerModal>
 
                   <div className="tasks__head__add">
                     <span
@@ -375,14 +373,14 @@ export const ProjectTracker = () => {
                     );
                   })}
                 {Boolean(projectBoard?.columns) &&
-              !Boolean(projectBoard.columns.length) &&
+                  !Boolean(projectBoard.columns.length) && (
-              <div className='tasks__board__noItems'>
+                    <div className="tasks__board__noItems">
                       В проекте нет задач.
                     </div>
-              }
+                  )}
               </div>
             </div>
-          }
+          )}
         </div>
       </div>
       <Footer />

src/pages/Tracker/Tracker.js

@@ -15,7 +15,7 @@ import {
   modalToggle,
 } from "../../redux/projectsTrackerSlice";
 
-import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
+import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
 import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
 import { urlForLocal } from "../../helper";
 import { getCorrectDate } from "../../components/Calendar/calendarHelper";
@@ -184,11 +184,11 @@ export const Tracker = () => {
                 : "tracker__tabs__content__projects tracker__tabs__content__wrapper"
             }
           >
-            <ModalAdd
+            <TrackerModal
               active={modalCreateProject}
               setActive={setModalCreateProject}
               titleProject={"Укажите название проекта:"}
-            ></ModalAdd>
+            ></TrackerModal>
 
             {loader && <Loader style="green" />}