Merge remote-tracking branch 'origin/main' into main

# Conflicts:
#	package-lock.json
This commit is contained in:
Дмитрий Савенко 2023-02-07 18:39:05 +03:00
commit dbfab55bd3
3 changed files with 96 additions and 18 deletions

View File

@ -31,6 +31,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-app-polyfill": "^2.0.0", "react-app-polyfill": "^2.0.0",
"react-bootstrap": "^1.6.0", "react-bootstrap": "^1.6.0",
"react-datepicker": "^4.10.0",
"react-dev-utils": "^12.0.1", "react-dev-utils": "^12.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-inlinesvg": "3.0.1", "react-inlinesvg": "3.0.1",

View File

@ -1,6 +1,9 @@
import React, {useState} from 'react' import React, {useState, useEffect} from 'react'
import {useSelector} from 'react-redux' import {useSelector} from 'react-redux'
import {Link, useNavigate} from 'react-router-dom' 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 {Loader} from '../Loader/Loader'
import {currentMonthAndDay} from '../Calendar/calendarHelper' import {currentMonthAndDay} from '../Calendar/calendarHelper'
@ -18,9 +21,13 @@ import addIcon from '../../images/addIcon.png'
import arrow from "../../images/right-arrow.png"; import arrow from "../../images/right-arrow.png";
import './reportForm.scss' 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) { if (day) {
return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}` return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
} else { } else {
@ -30,14 +37,16 @@ const getCreatedDate = (day) => {
const yyyy = date.getFullYear(); const yyyy = date.getFullYear();
return `${yyyy}-${mm}-${dd}` return `${yyyy}-${mm}-${dd}`
} }
}; };
const ReportForm = () => { useEffect(() => {
const navigate= useNavigate(); initListeners()
const reportDate = useSelector(getReportDate); }, [])
const [isFetching, setIsFetching] = useState(false); const [isFetching, setIsFetching] = useState(false);
const [reportSuccess, setReportSuccess] = useState(''); 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 [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
const [troublesInputValue, setTroublesInputValue] = useState(''); const [troublesInputValue, setTroublesInputValue] = useState('');
@ -47,6 +56,18 @@ const ReportForm = () => {
setInputs((prev) => [...prev, {task: '', hours_spent: '', minutes_spent: 0}]) 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 totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0);
const deleteInput = (indexRemove) => { const deleteInput = (indexRemove) => {
@ -67,7 +88,7 @@ const ReportForm = () => {
tasks: inputs, tasks: inputs,
difficulties: troublesInputValue, difficulties: troublesInputValue,
tomorrow: scheduledInputValue, tomorrow: scheduledInputValue,
created_at: getCreatedDate(reportDate), created_at: getCreatedDate(startDate),
status: 1, status: 1,
}, },
}).then((res) => { }).then((res) => {
@ -103,15 +124,24 @@ const ReportForm = () => {
<h2>Добавление отчета за день</h2> <h2>Добавление отчета за день</h2>
<h3>Дата заполнения отчета:</h3> <h3>Дата заполнения отчета:</h3>
</div> </div>
<div className='report-form__block-img'> <div className='report-form__block-img' onClick={() => setDatePickerOpen(true)}>
<img <img
className='report-form__calendar-icon' className='report-form__calendar-icon'
src={calendarIcon} src={calendarIcon}
alt='' alt=''
/> />
{/*{currentMonthAndDayReportPage()}*/} {getCreatedDate(startDate)}
{reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
</div> </div>
<DatePicker
className='datePicker'
open={datePickerOpen}
locale="ru"
selected={startDate}
onChange={(date) => {
setDatePickerOpen(false)
setStartDate(date)
}}
/>
<div className='report-form__task-list'> <div className='report-form__task-list'>
<img src={ellipse} alt=''/> <img src={ellipse} alt=''/>
<span>Какие задачи были выполнены?</span> <span>Какие задачи были выполнены?</span>

View File

@ -346,6 +346,53 @@
height: 23px; 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) { @media (max-width: 575.98px) {