144 lines
4.1 KiB
JavaScript
144 lines
4.1 KiB
JavaScript
import { format } from "date-fns";
|
|
import React, { useEffect, useState } from "react";
|
|
import DatePicker from "react-datepicker";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
import { useNavigate } from "react-router";
|
|
|
|
import { apiRequest } from "@api/request";
|
|
|
|
import { useNotification } from "@hooks/useNotification";
|
|
|
|
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
|
|
|
import "./modalTicketToReport.scss";
|
|
|
|
const ModalTicketToReport = ({ show, onClose, additionalData }) => {
|
|
const [date, setDate] = useState(new Date());
|
|
const [inputValue, setInputValue] = useState(0);
|
|
const [taskDescription, setTaskDescription] = useState("");
|
|
|
|
const navigate = useNavigate();
|
|
const { showNotification } = useNotification();
|
|
|
|
useEffect(() => {
|
|
if (additionalData.task.description) {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(
|
|
additionalData.task.description,
|
|
"text/html"
|
|
);
|
|
setTaskDescription(doc.body.textContent || "");
|
|
}
|
|
}, [additionalData.task.description]);
|
|
|
|
useEffect(() => {
|
|
const hoursSpent = additionalData.task.hours_spent;
|
|
setInputValue(hoursSpent);
|
|
}, [additionalData.task.hours_spent]);
|
|
|
|
const handleSubmit = async () => {
|
|
const formattedDate = format(date, "yyyy-MM-dd");
|
|
|
|
apiRequest("https://back.itguild.info/api/reports/find-or-create", {
|
|
method: "GET",
|
|
params: {
|
|
user_id: additionalData.user_id,
|
|
created_at: formattedDate,
|
|
project_id: additionalData.project_id,
|
|
company_id: additionalData.company_id
|
|
}
|
|
})
|
|
.then((res) => {
|
|
apiRequest("https://back.itguild.info/api/reports/add-task-to-report", {
|
|
method: "POST",
|
|
data: {
|
|
report_id: res[0].id,
|
|
tasks: taskDescription,
|
|
hours_spent: inputValue,
|
|
minutes_spent: additionalData.task.minutes_spent
|
|
}
|
|
})
|
|
.then(() => {
|
|
showNotification({
|
|
show: true,
|
|
text: "Отчет успешно создан",
|
|
type: "true"
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
});
|
|
};
|
|
|
|
const toTheReport = async () => {
|
|
const success = await handleSubmit();
|
|
if (success) {
|
|
navigate(
|
|
`/profile/calendar/view/${additionalData.created_at}/${additionalData.user_id}`
|
|
);
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (e) => {
|
|
const value = Number(e.target.value);
|
|
if (value !== 0) {
|
|
setInputValue(value);
|
|
}
|
|
};
|
|
|
|
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">
|
|
<label htmlFor="date-picker">Дата отчета:</label>
|
|
<DatePicker
|
|
id="date-picker"
|
|
className="datePicker"
|
|
locale="ru"
|
|
selected={date}
|
|
onChange={(date) => setDate(date)}
|
|
dateFormat="dd/MM/yyyy"
|
|
/>
|
|
</div>
|
|
<label className="modal-report-input-time">
|
|
Время выполнения:
|
|
<input
|
|
type="number"
|
|
value={inputValue}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</label>
|
|
|
|
<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={toTheReport}
|
|
>
|
|
Выгрузить и перейти в отчет
|
|
</BaseButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModalTicketToReport;
|