Added modal in project tiket

src/components/ProjectTiket/ProjectTiket.js

@@ -1,20 +1,22 @@
 import React, { useEffect, useState } from "react";
-import {Link} from "react-router-dom";
-import ModalSettings from "../UI/ModalSettings/ModalSettings";
+import { useDispatch } from "react-redux";
+import { Link } from "react-router-dom";
+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,34 @@ 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="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="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 +94,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>
   );
 };

src/components/UI/ModalAdd/ModalAdd.jsx

@@ -10,9 +10,7 @@ import {
 
 import "./modalAdd.scss";
 
-// НУЖНО ДОБАВИТЬ ВАРИАЦИИ ОТРИСОВКИ И ПЕРЕНЕТИ ЛОГИКУ В МОДАЛКУ
-
-export const ModalAdd = ({ active, setActive, selectedTab }) => {
+export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
 
@@ -142,6 +140,28 @@ export const ModalAdd = ({ active, setActive, selectedTab }) => {
             <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>
+        );
       default:
         return null;
     }

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 {

src/components/UI/ModalSelect/ModalSelect.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import "./modalSettings.scss";
+import "./modalSelect.scss";
 
-export const ModalSettings = ({ active, children }) => {
+export const ModalSelect = ({ active, children }) => {
   return (
     <div className={active ? "project__settings active" : "project__settings "}>
       {children}
@@ -10,4 +10,4 @@ export const ModalSettings = ({ active, children }) => {
   );
 };
 
-export default ModalSettings;
+export default ModalSelect;