2023-02-07 15:11:11 +03:00
|
|
|
|
import React, {useState, useEffect} from 'react'
|
2023-01-16 19:12:44 +03:00
|
|
|
|
import {useSelector} from 'react-redux'
|
2023-01-24 19:11:24 +03:00
|
|
|
|
import {Link, useNavigate} from 'react-router-dom'
|
2023-02-07 15:11:11 +03:00
|
|
|
|
import DatePicker, { registerLocale } from "react-datepicker"
|
2023-02-17 15:19:49 +03:00
|
|
|
|
import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper'
|
2023-02-07 15:11:11 +03:00
|
|
|
|
import ru from "date-fns/locale/ru"
|
|
|
|
|
registerLocale("ru", ru);
|
2023-01-16 20:42:27 +03:00
|
|
|
|
|
2023-01-09 20:53:23 +03:00
|
|
|
|
import {Loader} from '../Loader/Loader'
|
2023-01-16 20:42:27 +03:00
|
|
|
|
import {currentMonthAndDay} from '../Calendar/calendarHelper'
|
|
|
|
|
import {Footer} from "../Footer/Footer";
|
|
|
|
|
import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
|
|
|
|
|
|
2023-01-20 16:20:06 +03:00
|
|
|
|
import {apiRequest} from "../../api/request";
|
2023-01-16 20:42:27 +03:00
|
|
|
|
|
2023-01-09 20:53:23 +03:00
|
|
|
|
import {getReportDate} from '../../redux/reportSlice'
|
2023-01-16 20:42:27 +03:00
|
|
|
|
|
2021-11-30 16:00:58 +02:00
|
|
|
|
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'
|
2022-12-26 15:12:01 +03:00
|
|
|
|
import arrow from "../../images/right-arrow.png";
|
2023-01-16 20:42:27 +03:00
|
|
|
|
|
|
|
|
|
import './reportForm.scss'
|
2023-02-07 15:11:11 +03:00
|
|
|
|
import "react-datepicker/dist/react-datepicker.css";
|
2021-06-21 17:41:26 +03:00
|
|
|
|
|
|
|
|
|
const ReportForm = () => {
|
2023-01-24 19:11:24 +03:00
|
|
|
|
const navigate= useNavigate();
|
2023-01-09 20:53:23 +03:00
|
|
|
|
const reportDate = useSelector(getReportDate);
|
2022-10-19 15:41:11 +03:00
|
|
|
|
|
2023-02-07 15:11:11 +03:00
|
|
|
|
useEffect(() => {
|
|
|
|
|
initListeners()
|
|
|
|
|
}, [])
|
|
|
|
|
|
2023-01-09 20:53:23 +03:00
|
|
|
|
const [isFetching, setIsFetching] = useState(false);
|
2023-01-24 19:11:24 +03:00
|
|
|
|
const [reportSuccess, setReportSuccess] = useState('');
|
2023-02-07 15:11:11 +03:00
|
|
|
|
const [startDate, setStartDate] = useState(reportDate ? new Date (reportDate._d) : new Date());
|
|
|
|
|
const [datePickerOpen, setDatePickerOpen] = useState(false);
|
2021-06-22 18:00:52 +03:00
|
|
|
|
|
2023-01-09 20:53:23 +03:00
|
|
|
|
const [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
|
2021-11-30 16:00:58 +02:00
|
|
|
|
const [troublesInputValue, setTroublesInputValue] = useState('');
|
|
|
|
|
const [scheduledInputValue, setScheduledInputValue] = useState('');
|
2021-06-22 18:00:52 +03:00
|
|
|
|
|
2021-11-30 16:00:58 +02:00
|
|
|
|
const addInput = () => {
|
2023-01-09 20:53:23 +03:00
|
|
|
|
setInputs((prev) => [...prev, {task: '', hours_spent: '', minutes_spent: 0}])
|
|
|
|
|
};
|
2021-06-22 18:00:52 +03:00
|
|
|
|
|
2023-02-07 15:11:11 +03:00
|
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-09 20:53:23 +03:00
|
|
|
|
const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0);
|
2022-10-19 15:41:11 +03:00
|
|
|
|
|
2021-11-30 16:00:58 +02:00
|
|
|
|
const deleteInput = (indexRemove) => {
|
2022-10-19 15:41:11 +03:00
|
|
|
|
if (indexRemove !== 0) {
|
2021-11-30 16:00:58 +02:00
|
|
|
|
setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
|
2021-06-29 17:58:15 +03:00
|
|
|
|
}
|
2023-01-09 20:53:23 +03:00
|
|
|
|
};
|
2021-06-22 18:00:52 +03:00
|
|
|
|
|
2023-01-16 19:12:44 +03:00
|
|
|
|
const handler = () => {
|
2023-01-24 19:11:24 +03:00
|
|
|
|
if(!inputs[0].task) {
|
|
|
|
|
setReportSuccess('Заполните задачи');
|
|
|
|
|
setTimeout(() => setReportSuccess(''), 1000)
|
|
|
|
|
return
|
|
|
|
|
}
|
2023-01-16 19:12:44 +03:00
|
|
|
|
apiRequest('/reports/create', {
|
|
|
|
|
method: 'POST',
|
2023-01-17 22:14:05 +03:00
|
|
|
|
data: {
|
2023-01-16 19:12:44 +03:00
|
|
|
|
tasks: inputs,
|
|
|
|
|
difficulties: troublesInputValue,
|
|
|
|
|
tomorrow: scheduledInputValue,
|
2023-02-07 15:11:11 +03:00
|
|
|
|
created_at: getCreatedDate(startDate),
|
2023-01-16 19:12:44 +03:00
|
|
|
|
status: 1,
|
|
|
|
|
},
|
|
|
|
|
}).then((res) => {
|
2023-01-24 19:11:24 +03:00
|
|
|
|
setReportSuccess('Отчет отправлен');
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
setReportSuccess('')
|
|
|
|
|
navigate('/profile/calendar');
|
|
|
|
|
}, 1000)
|
2023-01-16 19:12:44 +03:00
|
|
|
|
setInputs(() => []);
|
|
|
|
|
setTroublesInputValue('');
|
|
|
|
|
setScheduledInputValue('');
|
|
|
|
|
setIsFetching(false);
|
|
|
|
|
setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
2021-06-21 17:41:26 +03:00
|
|
|
|
return (
|
2023-01-09 20:53:23 +03:00
|
|
|
|
<section className='report-form'>
|
2023-01-13 15:53:07 +03:00
|
|
|
|
<ProfileHeader/>
|
|
|
|
|
<div className='container'>
|
|
|
|
|
<h2 className='summary__title'>Ваши отчеты - <span>добавить отчет</span></h2>
|
|
|
|
|
<div>
|
|
|
|
|
<div className='report__head'>
|
2023-01-16 20:38:33 +03:00
|
|
|
|
<Link className='calendar__back' to={`/profile/calendar`}>
|
2023-01-16 16:28:56 +03:00
|
|
|
|
<img src={arrow} alt=''/><p>Вернуться</p>
|
2023-01-13 15:53:07 +03:00
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='report-form__content'>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
<div className='report-form__block'>
|
|
|
|
|
<div className='report-form__block-title'>
|
2023-01-13 15:53:07 +03:00
|
|
|
|
<h2>Добавление отчета за день</h2>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
<h3>Дата заполнения отчета:</h3>
|
|
|
|
|
</div>
|
2023-02-07 15:11:11 +03:00
|
|
|
|
<div className='report-form__block-img' onClick={() => setDatePickerOpen(true)}>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
<img
|
|
|
|
|
className='report-form__calendar-icon'
|
|
|
|
|
src={calendarIcon}
|
|
|
|
|
alt=''
|
|
|
|
|
/>
|
2023-02-17 15:19:49 +03:00
|
|
|
|
{getCorrectDate(startDate)}
|
2023-01-09 20:53:23 +03:00
|
|
|
|
</div>
|
2023-02-07 15:11:11 +03:00
|
|
|
|
<DatePicker
|
|
|
|
|
className='datePicker'
|
|
|
|
|
open={datePickerOpen}
|
|
|
|
|
locale="ru"
|
|
|
|
|
selected={startDate}
|
|
|
|
|
onChange={(date) => {
|
|
|
|
|
setDatePickerOpen(false)
|
|
|
|
|
setStartDate(date)
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
<div className='report-form__task-list'>
|
|
|
|
|
<img src={ellipse} alt=''/>
|
|
|
|
|
<span>Какие задачи были выполнены?</span>
|
|
|
|
|
</div>
|
2021-06-21 17:41:26 +03:00
|
|
|
|
</div>
|
2021-06-22 18:00:52 +03:00
|
|
|
|
|
2023-01-13 15:53:07 +03:00
|
|
|
|
<div className='row'>
|
|
|
|
|
<div className='col-8'>
|
|
|
|
|
<div className='report-form__task-header'>
|
|
|
|
|
<p className='report-form__task-title--description'>
|
|
|
|
|
Краткое описание задачи
|
|
|
|
|
</p>
|
|
|
|
|
<p className='report-form__task-title--hours'>Количество часов</p>
|
|
|
|
|
</div>
|
2021-11-30 16:00:58 +02:00
|
|
|
|
|
2023-01-13 15:53:07 +03:00
|
|
|
|
{inputs.map((input, index) => {
|
|
|
|
|
return (
|
|
|
|
|
<form id={'input'} key={`input__${index}`} className='report-form__task-form'>
|
|
|
|
|
<div className='report-form__task-number'>
|
|
|
|
|
{index + 1}.
|
|
|
|
|
</div>
|
|
|
|
|
<div className='report-form__task-input report-form__task-input--description'>
|
|
|
|
|
<input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
|
|
|
|
|
return index === inputIndex
|
|
|
|
|
? {
|
|
|
|
|
...input,
|
|
|
|
|
task: e.target.value
|
|
|
|
|
}
|
|
|
|
|
: input
|
|
|
|
|
}))}/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='report-form__task-input report-form__task-input--hours'>
|
|
|
|
|
<input name='number' type='number' min='1'
|
|
|
|
|
onChange={e => setInputs(inputs.map((input, inputIndex) => {
|
|
|
|
|
return index === inputIndex
|
|
|
|
|
? {
|
|
|
|
|
...input,
|
|
|
|
|
hours_spent: Number(e.target.value)
|
|
|
|
|
}
|
|
|
|
|
: input
|
|
|
|
|
}))}/>
|
|
|
|
|
</div>
|
2023-02-17 15:19:49 +03:00
|
|
|
|
{index > 0 &&
|
2023-01-13 15:53:07 +03:00
|
|
|
|
<div className='report-form__task-remove'>
|
|
|
|
|
<img onClick={() => deleteInput(index)} src={remove} alt=''/>
|
|
|
|
|
</div>
|
2023-02-17 15:19:49 +03:00
|
|
|
|
}
|
2023-01-13 15:53:07 +03:00
|
|
|
|
</form>
|
|
|
|
|
)
|
|
|
|
|
})}
|
2021-11-30 16:00:58 +02:00
|
|
|
|
|
2023-01-13 15:53:07 +03:00
|
|
|
|
<div className='report-form__form-add'>
|
|
|
|
|
<img onClick={addInput} src={addIcon} alt=''/>
|
|
|
|
|
<span>Добавить еще </span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
</div>
|
2021-06-22 18:00:52 +03:00
|
|
|
|
|
2023-01-09 20:53:23 +03:00
|
|
|
|
<div className='row'>
|
|
|
|
|
<div className='col-12'>
|
|
|
|
|
<div className='report-form__input-box'>
|
|
|
|
|
<div className='report-form__troubles'>
|
|
|
|
|
<img src={ellipse} alt=''/>
|
|
|
|
|
<span>Какие сложности возникли?</span>
|
|
|
|
|
</div>
|
|
|
|
|
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/>
|
|
|
|
|
<div className='report-form__scheduled'>
|
|
|
|
|
<img src={ellipse} alt=''/>
|
|
|
|
|
<span>Что планируется сделать завтра?</span>
|
|
|
|
|
</div>
|
|
|
|
|
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
|
2021-06-22 18:00:52 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
<div className='row'>
|
|
|
|
|
<div className='col-12'>
|
|
|
|
|
<div className='report-form__footer'>
|
2023-01-16 19:12:44 +03:00
|
|
|
|
<button className='report-form__footer-btn' onClick={() => handler()}>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
{isFetching ? <Loader/> : 'Отправить'}
|
|
|
|
|
</button>
|
|
|
|
|
<p className='report-form__footer-text'>
|
|
|
|
|
Всего за день : <span>{totalHours} часов</span>
|
|
|
|
|
</p>
|
|
|
|
|
{reportSuccess &&
|
2023-01-24 19:11:24 +03:00
|
|
|
|
<p className={`report-form__footer-done ${reportSuccess === 'Заполните задачи' ? 'errorText' : ''}`}>{reportSuccess}</p>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
}
|
|
|
|
|
</div>
|
2021-06-22 18:00:52 +03:00
|
|
|
|
</div>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
</div>
|
2021-06-22 18:00:52 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-01-13 15:53:07 +03:00
|
|
|
|
<Footer/>
|
2023-01-09 20:53:23 +03:00
|
|
|
|
</section>
|
2021-11-30 16:00:58 +02:00
|
|
|
|
)
|
2023-01-09 20:53:23 +03:00
|
|
|
|
};
|
2021-06-21 17:41:26 +03:00
|
|
|
|
|
2021-11-30 16:00:58 +02:00
|
|
|
|
export default ReportForm
|