tasks edit

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
 import TrackerModal from "../TrackerModal/TrackerModal";
 import { apiRequest } from "../../../api/request";
@@ -32,6 +32,8 @@ export const ModalTiсket = ({
 }) => {
   const dispatch = useDispatch();
   const [addSubtask, setAddSubtask] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description})
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -46,6 +48,19 @@ export const ModalTiсket = ({
     });
   }
 
+  function editTask() {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: task.id,
+        title: inputsValue.title,
+        description: inputsValue.description
+      },
+    }).then((res) => {
+      dispatch(setProjectBoardFetch(projectId));
+    });
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -69,11 +84,14 @@ export const ModalTiсket = ({
 
           <div className="content__task">
             <span>Задача</span>
-            <h5>{task.title}</h5>
+            {editOpen ? <input value={inputsValue.title} onChange={(e) => {
+              setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
+            }} /> :<h5>{inputsValue.title}</h5>}
             <div className="content__description">
-              <p>{task.description}</p>
+              {editOpen ? <input value={inputsValue.description} onChange={(e) => {
+                setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
+              }}/> :<p>{inputsValue.description}</p>}
               <img src={taskImg} className="image-task"></img>
-              <p>{task.description}</p>
             </div>
             <div className="content__communication">
               <p className="tasks">
@@ -138,15 +156,22 @@ export const ModalTiсket = ({
           </div>
 
           <div className="workers_box-bottom">
-            <div>
+            <div className={editOpen ? 'edit' : ''} onClick={() => {
+              if(editOpen) {
+                setEditOpen(!editOpen)
+                editTask()
+              } else {
+                setEditOpen(!editOpen)
+              }
+            }}>
               <img src={edit}></img>
-              <p>редактировать</p>
+              <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
             </div>
             <div>
               <img src={link}></img>
               <p>ссылка на проект</p>
             </div>
-            <div>
+            <div onClick={deleteTask}>
               <img src={archive}></img>
               <p>в архив</p>
             </div>

src/components/UI/ModalTicket/ModalTicket.scss

@@ -6,14 +6,13 @@
   position: fixed;
   top: 0;
   left: 0;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
-  transform: scale(0);
 }
 
 .modal-tiket.active {
-  transform: scale(1);
+  display: flex;
 }
 
 .modal-tiket__content {
@@ -50,6 +49,16 @@
     &__task {
       margin-top: -5px;
       padding: 18px;
+      display: flex;
+      flex-direction: column;
+
+      input {
+        font-style: normal;
+        font-size: 16px;
+        line-height: 24px;
+        max-width: 340px;
+        outline: none;
+      }
 
       button {
         img {
@@ -64,10 +73,14 @@
         font-size: 16px;
         line-height: 24px;
         color: #1a1919;
+        margin-bottom: 0;
       }
     }
 
     &__description {
+      display: flex;
+      flex-direction: column;
+      margin-top: 10px;
       p {
         font-weight: 400;
         font-size: 14px;
@@ -77,7 +90,8 @@
       }
 
       .image-task {
-        margin: 0 0 20px 0;
+        margin: 10px 0 20px 0;
+        max-width: 330px;
       }
     }
 
@@ -313,11 +327,21 @@
           display: flex;
           cursor: pointer;
           align-items: center;
+          padding-left: 10px;
 
           p {
             margin: 0 0 0 12px;
           }
         }
+
+        .edit {
+          background: #52b709;
+          border-radius: 50px;
+
+          p {
+            font-weight: 700;
+          }
+        }
       }
     }
   }