tracker-connect

src/components/ProjectTiket/ProjectTiket.js

@@ -6,9 +6,9 @@ import archiveSet from "../../images/archive.svg";
 import del from "../../images/delete.svg";
 import edit from "../../images/edit.svg";
 
-// import {apiRequest} from "../../api/request";
+import {apiRequest} from "../../api/request";
 import {useDispatch} from "react-redux";
-import { setProjectBoardFetch } from "../../redux/projectsTrackerSlice";
+import { deleteProject, setProjectBoardFetch } from "../../redux/projectsTrackerSlice";
 
 import "./projectTiket.scss";
 
@@ -35,6 +35,18 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
     }
   }
 
+  function removeProject() {
+    apiRequest('/project/update', {
+      method: 'PUT',
+      data: {
+        project_id: project.id,
+        status: 0
+      }
+    }).then((res) => {
+      dispatch(deleteProject(project))
+    })
+  }
+
   return (
     <div className="project" key={index}>
       <h3 onClick={() =>{
@@ -52,7 +64,7 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
 
       <ModalSettings active={modalSettings}>
         <div className="project__settings-menu">
-          <div>
+          <div onClick={() => console.log(project)}>
             <img src={edit}></img>
             <p>редактировать</p>
           </div>
@@ -64,7 +76,8 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
             <img src={archiveSet}></img>
             <p>в архив</p>
           </div>
-          <div>
+          <div
+            onClick={removeProject}>
             <img src={del}></img>
             <p>удалить</p>
           </div>

src/components/UI/ModalTicket/ModalTicket.js

@@ -1,11 +1,16 @@
 import React, { useState } from "react";
+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 avatarMock1 from "../../../images/avatarMoсk1.png";
 import avatarMock2 from "../../../images/avatarMoсk2.png";
 import category from "../../../images/category.png";
 import watch from "../../../images/watch.png";
 import file from "../../../images/fileModal.svg";
-import task from "../../../images/tasksMock.png";
+import taskImg from "../../../images/tasksMock.png";
 import arrow from "../../../images/arrowStart.png";
 import link from "../../../images/link.svg";
 import archive from "../../../images/archive.svg";
@@ -15,11 +20,10 @@ import send from "../../../images/send.svg";
 import plus from "../../../images/plus.svg";
 import fullScreen from "../../../images/inFullScreen.svg";
 
-import ModalAdd from "../ModalAdd/ModalAdd";
 import "./ModalTicket.scss";
-import { Link } from "react-router-dom";
 
-export const ModalTiсket = ({ active, setActive, index }) => {
+export const ModalTiсket = ({ active, setActive, task, projectId, projectName }) => {
+  const dispatch = useDispatch();
   const [tiket] = useState({
     name: "Разработка трекера",
     code: "PR - 2245",
@@ -39,6 +43,19 @@ export const ModalTiсket = ({ active, setActive, index }) => {
   ]);
   const [addSubtask, setAddSubtask] = useState(false);
 
+  function deleteTask() {
+    apiRequest('/task/update-task', {
+      method: 'PUT',
+      data: {
+        task_id : task.id,
+        status: 0
+      }
+    }).then((res) => {
+      setActive(false)
+      dispatch(setProjectBoardFetch(projectId))
+    })
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -51,18 +68,18 @@ export const ModalTiсket = ({ active, setActive, index }) => {
         <div className="content">
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
-            Проект: {tiket.name}
+            Проект: {projectName}
-            <Link to={`/tracker/${index}`} className="title-project__full">
+            <Link to={`/tracker/${task.id}`} className="title-project__full">
               <img src={fullScreen}></img>
             </Link>
           </h3>
 
           <div className="content__task">
             <span>Задача</span>
-            <h5>{tiket.code}</h5>
+            <h5>{task.title}</h5>
             <div className="content__description">
-              <p>{tiket.descriptions}</p>
+              <p>{task.description}</p>
-              <img src={task} className="image-task"></img>
+              <img src={taskImg} className="image-task"></img>
               <p>{tiket.descriptions}</p>
             </div>
             <div className="content__communication">
@@ -90,8 +107,8 @@ export const ModalTiсket = ({ active, setActive, index }) => {
         <div className="workers">
           <div className="workers_box">
             <span className="exit" onClick={() => setActive(false)}></span>
-            <span>{tiket.code}</span>
+            <span>{task.title}</span>
-            <p className="workers__creator">Создатель : {tiket.creator}</p>
+            <p className="workers__creator">Создатель : {task.user?.fio}</p>
             <div>
               {workers.map((worker, index) => {
                 return (
@@ -134,7 +151,7 @@ export const ModalTiсket = ({ active, setActive, index }) => {
               <img src={archive}></img>
               <p>в архив</p>
             </div>
-            <div>
+            <div onClick={deleteTask}>
               <img src={del}></img>
               <p>удалить</p>
             </div>

src/components/UI/ModalTicket/ModalTicket.scss

@@ -18,7 +18,7 @@
 
 .modal-tiket__content {
   background: #ffffff;
-  border: 1px solid #dde2e4;
+  //border: 1px solid #dde2e4;
   border-radius: 8px;
   display: flex;
   flex-direction: row;
@@ -291,13 +291,14 @@
       }
 
       &-bottom {
-        padding: 40px 0 75px 56px;
+        padding: 40px 110px 75px 56px;
         font-weight: 400;
         font-size: 14px;
         line-height: 38px;
 
         div {
           display: flex;
+          cursor: pointer;
           align-items: center;
 
           p {

src/pages/Tracker/Tracker.js

@@ -255,7 +255,7 @@ export const Tracker = () => {
 
   // Modal State
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
-  const [indexTicket, setIndexTicket] = useState(0);
+  const [selectedTicket, setSelectedTicket] = useState({});
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const [modalCreateProject, setModalCreateProject] = useState(false);
   const [modalCreateColl, setModalCreateColl] = useState(false);
@@ -378,8 +378,8 @@ export const Tracker = () => {
     setModalCreateTiket(true);
   }
 
-  function openTicket(e, iTicket) {
+  function openTicket(e, task) {
-    setIndexTicket(iTicket);
+    setSelectedTicket(task);
     setModalActiveTicket(true);
   }
 
@@ -610,7 +610,9 @@ export const Tracker = () => {
             <ModalTicket
               active={modalActiveTicket}
               setActive={setModalActiveTicket}
-              index={indexTicket}
+              task={selectedTicket}
+              projectId={projectBoard.id}
+              projectName = {projectBoard.name}
             />
 
             <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
@@ -682,7 +684,7 @@ export const Tracker = () => {
                             dragStartHandler(e, task, column.id)
                           }
                           onDragEnd={(e) => dragEndHandler(e)}
-                          onClick={(e) => openTicket(e, task.id)}
+                          onClick={(e) => openTicket(e, task)}
                         >
                           <div className="tasks__board__item__title">
                             <p>{task.title}</p>

src/redux/projectsTrackerSlice.js

@@ -22,10 +22,22 @@ export const projectsTrackerSlice = createSlice({
     setProject: (state, action) => {
       state.projects.push(action.payload);
     },
+    deleteProject: (state, action) => {
+      console.log(action.payload)
+      state.projects = state.projects.filter((project) => project.id !== action.payload.id)
+    },
     moveProjectTask: (state, action) => {
       state.projectBoard.columns.forEach((column, index) => {
         if (column.id === action.payload.columnId) {
           column.tasks.push(action.payload.startWrapperIndex.task)
+          apiRequest(`/task/update-task`, {
+            method: 'PUT',
+            data: {
+              task_id: action.payload.startWrapperIndex.task.id,
+              column_id: column.id
+            }
+          }).then((res) => {
+          })
         }
         if (column.id === action.payload.startWrapperIndex.index) {
           state.projectBoard.columns[index].tasks = column.tasks.filter((task)=> task.id !== action.payload.startWrapperIndex.task.id);
@@ -40,7 +52,7 @@ export const projectsTrackerSlice = createSlice({
   }
 });
 
-export const { setProject, setAllProjects, moveProjectTask } = projectsTrackerSlice.actions;
+export const { setProject, deleteProject, setAllProjects, moveProjectTask } = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
 export const getProjectBoard = (state) => state.tracker.projectBoard;