delete modal create, and fixed modal add

src/components/UI/ModalAdd/ModalAdd.jsx

@@ -5,23 +5,34 @@ import { apiRequest } from "../../../api/request";
 import {
   getProjectBoard,
   getValueModalType,
+  setProject,
   setProjectBoardFetch,
 } from "../../../redux/projectsTrackerSlice";
 
 import "./modalAdd.scss";
 
-export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
+export const ModalAdd = ({
+  active,
+  setActive,
+  selectedTab,
+  defautlInput,
+  titleProject,
+}) => {
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
 
   const modalType = useSelector(getValueModalType);
 
+  const [emailWorker, setEmailWorker] = useState("");
+  const [ProjectName, setProjectName] = useState(defautlInput);
+  const [valueColumn, setValueColumn] = useState("");
+  const [nameProject, setNameProject] = useState("");
+
   const [valueTiket, setValueTiket] = useState("");
-  const [valueColl, setValueColl] = useState("");
   const [descriptionTicket, setDescriptionTicket] = useState("");
 
   function createTab() {
-    if (!valueColl) {
+    if (!valueColumn) {
       return;
     }
 
@@ -29,12 +40,12 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
       method: "POST",
       data: {
         project_id: projectBoard.id,
-        title: valueColl,
+        title: valueColumn,
       },
     }).then((res) => {
       dispatch(setProjectBoardFetch(projectBoard.id));
     });
-    setValueColl("");
+    setValueColumn("");
     setActive(false);
   }
 
@@ -62,62 +73,64 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
     setDescriptionTicket("");
   }
 
-  function editProject() {
+  function editProject() {}
+
+  function editProjectName(value) {
+    setProjectName(value);
   }
 
-  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()}
-          >
+  function createProject() {
+    if (nameProject === "") {
+      return;
+    } else {
+      apiRequest("/project/create", {
+        method: "POST",
+        data: {
+          user_id: localStorage.getItem("id"),
+          name: nameProject,
+          status: 1,
+        },
+      }).then((res) => {
+        const result = { ...res, columns: [] };
+        dispatch(setProject(result));
+        setActive(false);
+        setNameProject("");
+      });
+    }
+  }
+
+  return (
+    <div
+      className={active ? "modal-add active" : "modal-add"}
+      onClick={() => setActive(false)}
+    >
+      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
+        {modalType === "addWorker" && (
+          <div>
             <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)}
+                  value={emailWorker}
+                  onChange={(e) => setEmailWorker(e.target.value)}
                 ></input>
               </div>
             </div>
-            <button className="button-add" onClick={(e) => e.preventDefault()}>
+            <button
+              className="button-add"
+              onClick={(e) => {
+                e.preventDefault();
+                setActive(false);
+              }}
+            >
               Добавить
             </button>
-            <span className="exit" onClick={() => setActive(false)}></span>
           </div>
-        );
-      case "createTiketProject":
-        return (
-          <div
-            className="modal-add__content"
-            onClick={(e) => e.stopPropagation()}
-          >
+        )}
+        {modalType === "createTiketProject" && (
+          <div>
             <div className="title-project">
               <h4>Введите название и описание задачи</h4>
               <div className="input-container">
@@ -140,37 +153,79 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
             <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()}
-          >
+        )}
+        {modalType === "editProject" && (
+          <div>
             <div className="title-project">
               <h4>Введите новое название</h4>
               <div className="input-container">
                 <input
                   className="name-project"
-                  value={defautlInput}
-                  onChange={(e) => setValueTiket(e.target.value)}
+                  value={ProjectName}
+                  onChange={(e) => editProjectName(e.target.value)}
                 ></input>
               </div>
             </div>
             <button className="button-add" onClick={editProject}>
               Сохранить
             </button>
-            <span className="exit" onClick={() => setActive(false)}></span>
           </div>
-        );
-      case "editColumn":
-        return (
-          <div
-            className="modal-add__content"
-            onClick={(e) => e.stopPropagation()}
-          >
+        )}
+        {modalType === "createProject" && (
+          <div>
+            <div className="title-project">
+              <h4>{titleProject}</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={nameProject}
+                  onChange={(e) => setNameProject(e.target.value)}
+                />
+              </div>
+              <button className="button-add" onClick={createProject}>
+                Создать
+              </button>
+            </div>
+          </div>
+        )}
+        {modalType === "addSubtask" && (
+          <div>
+            <div className="title-project subtask">
+              <h4>
+                Вы добавляете подзадачу{" "}
+                <p>в колонку(id) задачи "{defautlInput}"</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>
+          </div>
+        )}
+        {modalType === "createColumn" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите название колонки</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueColumn}
+                  onChange={(e) => setValueColumn(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={createTab}>
+              Создать
+            </button>
+          </div>
+        )}
+        {/* TODO: fix state */}
+        {modalType === "editColumn" && (
+          <div>
             <div className="title-project">
               <h4>Введите новое название</h4>
               <div className="input-container">
@@ -184,20 +239,11 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
             <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)}
-    >
-      {getModal()}
+        <span className="exit" onClick={() => setActive(false)}></span>
+      </div>
     </div>
   );
 };

src/components/UI/ModalAdd/modalAdd.scss

@@ -39,7 +39,7 @@
 
     h4 {
       font-weight: 500;
-      font-size: 17px;
+      font-size: 22px;
       line-height: 26px;
       color: #263238 !important;
     }

src/components/UI/ModalCreate/ModalCreate.jsx

@@ -1,60 +0,0 @@
-import React, { useState } from "react";
-import { useDispatch } from "react-redux";
-import { setProject } from "../../../redux/projectsTrackerSlice";
-import {apiRequest} from "../../../api/request";
-
-import "./ModalCreate.scss";
-
-export const ModalCreate = ({ active, setActive, title }) => {
-  const [inputValue, setInputValue] = useState("");
-  const dispatch = useDispatch();
-
-  function createName() {
-    if (inputValue === "") {
-      return;
-    } else {
-      apiRequest('/project/create', {
-        method: 'POST',
-        data: {
-          user_id: localStorage.getItem('id'),
-          name: inputValue,
-          status: 1,
-        }
-      }).then((res) => {
-        const result = {...res, columns: []}
-        dispatch(setProject(result));
-        setActive(false);
-        setInputValue("");
-      })
-    }
-  }
-
-  return (
-    <div
-      className={active ? "modal-project active" : "modal-project"}
-      onClick={() => setActive(false)}
-    >
-      <div
-        className="modal-project__content"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="title-project">
-          <h4>{title}</h4>
-          <div className="input-container">
-            <input
-              className="name-project"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-            />
-          </div>
-          <button className="create-project" onClick={createName}>
-            Создать
-          </button>
-        </div>
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
-    </div>
-  );
-};
-
-export default ModalCreate;

src/components/UI/ModalCreate/ModalCreate.scss

@@ -1,77 +0,0 @@
-.modal-project {
-  z-index: 9999;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.11);
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: scale(0);
-
-  &__content {
-    position: relative;
-    width: 424px;
-    height: 248px;
-    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-    border-radius: 40px;
-
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .title-project {
-      display: flex;
-      align-items: flex-start;
-      flex-direction: column;
-
-      .input-container {
-        width: 287px;
-        height: 35px;
-        background: #ffffff;
-        border-radius: 8px;
-      }
-
-      h4 {
-        font-weight: 500;
-        font-size: 22px;
-        line-height: 26px;
-        color: #263238;
-        margin-bottom: 22px;
-      }
-    }
-
-    .name-project {
-      margin-left: 10px;
-      border: none;
-      outline: none;
-      height: 100%;
-      width: 90%;
-      font-size: 14px;
-    }
-
-    .create-project {
-      margin: 30px 0 0 0;
-      width: 130px;
-      height: 37px;
-      background: #52b709;
-      border-radius: 44px;
-      border: none;
-      font-weight: 400;
-      font-size: 15px;
-      line-height: 32px;
-      color: #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-.modal-project.active {
-  transform: scale(1);
-}

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -3,7 +3,10 @@ import { Link } from "react-router-dom";
 import ModalAdd from "../ModalAdd/ModalAdd";
 import { apiRequest } from "../../../api/request";
 import { useDispatch } from "react-redux";
-import { setProjectBoardFetch } from "../../../redux/projectsTrackerSlice";
+import {
+  modalToggle,
+  setProjectBoardFetch,
+} from "../../../redux/projectsTrackerSlice";
 
 import category from "../../../images/category.png";
 import watch from "../../../images/watch.png";
@@ -56,7 +59,10 @@ export const ModalTiсket = ({
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
             Проект: {projectName}
-            <Link to={`/tracker/task/${task.id}`} className="title-project__full">
+            <Link
+              to={`/tracker/task/${task.id}`}
+              className="title-project__full"
+            >
               <img src={fullScreen}></img>
             </Link>
           </h3>
@@ -71,7 +77,12 @@ export const ModalTiсket = ({
             </div>
             <div className="content__communication">
               <p className="tasks">
-                <button onClick={() => setAddSubtask(true)}>
+                <button
+                  onClick={() => {
+                    dispatch(modalToggle("addSubtask"));
+                    setAddSubtask(true);
+                  }}
+                >
                   <img src={plus}></img>
                   Добавить под задачу
                 </button>
@@ -97,14 +108,15 @@ export const ModalTiсket = ({
             <span>{task.title}</span>
             <p className="workers__creator">Создатель : {task.user?.fio}</p>
             <div>
-              {Boolean(task.taskUsers?.length) && task.taskUsers.map((worker, index) => {
-                return (
-                  <div className="worker" key={index}>
-                    <img src={worker.avatar}></img>
-                    <p>{worker.name}</p>
-                  </div>
-                );
-              })}
+              {Boolean(task.taskUsers?.length) &&
+                task.taskUsers.map((worker, index) => {
+                  return (
+                    <div className="worker" key={index}>
+                      <img src={worker.avatar}></img>
+                      <p>{worker.name}</p>
+                    </div>
+                  );
+                })}
             </div>
 
             <div className="add-worker moreItems">
@@ -145,20 +157,12 @@ export const ModalTiсket = ({
           </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>
+
+      <ModalAdd
+        active={addSubtask}
+        setActive={setAddSubtask}
+        defautlInput={task.column_id}
+      ></ModalAdd>
     </div>
   );
 };