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 { getCorrectYYMMDD } from "@utils/helper"; import { apiRequest } from "@api/request"; import "@components/Calendar/calendarComponent.scss"; import { calendarHelper, currentMonthAndDay, getCorrectDate, getReports, hourOfNum, } from "@components/Calendar/calendarHelper"; 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 close from "assets/icons/closeProjectPersons.svg"; // 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(null); const [endDate, setEndDate] = useState(null); const [startRangeDays, setStartRangeDays] = useState(false) const [totalRangeHours, setTotalRangeHours] = useState(0); const [selectedRangeDays, setSelectedRangeDays] = useState({}) useEffect(() => { setCalendar(calendarHelper(value)); calendarHelper(value).map((array) => { setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false})) }) }, [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(endDay) { const requestDates = `fromDate=${getCorrectYYMMDD(startDate._d)}&toDate=${getCorrectYYMMDD(endDay._d)}`; 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); }); } function rangeDays (day) { if (!startDate) { setStartDate(day) } else { setEndDate(day) reportsByDate(day) } } function onMouseRangeDays (day) { let selectRange = {} for (let curDay in selectedRangeDays) { if (day > startDate && new Date(curDay) > startDate && new Date(curDay) < day) { selectRange[curDay] = true } else { selectRange[curDay] = false } } setSelectedRangeDays(selectRange) } function resetRangeDays () { setStartDate(null) setEndDate(null) setTotalRangeHours(0) calendarHelper(value).map((array) => { setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false})) }) } return (
{month} {totalHours} {hourOfNum(totalHours)}{" "}
Пн
Вт
Ср
Чт
Пт
Сб
Вс