Merge remote-tracking branch 'origin/main' into main
# Conflicts: # package-lock.json
This commit is contained in:
commit
dbfab55bd3
@ -31,6 +31,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-app-polyfill": "^2.0.0",
|
||||
"react-bootstrap": "^1.6.0",
|
||||
"react-datepicker": "^4.10.0",
|
||||
"react-dev-utils": "^12.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-inlinesvg": "3.0.1",
|
||||
|
@ -1,6 +1,9 @@
|
||||
import React, {useState} from 'react'
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import {useSelector} from 'react-redux'
|
||||
import {Link, useNavigate} from 'react-router-dom'
|
||||
import DatePicker, { registerLocale } from "react-datepicker"
|
||||
import ru from "date-fns/locale/ru"
|
||||
registerLocale("ru", ru);
|
||||
|
||||
import {Loader} from '../Loader/Loader'
|
||||
import {currentMonthAndDay} from '../Calendar/calendarHelper'
|
||||
@ -18,9 +21,13 @@ 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 = () => {
|
||||
const navigate= useNavigate();
|
||||
const reportDate = useSelector(getReportDate);
|
||||
|
||||
const getCreatedDate = (day) => {
|
||||
const getCreatedDate = (day) => {
|
||||
if (day) {
|
||||
return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
|
||||
} else {
|
||||
@ -30,14 +37,16 @@ const getCreatedDate = (day) => {
|
||||
const yyyy = date.getFullYear();
|
||||
return `${yyyy}-${mm}-${dd}`
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const ReportForm = () => {
|
||||
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('');
|
||||
@ -47,6 +56,18 @@ const ReportForm = () => {
|
||||
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) => {
|
||||
@ -67,7 +88,7 @@ const ReportForm = () => {
|
||||
tasks: inputs,
|
||||
difficulties: troublesInputValue,
|
||||
tomorrow: scheduledInputValue,
|
||||
created_at: getCreatedDate(reportDate),
|
||||
created_at: getCreatedDate(startDate),
|
||||
status: 1,
|
||||
},
|
||||
}).then((res) => {
|
||||
@ -103,15 +124,24 @@ const ReportForm = () => {
|
||||
<h2>Добавление отчета за день</h2>
|
||||
<h3>Дата заполнения отчета:</h3>
|
||||
</div>
|
||||
<div className='report-form__block-img'>
|
||||
<div className='report-form__block-img' onClick={() => setDatePickerOpen(true)}>
|
||||
<img
|
||||
className='report-form__calendar-icon'
|
||||
src={calendarIcon}
|
||||
alt=''
|
||||
/>
|
||||
{/*{currentMonthAndDayReportPage()}*/}
|
||||
{reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
|
||||
{getCreatedDate(startDate)}
|
||||
</div>
|
||||
<DatePicker
|
||||
className='datePicker'
|
||||
open={datePickerOpen}
|
||||
locale="ru"
|
||||
selected={startDate}
|
||||
onChange={(date) => {
|
||||
setDatePickerOpen(false)
|
||||
setStartDate(date)
|
||||
}}
|
||||
/>
|
||||
<div className='report-form__task-list'>
|
||||
<img src={ellipse} alt=''/>
|
||||
<span>Какие задачи были выполнены?</span>
|
||||
|
@ -346,6 +346,53 @@
|
||||
height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.datePicker {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.react-datepicker {
|
||||
border: 1px solid #398208;
|
||||
}
|
||||
|
||||
.react-datepicker-popper {
|
||||
top: -15px !important;
|
||||
}
|
||||
|
||||
.react-datepicker__current-month {
|
||||
font-size: 14px;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.react-datepicker__header {
|
||||
padding: 5px 0 10px;
|
||||
border-bottom: 1px solid #398208;
|
||||
}
|
||||
|
||||
.react-datepicker__day {
|
||||
font-size: 14px;
|
||||
width: 35px;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
}
|
||||
|
||||
.react-datepicker__day-name {
|
||||
font-size: 14px;
|
||||
width: 35px;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
}
|
||||
|
||||
.react-datepicker__triangle {
|
||||
left: -15px !important;
|
||||
|
||||
&:before {
|
||||
border-bottom-color: #398208 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
|
Loading…
Reference in New Issue
Block a user