Finished fixed modal

2023-05-05 16:10:25 +03:00 · 2023-05-05 16:10:25 +03:00 · ce939e6322
commit ce939e6322
parent f32a8f64e5
10 changed files with 183 additions and 182 deletions
--- a/src/components/ProjectTiket/ProjectTiket.jsx
+++ b/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">
--- a/src/components/UI/ModalAspt/ModalAspt.jsx
+++ b/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>
  );
 };
--- a/src/components/UI/ModalLayout/ModalLayout.jsx
+++ b/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;
--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ b/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>
  );
 };
--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ b/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}>
-                <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>
+              <TrackerModal
+                active={modalAddWorker}
+                setActive={setModalAddWorker}
+              ></TrackerModal>

              <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>
--- a/src/components/UI/TrackerModal/TrackerModal.jsx
+++ b/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;
--- a/src/components/UI/TrackerModal/trackerModal.scss
+++ b/src/components/UI/TrackerModal/trackerModal.scss
--- a/src/pages/PartnerBid/PartnerBid.jsx
+++ b/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
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/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,97 +191,95 @@ export const ProjectTracker = () => {
          </Link>
        </div>
        <div className="tracker__tabs__content">
-          {loader &&
-            <Loader style='green' />
-          }
-          {!loader &&
-          <div className="tracker__tabs__content__tasks tasks active__content">
-            <div className="tasks__head">
-              <div className="tasks__head__wrapper">
-                <h4>Проект : {projectBoard.name}</h4>
+          {loader && <Loader style="green" />}
+          {!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
+                  <div className="tasks__head__add">
+                    <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
+                    >
+                      +
+                    </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={() => {
                        dispatch(modalToggle("addWorker"));
                        setModalAdd(true);
                      }}
-                  >
-                    +
-                  </span>
-                  <p>добавить участника</p>
+                    >
+                      +
+                    </span>
+                    <p>добавить участника</p>
+                  </div>
+                  <div className="tasks__head__select">
+                    <span>Участвую</span>
+                    <img src={selectArrow} alt="arrow" />
+                  </div>
+                  <div className="tasks__head__select">
+                    <span>Мои</span>
+                    <img src={selectArrow} alt="arrow" />
+                  </div>
+                  <Link to="/profile/tracker" className="tasks__head__back">
+                    <p>Вернуться на проекты</p>
+                    <img src={arrow} alt="arrow" />
+                  </Link>
                </div>
-                <div className="tasks__head__select">
-                  <span>Участвую</span>
-                  <img src={selectArrow} alt="arrow" />
-                </div>
-                <div className="tasks__head__select">
-                  <span>Мои</span>
-                  <img src={selectArrow} alt="arrow" />
-                </div>
-                <Link to="/profile/tracker" className="tasks__head__back">
-                  <p>Вернуться на проекты</p>
-                  <img src={arrow} alt="arrow" />
-                </Link>
              </div>
-            </div>

-            <ModalTicket
+              <ModalTicket
                active={modalActiveTicket}
                setActive={setModalActiveTicket}
                task={selectedTicket}
                projectId={projectBoard.id}
                projectName={projectBoard.name}
-            />
+              />

-            <div className="tasks__container">
-              {Boolean(projectBoard?.columns) &&
-              Boolean(projectBoard.columns.length) &&
-              projectBoard.columns.map((column) => {
-                return (
-                    <div
+              <div className="tasks__container">
+                {Boolean(projectBoard?.columns) &&
+                  Boolean(projectBoard.columns.length) &&
+                  projectBoard.columns.map((column) => {
+                    return (
+                      <div
                        key={column.id}
                        onDragOver={(e) => dragOverHandler(e)}
                        onDragEnter={(e) => dragEnterHandler(column.id)}
                        onDrop={(e) => dragDropHandler(e, column.id)}
                        className={`tasks__board ${
-                            column.tasks.length >= 3 ? "tasks__board__more" : ""
+                          column.tasks.length >= 3 ? "tasks__board__more" : ""
                        } ${
-                            wrapperHover[column.id] ? "tasks__board__hover" : ""
+                          wrapperHover[column.id] ? "tasks__board__hover" : ""
                        }`}
-                    >
-                      <div className="board__head">
-                        {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
-                        <span>{column.title}</span>
-                        <div>
-                          <span
+                      >
+                        <div className="board__head">
+                          {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
+                          <span>{column.title}</span>
+                          <div>
+                            <span
                              className="add"
                              onClick={() => selectedTabTask(column.id)}
-                          >
-                            +
-                          </span>
-                          <span
+                            >
+                              +
+                            </span>
+                            <span
                              onClick={() => {
                                setOpenColumnSelect((prevState) => ({
                                  ...prevState,
@ -289,52 +287,52 @@ export const ProjectTracker = () => {
                                }));
                              }}
                              className="more"
-                          >
-                            ...
-                          </span>
+                            >
+                              ...
+                            </span>
+                          </div>
                        </div>
-                      </div>
-                      {openColumnSelect[column.id] && (
+                        {openColumnSelect[column.id] && (
                          <div className="column__select">
                            <div
-                                className="column__select__item"
-                                onClick={() => {
-                                  setOpenColumnSelect((prevState) => ({
-                                    ...prevState,
-                                    [column.id]: false,
-                                  }));
-                                  dispatch(modalToggle("editColumn"));
-                                  setModalAdd(true);
-                                }}
+                              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)}
+                              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) {
-                            return;
+                        )}
+                        {column.tasks.map((task, index) => {
+                          if (index > 2) {
+                            if (!column.open) {
+                              return;
+                            }
                          }
-                        }
-                        return (
+                          return (
                            <div
-                                key={task.id}
-                                className="tasks__board__item"
-                                draggable={true}
-                                onDragStart={(e) =>
-                                    dragStartHandler(e, task, column.id)
-                                }
-                                onDragEnd={(e) => dragEndHandler(e)}
-                                onClick={(e) => openTicket(e, task)}
+                              key={task.id}
+                              className="tasks__board__item"
+                              draggable={true}
+                              onDragStart={(e) =>
+                                dragStartHandler(e, task, column.id)
+                              }
+                              onDragEnd={(e) => dragEndHandler(e)}
+                              onClick={(e) => openTicket(e, task)}
                            >
                              <div className="tasks__board__item__title">
                                <p>{task.title}</p>
@ -357,32 +355,32 @@ export const ProjectTracker = () => {
                                {/*</div>*/}
                              </div>
                            </div>
-                        );
-                      })}
-                      {column.tasks.length > 3 && (
+                          );
+                        })}
+                        {column.tasks.length > 3 && (
                          <span
-                              className={
-                                column.open
-                                    ? "lessItems openItems"
-                                    : "moreItems openItems"
-                              }
-                              // onClick={() => toggleMoreTasks(column.id)}
+                            className={
+                              column.open
+                                ? "lessItems openItems"
+                                : "moreItems openItems"
+                            }
+                            // onClick={() => toggleMoreTasks(column.id)}
                          >
-                          {column.open ? "-" : "+"}
-                        </span>
-                      )}
+                            {column.open ? "-" : "+"}
+                          </span>
+                        )}
+                      </div>
+                    );
+                  })}
+                {Boolean(projectBoard?.columns) &&
+                  !Boolean(projectBoard.columns.length) && (
+                    <div className="tasks__board__noItems">
+                      В проекте нет задач.
                    </div>
-                );
-              })}
-              {Boolean(projectBoard?.columns) &&
-              !Boolean(projectBoard.columns.length) &&
-              <div className='tasks__board__noItems'>
-                В проекте нет задач.
+                  )}
              </div>
-              }
            </div>
-          </div>
-          }
+          )}
        </div>
      </div>
      <Footer />
--- a/src/pages/Tracker/Tracker.js
+++ b/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" />}