task deadLine

2023-07-07 17:38:19 +03:00 · 2023-07-07 17:38:19 +03:00 · b8ef0119d0
commit b8ef0119d0
parent d0a29e7ee8
5 changed files with 197 additions and 5 deletions
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/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>
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/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;
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/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>
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/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" />
--- a/src/pages/Tracker/tracker.scss
+++ b/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;