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>

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -539,12 +539,89 @@
       }
     }
 
+    .deadLine {
+      position: relative;
+      &__container {
+        padding: 5px 10px 5px;
+        margin-top: 10px;
+        border-radius: 5px;
+        border: 1px solid gray;
+        cursor: pointer;
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        max-width: 185px;
+        img {
+          width: 16px;
+          height: 16px;
+        }
+        span {
+          font-size: 12px;
+          color: #000000;
+          margin-left: 10px;
+          font-weight: 500;
+        }
+      }
+      .datePicker {
+        visibility: hidden;
+        height: 0;
+        padding: 0;
+        width: 0;
+        position: absolute;
+      }
+
+      .react-datepicker-wrapper {
+        position: absolute;
+      }
+
+      .react-datepicker {
+        border: 1px solid #398208;
+      }
+
+      .react-datepicker-popper {
+        top: 10px !important;
+        left: -110px !important;
+      }
+
+      .react-datepicker__current-month {
+        font-size: 14px;
+        font-family: "LabGrotesque", sans-serif;
+        text-transform: capitalize;
+      }
+
+      .react-datepicker__header {
+        padding: 5px 0 10px;
+        border-bottom: 1px solid #398208;
+      }
+
+      .react-datepicker__day {
+        font-size: 14px;
+        width: 35px;
+        font-family: "LabGrotesque", sans-serif;
+      }
+
+      .react-datepicker__day-name {
+        font-size: 14px;
+        width: 35px;
+        font-family: "LabGrotesque", sans-serif;
+      }
+
+      .react-datepicker__triangle {
+        left: 85px !important;
+
+        &:before {
+          border-bottom-color: #398208 !important;
+        }
+      }
+    }
+
     .time {
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 12px;
-      margin-top: 20px;
+      margin-top: 10px;
       width: 160px;
 
       p {
@@ -658,7 +735,7 @@
     }
 
     &_box {
-      padding: 25px 85px 40px 40px;
+      padding: 25px 85px 25px 40px;
       border-bottom: 1px solid #f1f1f1;
 
       &-middle {
@@ -667,7 +744,7 @@
       }
 
       &-bottom {
-        padding: 40px 110px 75px 56px;
+        padding: 20px 110px 35px 56px;
         font-weight: 400;
         font-size: 14px;
         line-height: 38px;

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -7,11 +7,16 @@ import { Link, useNavigate, useParams } from "react-router-dom";
 import {
   deletePersonOnProject,
   getBoarderLoader,
-  modalToggle,
+  modalToggle, setProjectBoardFetch,
   setToggleTab,
 } from "@redux/projectsTrackerSlice";
 
 import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
+import calendarIcon from "assets/icons/calendar.svg";
+import {getCorrectDate} from "@components/Calendar/calendarHelper";
+import DatePicker, { registerLocale } from "react-datepicker";
+import ru from "date-fns/locale/ru";
+registerLocale("ru", ru);
 
 import { apiRequest } from "@api/request";
 
@@ -65,10 +70,15 @@ export const TicketFullScreen = () => {
   const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [users, setUsers] = useState([]);
+  const [deadLine, setDeadLine] = useState('');
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [startDate, setStartDate] = useState(null);
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
+      setDeadLine(taskInfo.dead_line)
+      setStartDate(taskInfo.dead_line ? new Date(taskInfo.dead_line) : new Date())
       setInputsValue({
         title: taskInfo.title,
         description: taskInfo.description,
@@ -363,6 +373,17 @@ export const TicketFullScreen = () => {
     });
   }
 
+  function selectDeadLine(date) {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: taskInfo.id,
+        dead_line: getCorrectRequestDate(date)
+      },
+    }).then(() => {
+    });
+  }
+
   return (
     <section className="ticket-full-screen">
       <ProfileHeader />
@@ -751,6 +772,24 @@ export const TicketFullScreen = () => {
                 </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>

src/pages/ProjectTracker/ProjectTracker.js

@@ -33,6 +33,9 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import {
+  getCorrectDate
+} from "../../components/Calendar/calendarHelper";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
@@ -549,7 +552,7 @@ export const ProjectTracker = () => {
                       >
                         <div className="board__head">
                           <span>{column.title}</span>
-                          <div>
+                          <div className='board__head__more'>
                             <span
                               className="add"
                               onClick={() =>
@@ -652,6 +655,11 @@ export const ProjectTracker = () => {
                                   />
                                 )}
                               </div>
+                              <div className="tasks__board__item__deadLine">
+                                <p>Срок исполнения:</p>
+                                <span>{task.dead_line ? getCorrectDate(task.dead_line) : 'Не выбран'}
+                                </span>
+                              </div>
                               <div className="tasks__board__item__info">
                                 <div className="tasks__board__item__info__more">
                                   <img src={commentsBoard} alt="commentsImg" />

src/pages/Tracker/tracker.scss

@@ -790,6 +790,23 @@
               }
             }
 
+            &__deadLine {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              margin-bottom: 10px;
+
+              p {
+                font-weight: 500;
+                font-size: 14px;
+              }
+
+              span {
+                font-weight: 500;
+                font-size: 14px;
+              }
+            }
+
             &__executor {
               display: flex;
               justify-content: space-between;
@@ -908,6 +925,11 @@
             justify-content: space-between;
             min-width: 300px;
 
+            &__more {
+              display: flex;
+              align-items: center;
+            }
+
             span {
               color: #6f6f6f;
               font-weight: 500;
@@ -935,6 +957,7 @@
               bottom: 4px;
               font-size: 20px;
               cursor: pointer;
+              width: 15px;
 
               &:hover {
                 font-weight: 600;