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;
+          }
+        }
       }
     }
   }

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -6,9 +6,10 @@ import { Footer } from "../../Footer/Footer";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import TrackerModal from "../TrackerModal/TrackerModal";
 import { Navigation } from "../../Navigation/Navigation";
+import {Loader} from "../../Loader/Loader";
 
 import { useDispatch } from "react-redux";
-import { modalToggle, setToggleTab } from "../../../redux/projectsTrackerSlice";
+import {modalToggle, setToggleTab} from "../../../redux/projectsTrackerSlice";
 import { apiRequest } from "../../../api/request";
 
 import project from "../../../images/trackerProject.svg";
@@ -37,13 +38,18 @@ export const TicketFullScreen = ({}) => {
   const navigate = useNavigate();
   const [projectInfo, setProjectInfo] = useState({});
   const [taskInfo, setTaskInfo] = useState({});
+  const [editOpen, setEditOpen] = useState(false);
+  const [inputsValue, setInputsValue] = useState({})
+  const [loader, setLoader] = useState(true)
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
+      setInputsValue({title: taskInfo.title, description: taskInfo.description})
       apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then(
         (project) => {
           setProjectInfo(project);
+          setLoader(false)
         }
       );
     });
@@ -61,6 +67,18 @@ export const TicketFullScreen = ({}) => {
     });
   }
 
+  function editTask() {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: taskInfo.id,
+        title: inputsValue.title,
+        description: inputsValue.description
+      },
+    }).then((res) => {
+    });
+  }
+
   const toggleTabs = (index) => {
     dispatch(setToggleTab(index));
   };
@@ -107,6 +125,8 @@ export const TicketFullScreen = ({}) => {
             <p>Архив</p>
           </Link>
         </div>
+        {loader ? <Loader /> :
+        <>
         <div className="tracker__tabs__content content-tabs">
           <div className="tasks__head">
             <div className="tasks__head__wrapper">
@@ -153,11 +173,14 @@ export const TicketFullScreen = ({}) => {
           <div className="content ticket-whith">
             <div className="content__task">
               <span>Задача</span>
-              <h5>{taskInfo.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>{taskInfo.description}</p>
+                {editOpen ? <input value={inputsValue.description} onChange={(e) => {
+                  setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
+                }}/> :<p>{inputsValue.description}</p>}
                 <img src={task} className="image-task"></img>
-                <p>{taskInfo.description}</p>
               </div>
               <div className="content__communication">
                 <p className="tasks">
@@ -229,9 +252,16 @@ export const TicketFullScreen = ({}) => {
             </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>
@@ -248,6 +278,8 @@ export const TicketFullScreen = ({}) => {
             </div>
           </div>
         </div>
+        </>
+        }
       </div>
       <Footer />
     </section>

src/components/UI/TrackerModal/TrackerModal.jsx

@@ -3,12 +3,15 @@ import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { apiRequest } from "../../../api/request";
 import {
+  setColumnName,
   getProjectBoard,
   getValueModalType,
   setProject,
   setProjectBoardFetch,
   editProjectName,
-  getColumnTitle,
+  editColumnName,
+  getColumnName,
+  getColumnId
 } from "../../../redux/projectsTrackerSlice";
 
 import "./trackerModal.scss";
@@ -20,16 +23,16 @@ export const TrackerModal = ({
   defautlInput,
   titleProject,
   projectId,
-  titleColumn
 }) => {
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
+  const columnName = useSelector(getColumnName);
+  const columnId = useSelector(getColumnId)
 
   const modalType = useSelector(getValueModalType);
 
   const [emailWorker, setEmailWorker] = useState("");
   const [projectName, setProjectName] = useState(defautlInput);
-  const [editTitleColumn, setEditTitleColumn] = useState(titleColumn);
 
   const [valueColumn, setValueColumn] = useState("");
   const [nameProject, setNameProject] = useState("");
@@ -92,6 +95,19 @@ export const TrackerModal = ({
     });
   }
 
+  function changeColumnName() {
+    apiRequest("/project-column/update-column", {
+      method: "PUT",
+      data: {
+        column_id: columnId,
+        title: columnName
+      }
+    }).then((res) => {
+      setActive(false);
+      dispatch(editColumnName({id: columnId, title: columnName}))
+    })
+  }
+
   function createProject() {
     if (nameProject === "") {
       return;
@@ -243,12 +259,12 @@ export const TrackerModal = ({
               <div className="input-container">
                 <input
                   className="name-project"
-                  value={editTitleColumn}
+                  value={columnName}
-                  onChange={(e) => setEditTitleColumn(e.target.value)}
+                  onChange={(e) => dispatch(setColumnName(e.target.value))}
                 />
               </div>
             </div>
-            <button className="button-add" onClick={(e) => e.preventDefault()}>
+            <button className="button-add" onClick={changeColumnName}>
               Сохранить
             </button>
           </div>

src/pages/ProjectTracker/ProjectTracker.js

@@ -16,7 +16,8 @@ import {
   setProjectBoardFetch,
   setToggleTab,
   activeLoader,
-  setColumnTitle,
+  setColumnName,
+  setColumnId,
 } from "../../redux/projectsTrackerSlice";
 
 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@@ -217,9 +218,9 @@ export const ProjectTracker = () => {
                     <p>добавить колонку</p>
                   </div>
                   <div className="tasks__head__persons">
-                    <img src={avatarTest} alt="avatar" />
+                    {/*<img src={avatarTest} alt="avatar" />*/}
-                    <img src={avatarTest} alt="avatar" />
+                    {/*<img src={avatarTest} alt="avatar" />*/}
-                    <span className="countPersons">+9</span>
+                    <span className="countPersons">{projectBoard.projectUsers?.length}</span>
                     <span
                       className="addPerson"
                       onClick={() => {
@@ -246,13 +247,13 @@ export const ProjectTracker = () => {
                 </div>
               </div>
 
-              <ModalTicket
+              {Boolean(modalActiveTicket) && <ModalTicket
                   active={modalActiveTicket}
                   setActive={setModalActiveTicket}
                   task={selectedTicket}
                   projectId={projectBoard.id}
                   projectName={projectBoard.name}
-              />
+              />}
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
@@ -270,12 +271,6 @@ export const ProjectTracker = () => {
                           wrapperHover[column.id] ? "tasks__board__hover" : ""
                         }`}
                       >
-                        <TrackerModal
-                            active={modalAdd}
-                            setActive={setModalAdd}
-                            selectedTab={selectedTab}
-                            titleColumn={column.title}
-                        />
                         <div className="board__head">
                           {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
                           <span>{column.title}</span>
@@ -309,6 +304,8 @@ export const ProjectTracker = () => {
                                   [column.id]: false,
                                 }));
                                 dispatch(modalToggle("editColumn"));
+                                dispatch(setColumnName(column.title))
+                                dispatch(setColumnId(column.id))
                                 setModalAdd(true);
                               }}
                             >

src/pages/Tracker/Tracker.js

@@ -290,6 +290,8 @@ export const Tracker = () => {
                 </div>
               </div>
               <div className="archive__tasksWrapper">
+                {loader && <Loader style="green" />}
+                {!loader && <>
                 {Boolean(filterCompleteTasks.length) ? (
                   filterCompleteTasks.map((task, index) => {
                     return (
@@ -313,6 +315,8 @@ export const Tracker = () => {
                     <p>В архиве задач нет</p>
                   </div>
                 )}
+                </>
+                }
               </div>
             </div>
             <div className="archive__projects">

src/pages/Tracker/tracker.scss

@@ -289,7 +289,7 @@
               color: #252c32;
               border: 1px solid #dde2e4;
               background: white;
-              left: -25px;
+              left: -18px;
               z-index: 2;
             }
 
@@ -298,7 +298,7 @@
               color: white;
               font-size: 14px;
               left: -30px;
-              z-index: 1;
+              z-index: 2;
             }
 
             p {

src/redux/projectsTrackerSlice.js

@@ -7,6 +7,8 @@ const initialState = {
   toggleTab: 1,
   modalType: "",
   boardLoader: false,
+  columnName: "",
+  columnId: 0
 };
 
 export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@@ -55,6 +57,12 @@ export const projectsTrackerSlice = createSlice({
         }
       });
     },
+    setColumnName: (state, action) => {
+      state.columnName = action.payload
+    },
+    setColumnId: (state, action) => {
+      state.columnId = action.payload
+    },
     editProjectName: (state, action) => {
       state.projects.forEach((project) => {
         if (project.id === action.payload.id) {
@@ -62,6 +70,13 @@ export const projectsTrackerSlice = createSlice({
         }
       });
     },
+    editColumnName: (state, action) => {
+      state.projectBoard.columns.forEach((column) => {
+        if (column.id === action.payload.id) {
+          column.title = action.payload.title
+        }
+      })
+    },
     modalToggle: (state, action) => {
       state.modalType = action.payload;
     },
@@ -76,6 +91,7 @@ export const projectsTrackerSlice = createSlice({
 
 export const {
   setProject,
+  setColumnName,
   deleteProject,
   setAllProjects,
   moveProjectTask,
@@ -83,7 +99,8 @@ export const {
   modalToggle,
   activeLoader,
   editProjectName,
-  setColumnTitle,
+  editColumnName,
+  setColumnId
 } = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
@@ -91,5 +108,7 @@ export const getProjectBoard = (state) => state.tracker.projectBoard;
 export const getToggleTab = (state) => state.tracker.toggleTab;
 export const getValueModalType = (state) => state.tracker.modalType;
 export const getBoarderLoader = (state) => state.tracker.boardLoader;
+export const getColumnName = (state) => state.tracker.columnName;
+export const getColumnId = (state) => state.tracker.columnId;
 
 export default projectsTrackerSlice.reducer;