add ModalTicketToReport and add OpenRequest, fix
LandingTracker, fix url ModalTicket
This commit is contained in:
@ -5,7 +5,7 @@ import React, { useEffect, useState } from "react";
|
||||
import DatePicker, { registerLocale } from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
|
||||
import { getProfileInfo } from "@redux/outstaffingSlice";
|
||||
import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
|
||||
@ -44,6 +44,7 @@ import watch from "assets/icons/watch.svg";
|
||||
import avatarMok from "assets/images/avatarMok.webp";
|
||||
|
||||
import { getCorrectDate } from "../../../../utils/calendarHelper";
|
||||
import ModalTicketToReport from "../ModalTicketToReport/ModalTicketToReport";
|
||||
import "./modalTicket.scss";
|
||||
|
||||
registerLocale("ru", ru);
|
||||
@ -59,6 +60,8 @@ export const ModalTiсket = ({
|
||||
projectMarks
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const location = useLocation();
|
||||
|
||||
const [addSubtask, setAddSubtask] = useState(false);
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [inputsValue, setInputsValue] = useState({
|
||||
@ -87,6 +90,12 @@ export const ModalTiсket = ({
|
||||
minute: 0,
|
||||
seconds: 0
|
||||
});
|
||||
const additionalData = {
|
||||
id: task.id,
|
||||
title: inputsValue.title,
|
||||
link: null,
|
||||
nameProject: projectName
|
||||
};
|
||||
const [timerId, setTimerId] = useState(null);
|
||||
const [taskFiles, setTaskFiles] = useState([]);
|
||||
const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
|
||||
@ -98,9 +107,21 @@ export const ModalTiсket = ({
|
||||
const [selectPriorityOpen, setSelectPriorityOpen] = useState(false);
|
||||
const { showNotification } = useNotification();
|
||||
const [commentSendDisable, setCommentSendDisable] = useState(false);
|
||||
const [showModalToReport, setShowModalToReport] = useState(false);
|
||||
|
||||
const openModalToReport = () => {
|
||||
setShowModalToReport(!showModalToReport);
|
||||
};
|
||||
|
||||
const closeModalToReport = () => {
|
||||
setShowModalToReport(!showModalToReport);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setActive(false);
|
||||
const currentUrl = window.location.pathname;
|
||||
const newUrl = currentUrl.replace(/\/task\/\d+$/, "");
|
||||
window.history.replaceState({}, "", newUrl);
|
||||
// Восстанавливаем скролл при закрытии модального окна
|
||||
document.body.style.overflow = "auto";
|
||||
};
|
||||
@ -1072,7 +1093,7 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
<div className="workers_box-bottom">
|
||||
<div
|
||||
className={editOpen ? "edit" : ""}
|
||||
className={`bottom-button ${editOpen ? "edit" : ""}`}
|
||||
onClick={() => {
|
||||
if (editOpen) {
|
||||
editTask();
|
||||
@ -1084,30 +1105,39 @@ export const ModalTiсket = ({
|
||||
<img src={edit}></img>
|
||||
<p>{editOpen ? "сохранить" : "редактировать"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bottom-button">
|
||||
<img src={link}></img>
|
||||
<p onClick={copyTicketLink}>ссылка на задачу</p>
|
||||
</div>
|
||||
<div className="bottom-button">
|
||||
<img src={link}></img>
|
||||
<p onClick={openModalToReport}>выгрузка в отчет</p>
|
||||
<ModalTicketToReport
|
||||
show={showModalToReport}
|
||||
onClose={closeModalToReport}
|
||||
additionalData={additionalData}
|
||||
></ModalTicketToReport>
|
||||
</div>
|
||||
<div
|
||||
onClick={archiveTask}
|
||||
className={
|
||||
className={`bottom-button ${
|
||||
profileInfo.id_user === projectOwnerId ||
|
||||
profileInfo.id_user === task.user_id
|
||||
? ""
|
||||
: "disable"
|
||||
}
|
||||
}`}
|
||||
>
|
||||
<img src={archive}></img>
|
||||
<p>в архив</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={deleteTask}
|
||||
className={
|
||||
className={`bottom-button ${
|
||||
profileInfo.id_user === projectOwnerId ||
|
||||
profileInfo.id_user === task.user_id
|
||||
? ""
|
||||
: "disable"
|
||||
}
|
||||
}`}
|
||||
>
|
||||
<img src={del}></img>
|
||||
<p>удалить</p>
|
||||
|
||||
@ -1178,33 +1178,35 @@
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
.bottom {
|
||||
&-button {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
|
||||
img {
|
||||
width: 11px;
|
||||
img {
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
|
||||
&.edit {
|
||||
background: #52b709;
|
||||
border-radius: 50px;
|
||||
width: fit-content;
|
||||
p {
|
||||
font-weight: 700;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
background: #52b709;
|
||||
border-radius: 50px;
|
||||
width: fit-content;
|
||||
p {
|
||||
font-weight: 700;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
import axios from "axios";
|
||||
import React, { useState } from "react";
|
||||
import DatePicker from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
|
||||
import "./modalTicketToReport.scss";
|
||||
|
||||
const ModalTicketToReport = ({ show, onClose, additionalData }) => {
|
||||
const [date, setDate] = useState(new Date());
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const data = {
|
||||
date,
|
||||
...additionalData
|
||||
};
|
||||
|
||||
try {
|
||||
await axios.post(
|
||||
"https://itguild.info/profile/calendar/reports/create",
|
||||
data
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`modal-report-backdrop ${show ? "show" : ""}`}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="modal-report-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="modal-report-close" onClick={onClose}></div>
|
||||
<h2>Выгрузка в отчет</h2>
|
||||
<div className="modal-report-date-picker">
|
||||
<DatePicker
|
||||
className="datePicker"
|
||||
locale="ru"
|
||||
selected={date}
|
||||
onChange={(date) => setDate(date)}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="modal-report__buttons">
|
||||
<BaseButton
|
||||
styles={"button-add add-person-btn "}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Выгрузить в отчет
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
styles={`button-add add-person-btn ${show ? "" : "disable"}`}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Выгрузить и перейти в отчет
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalTicketToReport;
|
||||
@ -0,0 +1,167 @@
|
||||
.modal-report {
|
||||
&-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
cursor: auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
max-width: 500px;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #263238;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #263238;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-date-picker {
|
||||
// .datePicker {
|
||||
// visibility: hidden;
|
||||
// height: 0;
|
||||
// padding: 0;
|
||||
// width: 0;
|
||||
// position: absolute;
|
||||
// }
|
||||
|
||||
.react-datepicker-wrapper {
|
||||
// position: absolute;
|
||||
}
|
||||
|
||||
.react-datepicker {
|
||||
border: 1px solid #e8ede4;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.react-datepicker-popper {
|
||||
top: -150px !important;
|
||||
left: 180px !important;
|
||||
z-index: 10;
|
||||
|
||||
@media (max-width: 880px) {
|
||||
left: 0 !important;
|
||||
top: -15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.react-datepicker__current-month {
|
||||
font-size: 18px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.react-datepicker__navigation-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50px;
|
||||
border: 2px solid #cbd1d2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.react-datepicker__navigation-icon--next::before {
|
||||
border-width: 2px 2px 0 0;
|
||||
top: auto;
|
||||
left: 4px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.react-datepicker__navigation-icon--previous::before {
|
||||
border-width: 2px 2px 0 0;
|
||||
top: auto;
|
||||
left: 6px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.react-datepicker__header {
|
||||
padding: 5px 0 10px;
|
||||
border-bottom: 1px solid #baacc0;
|
||||
}
|
||||
|
||||
.react-datepicker__day {
|
||||
font-size: 16px;
|
||||
width: 35px;
|
||||
border-radius: 50px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.react-datepicker__day-name {
|
||||
font-size: 18px;
|
||||
width: 35px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.react-datepicker__triangle {
|
||||
display: none;
|
||||
// left: 85px !important;
|
||||
|
||||
// &:before {
|
||||
// border: 1px solid #e8ede4;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 100px;
|
||||
margin: 30px 0;
|
||||
|
||||
.button {
|
||||
height: 47px;
|
||||
font-size: 15px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user