guild_front/src/components/ProfileCalendar/ProfileCalendarComponent.jsx

231 lines
7.1 KiB
React
Raw Normal View History

2023-05-31 08:36:15 +03:00
import moment from "moment";
import "moment/locale/ru";
import React, { useEffect, useState } from "react";
2023-05-24 15:34:43 +03:00
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import {
setReportDate,
setRequestDate,
setSendRequest,
2023-05-30 10:10:34 +03:00
} from "@redux/reportSlice";
2023-10-06 17:40:53 +03:00
import DatePicker, { registerLocale } from "react-datepicker";
import ru from "date-fns/locale/ru";
import "react-datepicker/dist/react-datepicker.css";
2023-05-31 08:36:15 +03:00
import "@components/Calendar/calendarComponent.scss";
2023-05-11 19:54:15 +03:00
import {
2023-10-06 17:40:53 +03:00
getCorrectDate,
2023-05-11 19:54:15 +03:00
calendarHelper,
currentMonthAndDay,
getReports,
hourOfNum,
2023-05-30 10:10:34 +03:00
} from "@components/Calendar/calendarHelper";
2023-10-06 17:40:53 +03:00
import { getCorrectYYMMDD } from "@utils/helper";
2023-05-30 10:10:34 +03:00
import ShortReport from "@components/ShortReport/ShortReport";
2023-05-11 19:54:15 +03:00
2023-05-30 10:10:34 +03:00
import arrow from "assets/icons/arrows/arrowCalendar.png";
import calendarIcon from "assets/icons/calendar.svg";
2023-05-31 08:36:15 +03:00
import rectangle from "assets/images/rectangle__calendar.png";
2023-10-06 17:40:53 +03:00
import { apiRequest } from "@api/request";
registerLocale("ru", ru);
2023-05-11 19:54:15 +03:00
2023-05-31 11:24:46 +03:00
// eslint-disable-next-line react/display-name
2023-05-11 19:54:15 +03:00
export const ProfileCalendarComponent = React.memo(
({ value, setValueHandler, reports, totalHours }) => {
2022-12-26 15:12:01 +03:00
const dispatch = useDispatch();
2023-05-18 19:52:37 +03:00
2023-05-11 19:54:15 +03:00
const [currentDay] = useState(moment());
const [calendar, setCalendar] = useState([]);
const [month, setMonth] = useState("");
const [shortReport, setShortReport] = useState(false);
2023-10-06 17:40:53 +03:00
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(null);
const [datePickerOpen, setDatePickerOpen] = useState(false);
const [totalRangeHours, setTotalRangeHours] = useState(0)
2022-12-26 15:12:01 +03:00
useEffect(() => {
2023-05-11 19:54:15 +03:00
setCalendar(calendarHelper(value));
}, [value]);
2022-12-26 15:12:01 +03:00
2023-02-17 15:19:49 +03:00
useEffect(() => {
2023-05-11 19:54:15 +03:00
setMonth(value.format("MMMM"));
2023-02-17 15:19:49 +03:00
}, [month]);
2022-12-26 15:12:01 +03:00
function isToday(day) {
2023-05-11 19:54:15 +03:00
return day.isSame(new Date(), "day");
2022-12-26 15:12:01 +03:00
}
2023-01-16 16:28:56 +03:00
function correctDay(day) {
2023-05-11 19:54:15 +03:00
if (day < 10) {
return `0${day}`;
}
return day;
2023-01-16 16:28:56 +03:00
}
2022-12-26 15:12:01 +03:00
function dayStyles(day) {
2023-05-11 19:54:15 +03:00
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`;
2022-12-26 15:12:01 +03:00
}
2023-05-11 19:54:15 +03:00
}
if (day.day() === 6 || day.day() === 0) return `selected`;
if (isToday(day)) return `today`;
return "pass";
2022-12-26 15:12:01 +03:00
}
2023-01-16 16:28:56 +03:00
function correctRoute(day) {
2023-05-11 19:54:15 +03:00
for (const date of reports) {
if (
`${new Date(day).getFullYear()}-${correctDay(
new Date(day).getMonth() + 1
)}-${correctDay(new Date(day).getDate())}` === date.created_at
) {
2023-05-24 16:04:36 +03:00
return "#";
2023-01-16 16:28:56 +03:00
}
2023-05-11 19:54:15 +03:00
}
return "../../report";
2023-01-16 16:28:56 +03:00
}
2023-02-09 20:46:02 +03:00
function prevMonth() {
2023-05-11 19:54:15 +03:00
return value.clone().subtract(1, "month");
2023-02-09 20:46:02 +03:00
}
function nextMonth() {
2023-05-11 19:54:15 +03:00
return value.clone().add(1, "month");
2023-02-09 20:46:02 +03:00
}
2022-12-26 15:12:01 +03:00
2023-10-06 17:40:53 +03:00
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)
})
}
2022-12-26 15:12:01 +03:00
return (
2023-05-11 19:54:15 +03:00
<div className="calendar-component">
<div className="calendar-component__header">
<div className="calendar-component__header-info">
<h3>Мои отчеты:</h3>
<p className="calendar__hours">
{month}&nbsp;
<span>
{totalHours} {hourOfNum(totalHours)}{" "}
</span>
</p>
</div>
<div className="calendar-component__header-switcher">
<div
className="calendar-component__header-box"
onClick={() => {
setValueHandler(prevMonth());
dispatch(setRequestDate(getReports(prevMonth())));
}}
>
<img src={arrow} alt="" />
<span>{prevMonth().format("MMMM")}</span>
2022-12-26 15:12:01 +03:00
</div>
2023-05-11 19:54:15 +03:00
<div className="calendar-component__header-box">
<span>{value.format("YYYY")}</span>
2022-12-26 15:12:01 +03:00
</div>
2023-05-11 19:54:15 +03:00
<div
className="calendar-component__header-box"
onClick={() => {
setValueHandler(nextMonth());
dispatch(setRequestDate(getReports(nextMonth())));
}}
>
<span>{nextMonth().format("MMMM")}</span>
<img src={arrow} alt="" />
2022-12-26 15:12:01 +03:00
</div>
2023-05-11 19:54:15 +03:00
</div>
</div>
<div className="calendar-component__rectangle">
<img src={rectangle} alt="" />
2022-12-26 15:12:01 +03:00
</div>
2023-05-11 19:54:15 +03:00
<div className="calendar-component__body">
<div>
<p>Пн</p>
<p>Вт</p>
<p>Ср</p>
<p>Чт</p>
<p>Пт</p>
<p>Сб</p>
<p>Вс</p>
</div>
<div className="calendar-component__form">
{calendar.map((week) =>
week.map((day) => (
<button
onClick={() => {
dispatch(setReportDate(day));
2023-05-18 19:52:37 +03:00
setShortReport(true);
dispatch(setSendRequest(true));
2023-05-11 19:54:15 +03:00
}}
key={day}
className={dayStyles(day)}
name={day.format("dddd")}
id="btn"
>
2023-05-18 19:52:37 +03:00
<Link to={correctRoute(day)}>
2023-05-11 19:54:15 +03:00
<img
className={"calendar__icon"}
src={calendarIcon}
alt=""
/>
{currentMonthAndDay(day)}
2023-05-16 19:20:37 +03:00
</Link>
2023-05-11 19:54:15 +03:00
</button>
))
)}
</div>
</div>
2023-10-06 17:40:53 +03:00
<div className='selectDateRange'>
<span className='select' onClick={() => {setDatePickerOpen(!datePickerOpen)}}>
{endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : 'Выбрать диапазон'}
</span>
<DatePicker
selected={startDate}
open={datePickerOpen}
startDate={startDate}
endDate={endDate}
onChange={(dates) => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
if (end) {
setDatePickerOpen(false)
reportsByDate(start, end)
}
}}
selectsRange
/>
<span>{totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : '0 часов'}</span>
</div>
2023-05-11 19:54:15 +03:00
{shortReport && <ShortReport />}
</div>
);
}
);