import React, {useState, useEffect} from 'react' import {useSelector} from 'react-redux' import {Link, Navigate, useNavigate} from 'react-router-dom' import DatePicker, { registerLocale } from "react-datepicker" import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper' import ru from "date-fns/locale/ru" registerLocale("ru", ru); import {Loader} from '../Loader/Loader' import {Footer} from "../Footer/Footer"; import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {apiRequest} from "../../api/request"; import {getReportDate} from '../../redux/reportSlice' import calendarIcon from '../../images/calendar_icon.png' import ellipse from '../../images/ellipse.png' import remove from '../../images/remove.png' import addIcon from '../../images/addIcon.png' import arrow from "../../images/right-arrow.png"; import './reportForm.scss' import "react-datepicker/dist/react-datepicker.css"; 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 = () => { if(!inputs[0].task || !inputs[0].hours_spent) { setReportSuccess('Заполните задачи'); setTimeout(() => setReportSuccess(''), 1000) return } apiRequest('/reports/create', { method: 'POST', data: { tasks: inputs, difficulties: troublesInputValue, tomorrow: scheduledInputValue, created_at: getCreatedDate(startDate), status: 1, }, }).then((res) => { 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)}/> handler()}> {isFetching ? : 'Отправить'} Всего за день : {totalHours} часов {reportSuccess && {reportSuccess} } ) }; export default ReportForm
Вернуться
Краткое описание задачи
Количество часов
Всего за день : {totalHours} часов
{reportSuccess}