Merge pull request #83 from apuc/fix-modal-state

Fix modal state and modal window redesign
2023-05-04 18:42:33 +03:00 · 2023-05-04 18:42:33 +03:00 · 353825ada3
commit 353825ada3
parent f1d1fd7475 7667de9b8b
15 changed files with 651 additions and 488 deletions
--- a/src/components/ProjectTiket/ProjectTiket.jsx
+++ b/src/components/ProjectTiket/ProjectTiket.jsx
@ -1,20 +1,22 @@
 import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
-import ModalSettings from "../UI/ModalSettings/ModalSettings";
+import { apiRequest } from "../../api/request";
+import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice";
+
+import { ModalSelect } from "../UI/ModalSelect/ModalSelect";
+import ModalAdd from "../UI/ModalAdd/ModalAdd";

 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 {apiRequest} from "../../api/request";
-import {useDispatch} from "react-redux";
-import { deleteProject } from "../../redux/projectsTrackerSlice";
-
 import "./projectTiket.scss";

 export const ProjectTiket = ({ project, index }) => {
-  const [modalSettings, setModalSettings] = useState(false);
+  const [modalSelect, setModalSelect] = useState(false);
+  const [modalAdd, setModalAdd] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
@ -32,20 +34,20 @@ export const ProjectTiket = ({ project, index }) => {
      event &&
      !path.find((item) => item.classList && item.classList.contains("project"))
    ) {
-      setModalSettings(false);
+      setModalSelect(false);
    }
  }

  function removeProject() {
-    apiRequest('/project/update', {
-      method: 'PUT',
+    apiRequest("/project/update", {
+      method: "PUT",
      data: {
        project_id: project.id,
-        status: 0
-      }
+        status: 0,
+      },
    }).then((res) => {
-      dispatch(deleteProject(project))
-    })
+      dispatch(deleteProject(project));
+    });
  }

  return (
@ -53,16 +55,33 @@ export const ProjectTiket = ({ project, index }) => {
      <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
      <div className="project__info">
        <p>Открытые задачи</p>
-        <span className="count">{project.columns.reduce((accumulator, currentValue) => accumulator + currentValue.tasks.length, 0)}</span>
-        {/*<span className="add">{project.columns.length ? '+' : ''}</span>*/}
-        <span className="menu-settings" onClick={() => setModalSettings(true)}>
+        <span className="count">
+          {project.columns.reduce(
+            (accumulator, currentValue) =>
+              accumulator + currentValue.tasks.length,
+            0
+          )}
+        </span>
+        <span className="menu-settings" onClick={() => setModalSelect(true)}>
          ...
        </span>
      </div>

-      <ModalSettings active={modalSettings}>
+      <ModalAdd
+        active={modalAdd}
+        setActive={setModalAdd}
+        defautlInput={project.name}
+      ></ModalAdd>
+
+      <ModalSelect active={modalSelect}>
        <div className="project__settings-menu">
-          <div>
+          <div
+            onClick={() => {
+              dispatch(modalToggle("editProject"));
+              setModalAdd(true);
+              setModalSelect(false);
+            }}
+          >
            <img src={edit}></img>
            <p>редактировать</p>
          </div>
@ -74,13 +93,12 @@ export const ProjectTiket = ({ project, index }) => {
            <img src={archiveSet}></img>
            <p>в архив</p>
          </div>
-          <div
-            onClick={removeProject}>
+          <div onClick={removeProject}>
            <img src={del}></img>
            <p>удалить</p>
          </div>
        </div>
-      </ModalSettings>
+      </ModalSelect>
    </div>
  );
 };
--- a/src/components/ProjectTiket/projectTiket.scss
+++ b/src/components/ProjectTiket/projectTiket.scss
@ -83,7 +83,6 @@
      color: #6f6f6f;
      right: 0;
      top: -35%;
-      z-index: 999;

      @media (max-width: 430px) {
        display: none;
--- a/src/components/SliderWorkers/SliderWorkers.jsx
+++ b/src/components/SliderWorkers/SliderWorkers.jsx
--- a/src/components/UI/ModalAdd/ModalAdd.jsx
+++ b/src/components/UI/ModalAdd/ModalAdd.jsx
@ -1,17 +1,200 @@
-import React from "react";
+import React, { useState } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+import { apiRequest } from "../../../api/request";
+import {
+  getProjectBoard,
+  getValueModalType,
+  setProjectBoardFetch,
+} from "../../../redux/projectsTrackerSlice";

 import "./modalAdd.scss";

-export const ModalAdd = ({ children, active, setActive }) => {
+export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
+  const dispatch = useDispatch();
+  const projectBoard = useSelector(getProjectBoard);
+
+  const modalType = useSelector(getValueModalType);
+
+  const [valueTiket, setValueTiket] = useState("");
+  const [valueColl, setValueColl] = useState("");
+  const [descriptionTicket, setDescriptionTicket] = useState("");
+
+  function createTab() {
+    if (!valueColl) {
+      return;
+    }
+
+    apiRequest("/project-column/create-column", {
+      method: "POST",
+      data: {
+        project_id: projectBoard.id,
+        title: valueColl,
+      },
+    }).then((res) => {
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
+    setValueColl("");
+    setActive(false);
+  }
+
+  function createTiket() {
+    if (!valueTiket || !descriptionTicket) {
+      return;
+    }
+
+    apiRequest("/task/create-task", {
+      method: "POST",
+      data: {
+        project_id: projectBoard.id,
+        title: valueTiket,
+        description: descriptionTicket,
+        status: 1,
+        user_id: localStorage.getItem("id"),
+        column_id: selectedTab,
+      },
+    }).then((res) => {
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
+
+    setActive(false);
+    setValueTiket("");
+    setDescriptionTicket("");
+  }
+
+  function getModal() {
+    switch (modalType) {
+      case "createColumn":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите название колонки</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueColl}
+                  onChange={(e) => setValueColl(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={createTab}>
+              Создать
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      case "addWorker":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Добавьте участника</h4>
+              <p className="title-project__decs">Введите имя или e-mail </p>
+              <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>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      case "createTiketProject":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите название и описание задачи</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueTiket}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                  placeholder="Название задачи"
+                ></input>
+              </div>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={descriptionTicket}
+                  onChange={(e) => setDescriptionTicket(e.target.value)}
+                  placeholder="Описание задачи"
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={createTiket}>
+              Создать
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      case "editProject":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={defautlInput}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={(e) => e.preventDefault()}>
+              Сохранить
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      case "editColumn":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={defautlInput}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={(e) => e.preventDefault()}>
+              Сохранить
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
  return (
    <div
      className={active ? "modal-add active" : "modal-add"}
      onClick={() => setActive(false)}
    >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
-        {children}
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
+      {getModal()}
    </div>
  );
 };
--- a/src/components/UI/ModalAdd/modalAdd.scss
+++ b/src/components/UI/ModalAdd/modalAdd.scss
@ -48,7 +48,7 @@
      font-weight: 300;
      font-size: 12px;
      line-height: 14px;
-      margin: -13px 0 16px 0;
+      margin: 12px 0 16px 0;
    }

    &__textarea {
--- a/src/components/UI/ModalSelect/ModalSelect.jsx
+++ b/src/components/UI/ModalSelect/ModalSelect.jsx
@ -0,0 +1,14 @@
+import React from "react";
+
+import "./modalSelect.scss";
+
+export const ModalSelect = ({ active, children }) => {
+  return (
+    <div className={active ? "project__settings active" : "project__settings "}>
+      <span className="project__settings-ellipsis">...</span>
+      {children}
+    </div>
+  );
+};
+
+export default ModalSelect;
--- a/src/components/UI/ModalSettings/modalSettings.scss
+++ b/src/components/UI/ModalSettings/modalSettings.scss
@ -21,6 +21,14 @@
        }
      }
    }
+
+    &-ellipsis {
+      position: absolute;
+      top: -2px;
+      left: 10px;
+      font-size: 21px;
+      color: #6f6f6f;
+    }
  }

  &__settings.active {
--- a/src/components/UI/ModalSettings/ModalSettings.jsx
+++ b/src/components/UI/ModalSettings/ModalSettings.jsx
@ -1,13 +0,0 @@
-import React from "react";
-
-import "./modalSettings.scss";
-
-export const ModalSettings = ({ active, children }) => {
-  return (
-    <div className={active ? "project__settings active" : "project__settings "}>
-      {children}
-    </div>
-  );
-};
-
-export default ModalSettings;
--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
@ -5,6 +5,8 @@ import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"
 import { Footer } from "../../Footer/Footer";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import ModalAdd from "../ModalAdd/ModalAdd";
+import { Navigation } from "../../Navigation/Navigation";
+
 import { useDispatch } from "react-redux";
 import { setToggleTab } from "../../../redux/projectsTrackerSlice";
 import { apiRequest } from "../../../api/request";
@ -32,20 +34,22 @@ export const TicketFullScreen = ({}) => {
  const [addSubtask, setAddSubtask] = useState(false);
  const [modalAddWorker, setModalAddWorker] = useState(false);
  const [valueTiket, setValueTiket] = useState("");
-  const ticketId = useParams()
+  const ticketId = useParams();
  const dispatch = useDispatch();
  const navigate = useNavigate();
-  const [projectInfo, setProjectInfo] = useState({})
-  const [taskInfo, setTaskInfo] = useState({})
+  const [projectInfo, setProjectInfo] = useState({});
+  const [taskInfo, setTaskInfo] = useState({});

  useEffect(() => {
    apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
-      setTaskInfo(taskInfo)
-      apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then((project) => {
-        setProjectInfo(project)
-      })
-    })
-  }, [])
+      setTaskInfo(taskInfo);
+      apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then(
+        (project) => {
+          setProjectInfo(project);
+        }
+      );
+    });
+  }, []);

  function deleteTask() {
    apiRequest("/task/update-task", {
@ -55,7 +59,7 @@ export const TicketFullScreen = ({}) => {
        status: 0,
      },
    }).then((res) => {
-      navigate(`/tracker/project/${taskInfo.project_id}`)
+      navigate(`/tracker/project/${taskInfo.project_id}`);
    });
  }

@ -66,6 +70,7 @@ export const TicketFullScreen = ({}) => {
  return (
    <section className="ticket-full-screen">
      <ProfileHeader />
+      <Navigation />
      <div className="container">
        <div className="tracker__content">
          <ProfileBreadcrumbs
@ -80,7 +85,7 @@ export const TicketFullScreen = ({}) => {
      <div className="tracker__tabs">
        <div className="tracker__tabs__head">
          <Link
-            to='/profile/tracker'
+            to="/profile/tracker"
            className="tab active-tab"
            onClick={() => toggleTabs(1)}
          >
@ -88,7 +93,7 @@ export const TicketFullScreen = ({}) => {
            <p>Проекты </p>
          </Link>
          <Link
-            to='/profile/tracker'
+            to="/profile/tracker"
            className="tab"
            onClick={() => toggleTabs(2)}
          >
@ -96,7 +101,7 @@ export const TicketFullScreen = ({}) => {
            <p>Все мои задачи</p>
          </Link>
          <Link
-            to='/profile/tracker'
+            to="/profile/tracker"
            className="tab"
            onClick={() => toggleTabs(3)}
          >
@ -189,9 +194,12 @@ export const TicketFullScreen = ({}) => {
          </div>
          <div className="workers">
            <div className="workers_box">
-              <p className="workers__creator">Создатель :  <span>{taskInfo.user?.fio}</span></p>
+              <p className="workers__creator">
+                Создатель : <span>{taskInfo.user?.fio}</span>
+              </p>
              <div>
-                {Boolean(taskInfo.taskUsers?.length) && taskInfo.taskUsers.map((worker, index) => {
+                {Boolean(taskInfo.taskUsers?.length) &&
+                  taskInfo.taskUsers.map((worker, index) => {
                    return (
                      <div className="worker" key={index}>
                        <img src={worker.avatar}></img>
--- a/src/pages/AuthForCandidate/AuthForCandidate.jsx
+++ b/src/pages/AuthForCandidate/AuthForCandidate.jsx
--- a/src/pages/AuthForDevelopers/AuthForDevelopers.jsx
+++ b/src/pages/AuthForDevelopers/AuthForDevelopers.jsx
--- a/src/pages/PartnerBid/PartnerBid.jsx
+++ b/src/pages/PartnerBid/PartnerBid.jsx
--- a/src/pages/PartnerSettings/PartnerSettings.jsx
+++ b/src/pages/PartnerSettings/PartnerSettings.jsx
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@ -3,9 +3,17 @@ import {Link, useParams} from "react-router-dom";
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
+import { Navigation } from "../../components/Navigation/Navigation";

 import { useDispatch, useSelector } from "react-redux";
-import {getProjectBoard, moveProjectTask, setProjectBoardFetch, setToggleTab} from "../../redux/projectsTrackerSlice";
+import { apiRequest } from "../../api/request";
+import {
+  getProjectBoard,
+  modalToggle,
+  moveProjectTask,
+  setProjectBoardFetch,
+  setToggleTab,
+} from "../../redux/projectsTrackerSlice";

 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
 import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
@ -21,40 +29,35 @@ import arrow from "../../images/arrowCalendar.png";
 import del from "../../images/delete.svg";
 import edit from "../../images/edit.svg";

-import {apiRequest} from "../../api/request";
-import { Navigation } from "../../components/Navigation/Navigation";
-
 export const ProjectTracker = () => {
  const dispatch = useDispatch();
-    const projectId = useParams()
-    const [openColumnSelect, setOpenColumnSelect] = useState({})
+  const projectId = useParams();
+
+  const [openColumnSelect, setOpenColumnSelect] = useState({});
  const [selectedTab, setSelectedTab] = useState(0);
-    const startWrapperIndexTest = useRef({})
  const [wrapperHover, setWrapperHover] = useState({});
+  const [modalAdd, setModalAdd] = useState(false);
+  const [modalActiveTicket, setModalActiveTicket] = useState(false);
+  const [selectedTicket, setSelectedTicket] = useState({});
+
+  const startWrapperIndexTest = useRef({});
  const projectBoard = useSelector(getProjectBoard);
+
  useEffect(() => {
-        dispatch(setProjectBoardFetch(projectId.id))
-    }, [])
+    dispatch(setProjectBoardFetch(projectId.id));
+  }, []);

  useEffect(() => {
    if (Object.keys(projectBoard).length) {
-            projectBoard.columns.forEach(column => {
-                setOpenColumnSelect(prevState => ({...prevState, [column.id]: false}))
-                setWrapperHover(prevState => ({...prevState, [column.id]: false}))
-            })
+      projectBoard.columns.forEach((column) => {
+        setOpenColumnSelect((prevState) => ({
+          ...prevState,
+          [column.id]: false,
+        }));
+        setWrapperHover((prevState) => ({ ...prevState, [column.id]: false }));
+      });
    }
-    }, [projectBoard])
-
-    // Modal State
-    const [modalActiveTicket, setModalActiveTicket] = useState(false);
-    const [selectedTicket, setSelectedTicket] = useState({});
-    const [modalAddWorker, setModalAddWorker] = useState(false);
-    const [modalCreateColl, setModalCreateColl] = useState(false);
-    const [modalCreateTiket, setModalCreateTiket] = useState(false);
-    const [valueTiket, setValueTiket] = useState("");
-    const [descriptionTicket, setDescriptionTicket] = useState("")
-    const [valueColl, setValueColl] = useState("");
-    //
+  }, [projectBoard]);

  // function toggleMoreTasks(columnId) {
  //     setTabTaskMok((prevArray) =>
@ -76,10 +79,9 @@ export const ProjectTracker = () => {
  }

  function dragEndHandler(e) {
-        setWrapperHover(prevState => ({
-                [prevState]: false
-            })
-        );
+    setWrapperHover((prevState) => ({
+      [prevState]: false,
+    }));
    e.target.classList.remove("tasks__board__item__hide");
  }

@ -92,9 +94,10 @@ export const ProjectTracker = () => {
      return;
    }

-        setWrapperHover(prevState => ({
-            [prevState]: false, [columnId]: true
-        }))
+    setWrapperHover((prevState) => ({
+      [prevState]: false,
+      [columnId]: true,
+    }));
  }
  function dragDropHandler(e, columnId) {
    e.preventDefault();
@ -102,19 +105,24 @@ export const ProjectTracker = () => {
      return;
    }

-        setWrapperHover(prevState => ({
-                [prevState]: false
-            })
-        );
+    setWrapperHover((prevState) => ({
+      [prevState]: false,
+    }));

    if (columnId !== startWrapperIndexTest.current.index) {
-            dispatch(moveProjectTask({startWrapperIndex: startWrapperIndexTest.current, columnId}))
+      dispatch(
+        moveProjectTask({
+          startWrapperIndex: startWrapperIndexTest.current,
+          columnId,
+        })
+      );
    }
  }

  function selectedTabTask(columnId) {
    setSelectedTab(columnId);
-        setModalCreateTiket(true);
+    dispatch(modalToggle("createTiketProject"));
+    setModalAdd(true);
  }

  function openTicket(e, task) {
@ -122,59 +130,17 @@ export const ProjectTracker = () => {
    setModalActiveTicket(true);
  }

-    function createTiket() {
-        if (!valueTiket || !descriptionTicket) {
-            return
-        }
-
-        apiRequest('/task/create-task', {
-            method: 'POST',
-            data: {
-                project_id: projectBoard.id,
-                title: valueTiket,
-                description: descriptionTicket,
-                status: 1,
-                user_id: localStorage.getItem('id'),
-                column_id: selectedTab
-            }
-        }).then((res) => {
-            dispatch(setProjectBoardFetch(projectBoard.id))
-        })
-
-        setModalCreateTiket(false);
-        setValueTiket("");
-        setDescriptionTicket("")
-    }
-
-    function createTab() {
-        if (!valueColl) {
-            return
-        }
-
-        apiRequest('/project-column/create-column', {
-            method: 'POST',
-            data: {
-                project_id: projectBoard.id,
-                title: valueColl
-            }
-        }).then((res) => {
-            dispatch(setProjectBoardFetch(projectBoard.id))
-        })
-        setValueColl("");
-        setModalCreateColl(false);
-    }
-
  function deleteColumn(id) {
-        apiRequest('/project-column/update-column', {
-            method: 'PUT',
+    apiRequest("/project-column/update-column", {
+      method: "PUT",
      data: {
        column_id: id,
        project_id: projectBoard.id,
-                status: 0
-            }
+        status: 0,
+      },
    }).then((res) => {
-            dispatch(setProjectBoardFetch(projectBoard.id))
-        })
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
  }

  return (
@ -195,7 +161,7 @@ export const ProjectTracker = () => {
      <div className="tracker__tabs">
        <div className="tracker__tabs__head">
          <Link
-                        to='/profile/tracker'
+            to="/profile/tracker"
            className="tab active-tab tab"
            onClick={() => dispatch(setToggleTab(1))}
          >
@ -203,16 +169,16 @@ export const ProjectTracker = () => {
            <p>Проекты </p>
          </Link>
          <Link
-                        to='/profile/tracker'
-                        className='tab'
+            to="/profile/tracker"
+            className="tab"
            onClick={() => dispatch(setToggleTab(2))}
          >
            <img src={tasks} alt="img" />
            <p>Все мои задачи</p>
          </Link>
          <Link
-                        to='/profile/tracker'
-                        className='tab'
+            to="/profile/tracker"
+            className="tab"
            onClick={() => dispatch(setToggleTab(3))}
          >
            <img src={archive} alt="img" />
@ -220,63 +186,39 @@ export const ProjectTracker = () => {
          </Link>
        </div>
        <div className="tracker__tabs__content">
-                    <div
-                        className="tracker__tabs__content__tasks tasks active__content"
-                    >
+          <div className="tracker__tabs__content__tasks tasks active__content">
            <div className="tasks__head">
              <div className="tasks__head__wrapper">
                <h4>Проект : {projectBoard.name}</h4>

                <ModalAdd
-                                    active={modalCreateColl}
-                                    setActive={setModalCreateColl}
-                                >
-                                    <div className="title-project">
-                                        <h4>Введите название колонки</h4>
-                                        <div className="input-container">
-                                            <input
-                                                className="name-project"
-                                                value={valueColl}
-                                                onChange={(e) => setValueColl(e.target.value)}
-                                            ></input>
-                                        </div>
-                                    </div>
-                                    <button className="button-add" onClick={createTab}>
-                                        Создать
-                                    </button>
-                                </ModalAdd>
-
-                                <ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
-                                    <div className="title-project">
-                                        <h4>Добавьте участника</h4>
-                                        <p className="title-project__decs">
-                                            Введите имя или e-mail{" "}
-                                        </p>
-                                        <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>
+                  active={modalAdd}
+                  setActive={setModalAdd}
+                  selectedTab={selectedTab}
+                ></ModalAdd>

                <div className="tasks__head__add">
-                                    <span onClick={() => setModalCreateColl(true)}>+</span>
+                  <span
+                    onClick={() => {
+                      dispatch(modalToggle("createColumn"));
+                      setModalAdd(true);
+                    }}
+                  >
+                    +
+                  </span>
                  <p>добавить колонку</p>
                </div>
                <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"));
+                      setModalAdd(true);
+                    }}
+                  >
                    +
                  </span>
                  <p>добавить участника</p>
@ -289,10 +231,7 @@ export const ProjectTracker = () => {
                  <span>Мои</span>
                  <img src={selectArrow} alt="arrow" />
                </div>
-                                <Link
-                                    to='/profile/tracker'
-                                    className="tasks__head__back"
-                                >
+                <Link to="/profile/tracker" className="tasks__head__back">
                  <p>Вернуться на проекты</p>
                  <img src={arrow} alt="arrow" />
                </Link>
@ -307,33 +246,10 @@ export const ProjectTracker = () => {
              projectName={projectBoard.name}
            />

-                        <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
-                            <div className="title-project">
-                                <h4>Введите название и описание задачи</h4>
-                                <div className="input-container">
-                                    <input
-                                        className="name-project"
-                                        value={valueTiket}
-                                        onChange={(e) => setValueTiket(e.target.value)}
-                                        placeholder='Название задачи'
-                                    ></input>
-                                </div>
-                                <div className="input-container">
-                                    <input
-                                        className="name-project"
-                                        value={descriptionTicket}
-                                        onChange={(e) => setDescriptionTicket(e.target.value)}
-                                        placeholder='Описание задачи'
-                                    ></input>
-                                </div>
-                            </div>
-                            <button className="button-add" onClick={createTiket}>
-                                Создать
-                            </button>
-                        </ModalAdd>
-
            <div className="tasks__container">
-                            {Boolean(projectBoard?.columns) && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => {
+              {Boolean(projectBoard?.columns) &&
+                Boolean(projectBoard.columns.length) &&
+                projectBoard.columns.map((column) => {
                  return (
                    <div
                      key={column.id}
@ -348,9 +264,7 @@ export const ProjectTracker = () => {
                    >
                      <div className="board__head">
                        {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
-                                            <span>
-                                                {column.title}
-                                            </span>
+                        <span>{column.title}</span>
                        <div>
                          <span
                            className="add"
@ -358,25 +272,44 @@ export const ProjectTracker = () => {
                          >
                            +
                          </span>
-                                                <span onClick={() => {
-                                                    setOpenColumnSelect(prevState => ({...prevState, [column.id]: true}))
-                                                }} className="more">...</span>
+                          <span
+                            onClick={() => {
+                              setOpenColumnSelect((prevState) => ({
+                                ...prevState,
+                                [column.id]: true,
+                              }));
+                            }}
+                            className="more"
+                          >
+                            ...
+                          </span>
                        </div>
                      </div>
-                                        {openColumnSelect[column.id] &&
-                                            <div className='column__select'>
-                                                <div className='column__select__item' onClick={() => {
-                                                    setOpenColumnSelect(prevState => ({...prevState, [column.id]: false}))
-                                                }}>
-                                                    <img src={edit} alt='edit' />
+                      {openColumnSelect[column.id] && (
+                        <div className="column__select">
+                          <div
+                            className="column__select__item"
+                            onClick={() => {
+                              setOpenColumnSelect((prevState) => ({
+                                ...prevState,
+                                [column.id]: false,
+                              }));
+                              dispatch(modalToggle("editColumn"));
+                              setModalAdd(true);
+                            }}
+                          >
+                            <img src={edit} alt="edit" />
                            <span>Изменить</span>
                          </div>
-                                                <div className='column__select__item' onClick={() => deleteColumn(column.id)}>
-                                                    <img src={del} alt='delete' />
+                          <div
+                            className="column__select__item"
+                            onClick={() => deleteColumn(column.id)}
+                          >
+                            <img src={del} alt="delete" />
                            <span>Удалить</span>
                          </div>
                        </div>
-                                        }
+                      )}
                      {column.tasks.map((task, index) => {
                        if (index > 2) {
                          if (!column.open) {
--- a/src/redux/projectsTrackerSlice.js
+++ b/src/redux/projectsTrackerSlice.js
@ -4,12 +4,11 @@ import {apiRequest} from "../api/request";
 const initialState = {
  projects: [],
  projectBoard: {},
-  toggleTab: 1
+  toggleTab: 1,
+  modalType: "",
 };

-export const setProjectBoardFetch = createAsyncThunk(
-    'userInfo',
-    (id) =>
+export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
  apiRequest(`/project/get-project?project_id=${id}&expand=columns`)
 );

@ -18,47 +17,61 @@ export const projectsTrackerSlice = createSlice({
  initialState,
  reducers: {
    setAllProjects: (state, action) => {
-      state.projects = action.payload
+      state.projects = action.payload;
    },
    setProject: (state, action) => {
      state.projects.push(action.payload);
    },
    setToggleTab: (state, action) => {
-      state.toggleTab = action.payload
+      state.toggleTab = action.payload;
    },
    deleteProject: (state, action) => {
-      state.projects = state.projects.filter((project) => project.id !== action.payload.id)
+      state.projects = state.projects.filter(
+        (project) => project.id !== action.payload.id
+      );
    },
    moveProjectTask: (state, action) => {
      state.projectBoard.columns.forEach((column, index) => {
        if (column.id === action.payload.columnId) {
-          column.tasks.push(action.payload.startWrapperIndex.task)
+          column.tasks.push(action.payload.startWrapperIndex.task);
          apiRequest(`/task/update-task`, {
-            method: 'PUT',
+            method: "PUT",
            data: {
              task_id: action.payload.startWrapperIndex.task.id,
-              column_id: column.id
-            }
-          }).then((res) => {
-          })
+              column_id: column.id,
+            },
+          }).then((res) => {});
        }
        if (column.id === action.payload.startWrapperIndex.index) {
-          state.projectBoard.columns[index].tasks = column.tasks.filter((task)=> task.id !== action.payload.startWrapperIndex.task.id);
-        }
-      })
+          state.projectBoard.columns[index].tasks = column.tasks.filter(
+            (task) => task.id !== action.payload.startWrapperIndex.task.id
+          );
        }
+      });
+    },
+    modalToggle: (state, action) => {
+      state.modalType = action.payload;
+    },
  },
  extraReducers: {
    [setProjectBoardFetch.fulfilled]: (state, action) => {
-      state.projectBoard = action.payload
-    }
-  }
+      state.projectBoard = action.payload;
+    },
+  },
 });

-export const { setProject, deleteProject, setAllProjects, moveProjectTask, setToggleTab } = projectsTrackerSlice.actions;
+export const {
+  setProject,
+  deleteProject,
+  setAllProjects,
+  moveProjectTask,
+  setToggleTab,
+  modalToggle,
+} = projectsTrackerSlice.actions;

 export const getProjects = (state) => state.tracker.projects;
 export const getProjectBoard = (state) => state.tracker.projectBoard;
-export const getToggleTab = (state) => state.tracker.toggleTab
+export const getToggleTab = (state) => state.tracker.toggleTab;
+export const getValueModalType = (state) => state.tracker.modalType;

 export default projectsTrackerSlice.reducer;