task deadLine

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -3,6 +3,13 @@ import { CKEditor } from "@ckeditor/ckeditor5-react";
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
+import ru from "date-fns/locale/ru";
+import DatePicker, { registerLocale } from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+import {
+  getCorrectDate
+} from "../../../Calendar/calendarHelper";
 
 import { getProfileInfo } from "@redux/outstaffingSlice";
 import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
@@ -26,9 +33,12 @@ import link from "assets/icons/link.svg";
 import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";
 import avatarMok from "assets/images/avatarMok.png";
+import calendarIcon from "assets/icons/calendar.svg";
 
 import "./modalTicket.scss";
 
+registerLocale("ru", ru);
+
 export const ModalTiсket = ({
   active,
   setActive,
@@ -46,6 +56,11 @@ export const ModalTiсket = ({
     comment: "",
   });
   const [comments, setComments] = useState([]);
+  const [deadLine, setDeadLine] = useState(task.dead_line);
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [startDate, setStartDate] = useState(
+      task.dead_line ? new Date(task.dead_line) : new Date()
+  );
   const [dropListOpen, setDropListOpen] = useState(false);
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [executor, setExecutor] = useState(task.executor);
@@ -341,6 +356,18 @@ export const ModalTiсket = ({
     );
   }
 
+  function selectDeadLine(date) {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: task.id,
+        dead_line: getCorrectRequestDate(date)
+      },
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectId));
+    });
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -593,6 +620,24 @@ export const ModalTiсket = ({
           </div>
 
           <div className="workers_box-middle">
+            <div className='deadLine'>
+              <div className='deadLine__container' onClick={() => setDatePickerOpen(!datePickerOpen)}>
+                <img src={calendarIcon} alt='calendar' />
+                <span>{deadLine ? getCorrectDate(deadLine) : 'Срок исполнения:'}</span>
+              </div>
+              <DatePicker
+                  className="datePicker"
+                  open={datePickerOpen}
+                  locale="ru"
+                  selected={startDate}
+                  onChange={(date) => {
+                    setDatePickerOpen(false);
+                    setStartDate(date);
+                    setDeadLine(date)
+                    selectDeadLine(date)
+                  }}
+              />
+            </div>
             <div className="time">
               <img src={watch}></img>
               <span>Длительность : </span>