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;