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

# Conflicts:
#	package-lock.json

package.json

@@ -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",

src/components/ReportForm/ReportForm.js

@@ -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,7 +21,11 @@ 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) => {
     if (day) {
@@ -32,12 +39,14 @@ const getCreatedDate = (day) => {
     }
   };
 
-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>

src/components/ReportForm/reportForm.scss

@@ -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) {