diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 08fd0281..ab07c8a5 100644 --- 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 (
+
+
setDatePickerOpen(!datePickerOpen)}> + calendar + {deadLine ? getCorrectDate(deadLine) : 'Срок исполнения:'} +
+ { + setDatePickerOpen(false); + setStartDate(date); + setDeadLine(date) + selectDeadLine(date) + }} + /> +
Длительность : diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 8baa91cf..a6835bfb 100644 --- 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; diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 3b163d5d..70b989f2 100644 --- 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 (
@@ -751,6 +772,24 @@ export const TicketFullScreen = () => {
+
+
setDatePickerOpen(!datePickerOpen)}> + calendar + {deadLine ? getCorrectDate(deadLine) : 'Срок исполнения:'} +
+ { + setDatePickerOpen(false); + setStartDate(date); + setDeadLine(date) + selectDeadLine(date) + }} + /> +
Длительность : diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index d34ab06d..3159d697 100644 --- 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 = () => { >
{column.title} -
+
@@ -652,6 +655,11 @@ export const ProjectTracker = () => { /> )}
+
+

Срок исполнения:

+ {task.dead_line ? getCorrectDate(task.dead_line) : 'Не выбран'} + +
commentsImg diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 14ea2948..407e985b 100644 --- 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;