task deadLine

This commit is contained in:
Николай Полтщук 2023-07-07 17:38:31 +03:00
parent b8ef0119d0
commit 8b9351e3f7
3 changed files with 69 additions and 55 deletions

View File

@ -1,15 +1,11 @@
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react"; 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 ru from "date-fns/locale/ru";
import React, { useEffect, useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker"; import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
import { useDispatch, useSelector } from "react-redux";
import { import { Link } from "react-router-dom";
getCorrectDate
} from "../../../Calendar/calendarHelper";
import { getProfileInfo } from "@redux/outstaffingSlice"; import { getProfileInfo } from "@redux/outstaffingSlice";
import { setProjectBoardFetch } from "@redux/projectsTrackerSlice"; import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
@ -24,6 +20,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
import archive from "assets/icons/archive.svg"; import archive from "assets/icons/archive.svg";
import arrow from "assets/icons/arrows/arrowStart.png"; import arrow from "assets/icons/arrows/arrowStart.png";
import fullScreen from "assets/icons/arrows/inFullScreen.svg"; import fullScreen from "assets/icons/arrows/inFullScreen.svg";
import calendarIcon from "assets/icons/calendar.svg";
import category from "assets/icons/category.svg"; import category from "assets/icons/category.svg";
import close from "assets/icons/closeProjectPersons.svg"; import close from "assets/icons/closeProjectPersons.svg";
import del from "assets/icons/delete.svg"; import del from "assets/icons/delete.svg";
@ -33,8 +30,8 @@ import link from "assets/icons/link.svg";
import send from "assets/icons/send.svg"; import send from "assets/icons/send.svg";
import watch from "assets/icons/watch.svg"; import watch from "assets/icons/watch.svg";
import avatarMok from "assets/images/avatarMok.png"; import avatarMok from "assets/images/avatarMok.png";
import calendarIcon from "assets/icons/calendar.svg";
import { getCorrectDate } from "../../../Calendar/calendarHelper";
import "./modalTicket.scss"; import "./modalTicket.scss";
registerLocale("ru", ru); registerLocale("ru", ru);
@ -59,7 +56,7 @@ export const ModalTiсket = ({
const [deadLine, setDeadLine] = useState(task.dead_line); const [deadLine, setDeadLine] = useState(task.dead_line);
const [datePickerOpen, setDatePickerOpen] = useState(false); const [datePickerOpen, setDatePickerOpen] = useState(false);
const [startDate, setStartDate] = useState( const [startDate, setStartDate] = useState(
task.dead_line ? new Date(task.dead_line) : new Date() task.dead_line ? new Date(task.dead_line) : new Date()
); );
const [dropListOpen, setDropListOpen] = useState(false); const [dropListOpen, setDropListOpen] = useState(false);
const [dropListMembersOpen, setDropListMembersOpen] = useState(false); const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
@ -361,7 +358,7 @@ export const ModalTiсket = ({
method: "PUT", method: "PUT",
data: { data: {
task_id: task.id, task_id: task.id,
dead_line: getCorrectRequestDate(date) dead_line: getCorrectRequestDate(date),
}, },
}).then(() => { }).then(() => {
dispatch(setProjectBoardFetch(projectId)); dispatch(setProjectBoardFetch(projectId));
@ -620,22 +617,27 @@ export const ModalTiсket = ({
</div> </div>
<div className="workers_box-middle"> <div className="workers_box-middle">
<div className='deadLine'> <div className="deadLine">
<div className='deadLine__container' onClick={() => setDatePickerOpen(!datePickerOpen)}> <div
<img src={calendarIcon} alt='calendar' /> className="deadLine__container"
<span>{deadLine ? getCorrectDate(deadLine) : 'Срок исполнения:'}</span> onClick={() => setDatePickerOpen(!datePickerOpen)}
>
<img src={calendarIcon} alt="calendar" />
<span>
{deadLine ? getCorrectDate(deadLine) : "Срок исполнения:"}
</span>
</div> </div>
<DatePicker <DatePicker
className="datePicker" className="datePicker"
open={datePickerOpen} open={datePickerOpen}
locale="ru" locale="ru"
selected={startDate} selected={startDate}
onChange={(date) => { onChange={(date) => {
setDatePickerOpen(false); setDatePickerOpen(false);
setStartDate(date); setStartDate(date);
setDeadLine(date) setDeadLine(date);
selectDeadLine(date) selectDeadLine(date);
}} }}
/> />
</div> </div>
<div className="time"> <div className="time">

View File

@ -1,25 +1,24 @@
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react"; import { CKEditor } from "@ckeditor/ckeditor5-react";
import ru from "date-fns/locale/ru";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate, useParams } from "react-router-dom"; import { Link, useNavigate, useParams } from "react-router-dom";
import { import {
deletePersonOnProject, deletePersonOnProject,
getBoarderLoader, getBoarderLoader,
modalToggle, setProjectBoardFetch, modalToggle,
setProjectBoardFetch,
setToggleTab, setToggleTab,
} from "@redux/projectsTrackerSlice"; } from "@redux/projectsTrackerSlice";
import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper"; 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"; import { apiRequest } from "@api/request";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import BaseButton from "@components/Common/BaseButton/BaseButton"; import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer"; import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader"; import { Loader } from "@components/Common/Loader/Loader";
@ -31,6 +30,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowStart from "assets/icons/arrows/arrowStart.png"; import arrowStart from "assets/icons/arrows/arrowStart.png";
import calendarIcon from "assets/icons/calendar.svg";
import close from "assets/icons/close.png"; import close from "assets/icons/close.png";
import del from "assets/icons/delete.svg"; import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg"; import edit from "assets/icons/edit.svg";
@ -45,6 +45,8 @@ import avatarMok from "assets/images/avatarMok.png";
import "./ticketFullScreen.scss"; import "./ticketFullScreen.scss";
registerLocale("ru", ru);
export const TicketFullScreen = () => { export const TicketFullScreen = () => {
const [modalAddWorker, setModalAddWorker] = useState(false); const [modalAddWorker, setModalAddWorker] = useState(false);
const ticketId = useParams(); const ticketId = useParams();
@ -70,15 +72,17 @@ export const TicketFullScreen = () => {
const [correctProjectUsers, setCorrectProjectUsers] = useState([]); const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
const [dropListMembersOpen, setDropListMembersOpen] = useState(false); const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
const [deadLine, setDeadLine] = useState(''); const [deadLine, setDeadLine] = useState("");
const [datePickerOpen, setDatePickerOpen] = useState(false); const [datePickerOpen, setDatePickerOpen] = useState(false);
const [startDate, setStartDate] = useState(null); const [startDate, setStartDate] = useState(null);
useEffect(() => { useEffect(() => {
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
setTaskInfo(taskInfo); setTaskInfo(taskInfo);
setDeadLine(taskInfo.dead_line) setDeadLine(taskInfo.dead_line);
setStartDate(taskInfo.dead_line ? new Date(taskInfo.dead_line) : new Date()) setStartDate(
taskInfo.dead_line ? new Date(taskInfo.dead_line) : new Date()
);
setInputsValue({ setInputsValue({
title: taskInfo.title, title: taskInfo.title,
description: taskInfo.description, description: taskInfo.description,
@ -378,10 +382,9 @@ export const TicketFullScreen = () => {
method: "PUT", method: "PUT",
data: { data: {
task_id: taskInfo.id, task_id: taskInfo.id,
dead_line: getCorrectRequestDate(date) dead_line: getCorrectRequestDate(date),
}, },
}).then(() => { }).then(() => {});
});
} }
return ( return (
@ -772,22 +775,29 @@ export const TicketFullScreen = () => {
</div> </div>
<div className="workers_box-middle"> <div className="workers_box-middle">
<div className='deadLine'> <div className="deadLine">
<div className='deadLine__container' onClick={() => setDatePickerOpen(!datePickerOpen)}> <div
<img src={calendarIcon} alt='calendar' /> className="deadLine__container"
<span>{deadLine ? getCorrectDate(deadLine) : 'Срок исполнения:'}</span> onClick={() => setDatePickerOpen(!datePickerOpen)}
>
<img src={calendarIcon} alt="calendar" />
<span>
{deadLine
? getCorrectDate(deadLine)
: "Срок исполнения:"}
</span>
</div> </div>
<DatePicker <DatePicker
className="datePicker" className="datePicker"
open={datePickerOpen} open={datePickerOpen}
locale="ru" locale="ru"
selected={startDate} selected={startDate}
onChange={(date) => { onChange={(date) => {
setDatePickerOpen(false); setDatePickerOpen(false);
setStartDate(date); setStartDate(date);
setDeadLine(date) setDeadLine(date);
selectDeadLine(date) selectDeadLine(date);
}} }}
/> />
</div> </div>
<div className="time"> <div className="time">

View File

@ -33,9 +33,6 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation"; import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import {
getCorrectDate
} from "../../components/Calendar/calendarHelper";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowDown from "assets/icons/arrows/selectArrow.png"; import arrowDown from "assets/icons/arrows/selectArrow.png";
@ -51,6 +48,8 @@ import accept from "assets/images/accept.png";
import archive from "assets/images/archiveIcon.png"; import archive from "assets/images/archiveIcon.png";
import avatarMok from "assets/images/avatarMok.png"; import avatarMok from "assets/images/avatarMok.png";
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
export const ProjectTracker = () => { export const ProjectTracker = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const projectId = useParams(); const projectId = useParams();
@ -552,7 +551,7 @@ export const ProjectTracker = () => {
> >
<div className="board__head"> <div className="board__head">
<span>{column.title}</span> <span>{column.title}</span>
<div className='board__head__more'> <div className="board__head__more">
<span <span
className="add" className="add"
onClick={() => onClick={() =>
@ -657,7 +656,10 @@ export const ProjectTracker = () => {
</div> </div>
<div className="tasks__board__item__deadLine"> <div className="tasks__board__item__deadLine">
<p>Срок исполнения:</p> <p>Срок исполнения:</p>
<span>{task.dead_line ? getCorrectDate(task.dead_line) : 'Не выбран'} <span>
{task.dead_line
? getCorrectDate(task.dead_line)
: "Не выбран"}
</span> </span>
</div> </div>
<div className="tasks__board__item__info"> <div className="tasks__board__item__info">