import ru from "date-fns/locale/ru"; import React, { useEffect, useState } from "react"; import DatePicker, { registerLocale } from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { useSelector } from "react-redux"; import { Link, Navigate, useNavigate } from "react-router-dom"; import { getReportDate } from "@redux/reportSlice"; import { apiRequest } from "@api/request"; import { Footer } from "@components/Common/Footer/Footer"; import { Loader } from "@components/Common/Loader/Loader"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import arrow from "assets/icons/arrows/left-arrow.png"; import calendarIcon from "assets/icons/calendar.svg"; import ellipse from "assets/icons/ellipse.png"; import remove from "assets/icons/remove.svg"; import { getCorrectDate, getCreatedDate, hourOfNum, } from "../Calendar/calendarHelper"; import "./reportForm.scss"; registerLocale("ru", ru); const ReportForm = () => { if (localStorage.getItem("role_status") === "18") { return ; } const navigate = useNavigate(); const reportDate = useSelector(getReportDate); useEffect(() => { initListeners(); }, []); const [isFetching, setIsFetching] = useState(false); const [reportSuccess, setReportSuccess] = useState(""); const [startDate, setStartDate] = useState( reportDate ? new Date(reportDate._d) : new Date(), ); const [datePickerOpen, setDatePickerOpen] = useState(false); const [inputs, setInputs] = useState([ { task: "", hours_spent: "", minutes_spent: 0 }, ]); const [troublesInputValue, setTroublesInputValue] = useState(""); const [scheduledInputValue, setScheduledInputValue] = useState(""); const addInput = () => { setInputs((prev) => [ ...prev, { task: "", hours_spent: "", minutes_spent: 0 }, ]); }; const initListeners = () => { document.addEventListener("click", closeByClickingOut); }; const closeByClickingOut = (event) => { const path = event.path || (event.composedPath && event.composedPath()); if ( event && !path.find( (div) => div.classList && (div.classList.contains("report-form__block-img") || div.classList.contains("react-datepicker-popper")), ) ) { setDatePickerOpen(false); } }; const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0); const deleteInput = (indexRemove) => { setInputs((prev) => prev.filter((el, index) => index !== indexRemove)); }; const handler = () => { for (let input of inputs) { if (!input.task || !input.hours_spent) { setReportSuccess("Заполните задачи"); setTimeout(() => setReportSuccess(""), 2000); return; } } apiRequest("/reports/create", { method: "POST", data: { tasks: inputs, difficulties: troublesInputValue, tomorrow: scheduledInputValue, created_at: getCreatedDate(startDate), status: 1, }, }).then(() => { setReportSuccess("Отчет отправлен"); setTimeout(() => { setReportSuccess(""); navigate("/profile/calendar"); }, 1000); setInputs(() => []); setTroublesInputValue(""); setScheduledInputValue(""); setIsFetching(false); setInputs(() => [{ task: "", hours_spent: "", minutes_spent: 0 }]); }); }; return (

Ваши отчеты - добавить отчет

Вернуться

Добавление отчета за день

Дата заполнения отчета:

setDatePickerOpen(true)} > {getCorrectDate(startDate)}
{ setDatePickerOpen(false); setStartDate(date); }} />
Какие задачи были выполнены?

Краткое описание задачи

Кол-во часов

{inputs.map((input, index) => { return (
{index + 1}.
setInputs( inputs.map((input, inputIndex) => { return index === inputIndex ? { ...input, task: e.target.value, } : input; }), ) } />
setInputs( inputs.map((input, inputIndex) => { return index === inputIndex ? { ...input, hours_spent: Number(e.target.value), } : input; }), ) } />
{index > 0 && (
deleteInput(index)} src={remove} alt="" />
)}
); })}

+

Добавить ещё
Какие сложности возникли?
setTroublesInputValue(e.target.value)} />
Что планируется сделать завтра?
setScheduledInputValue(e.target.value)} />

Всего за день:{" "} {totalHours} {hourOfNum(totalHours)}

{reportSuccess && (

{reportSuccess}

)}
); }; export default ReportForm;