import moment from "moment"; import "moment/locale/ru"; import React, { useEffect, useState } from "react"; import { useDispatch } from "react-redux"; import { Link } from "react-router-dom"; import { setReportDate, setRequestDate, setSendRequest, } from "@redux/reportSlice"; import DatePicker, { registerLocale } from "react-datepicker"; import ru from "date-fns/locale/ru"; import "react-datepicker/dist/react-datepicker.css"; import "@components/Calendar/calendarComponent.scss"; import { getCorrectDate, calendarHelper, currentMonthAndDay, getReports, hourOfNum, } from "@components/Calendar/calendarHelper"; import { getCorrectYYMMDD } from "@utils/helper"; import ShortReport from "@components/ShortReport/ShortReport"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import calendarIcon from "assets/icons/calendar.svg"; import rectangle from "assets/images/rectangle__calendar.png"; import { apiRequest } from "@api/request"; registerLocale("ru", ru); // eslint-disable-next-line react/display-name export const ProfileCalendarComponent = React.memo( ({ value, setValueHandler, reports, totalHours }) => { const dispatch = useDispatch(); const [currentDay] = useState(moment()); const [calendar, setCalendar] = useState([]); const [month, setMonth] = useState(""); const [shortReport, setShortReport] = useState(false); const [startDate, setStartDate] = useState(new Date()); const [endDate, setEndDate] = useState(null); const [datePickerOpen, setDatePickerOpen] = useState(false); const [totalRangeHours, setTotalRangeHours] = useState(0) useEffect(() => { setCalendar(calendarHelper(value)); }, [value]); useEffect(() => { setMonth(value.format("MMMM")); }, [month]); function isToday(day) { return day.isSame(new Date(), "day"); } function correctDay(day) { if (day < 10) { return `0${day}`; } return day; } function dayStyles(day) { if (currentDay < day) return `block`; for (const date of reports) { if ( `${new Date(day).getFullYear()}-${correctDay( new Date(day).getMonth() + 1 )}-${correctDay(new Date(day).getDate())}` === date.created_at ) { return `before`; } } if (day.day() === 6 || day.day() === 0) return `selected`; if (isToday(day)) return `today`; return "pass"; } function correctRoute(day) { for (const date of reports) { if ( `${new Date(day).getFullYear()}-${correctDay( new Date(day).getMonth() + 1 )}-${correctDay(new Date(day).getDate())}` === date.created_at ) { return "#"; } } return "../../report"; } function prevMonth() { return value.clone().subtract(1, "month"); } function nextMonth() { return value.clone().add(1, "month"); } function reportsByDate(start, end) { const requestDates = `fromDate=${getCorrectYYMMDD(start)}&toDate=${getCorrectYYMMDD(end)}` apiRequest( `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( "cardId" )}` ).then((reports) => { let spendTime = 0; for (const report of reports) { report.task.map((task) => { if (task.hours_spent) { spendTime += Number(task.hours_spent); } }); } setTotalRangeHours(spendTime) }) } return (

Мои отчеты:

{month}  {totalHours} {hourOfNum(totalHours)}{" "}

{ setValueHandler(prevMonth()); dispatch(setRequestDate(getReports(prevMonth()))); }} > {prevMonth().format("MMMM")}
{value.format("YYYY")}
{ setValueHandler(nextMonth()); dispatch(setRequestDate(getReports(nextMonth()))); }} > {nextMonth().format("MMMM")}

Пн

Вт

Ср

Чт

Пт

Сб

Вс

{calendar.map((week) => week.map((day) => ( )) )}
{setDatePickerOpen(!datePickerOpen)}}> {endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : 'Выбрать диапазон'} { const [start, end] = dates; setStartDate(start); setEndDate(end); if (end) { setDatePickerOpen(false) reportsByDate(start, end) } }} selectsRange /> {totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : '0 часов'}
{shortReport && }
); } );