2023-10-06 17:41:26 +03:00
|
|
|
|
import ru from "date-fns/locale/ru";
|
2023-05-31 08:36:15 +03:00
|
|
|
|
import moment from "moment";
|
|
|
|
|
import "moment/locale/ru";
|
|
|
|
|
import React, { useEffect, useState } from "react";
|
2023-10-06 17:41:26 +03:00
|
|
|
|
import DatePicker, { registerLocale } from "react-datepicker";
|
|
|
|
|
import "react-datepicker/dist/react-datepicker.css";
|
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:41:26 +03:00
|
|
|
|
|
|
|
|
|
import { getCorrectYYMMDD } from "@utils/helper";
|
|
|
|
|
|
|
|
|
|
import { apiRequest } from "@api/request";
|
2023-05-31 08:36:15 +03:00
|
|
|
|
|
|
|
|
|
import "@components/Calendar/calendarComponent.scss";
|
2023-05-11 19:54:15 +03:00
|
|
|
|
import {
|
|
|
|
|
calendarHelper,
|
|
|
|
|
currentMonthAndDay,
|
2023-10-06 17:41:26 +03:00
|
|
|
|
getCorrectDate,
|
2023-05-11 19:54:15 +03:00
|
|
|
|
getReports,
|
|
|
|
|
hourOfNum,
|
2023-05-30 10:10:34 +03:00
|
|
|
|
} from "@components/Calendar/calendarHelper";
|
|
|
|
|
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:41:26 +03:00
|
|
|
|
|
2023-10-06 17:40:53 +03:00
|
|
|
|
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);
|
2023-10-06 17:41:26 +03:00
|
|
|
|
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) {
|
2023-10-06 17:41:26 +03:00
|
|
|
|
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);
|
2023-10-06 17:40:53 +03:00
|
|
|
|
}
|
2023-10-06 17:41:26 +03:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
setTotalRangeHours(spendTime);
|
|
|
|
|
});
|
2023-10-06 17:40:53 +03:00
|
|
|
|
}
|
|
|
|
|
|
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}
|
|
|
|
|
<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:41:26 +03:00
|
|
|
|
<div className="selectDateRange">
|
|
|
|
|
<span
|
|
|
|
|
className="select"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setDatePickerOpen(!datePickerOpen);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{endDate
|
|
|
|
|
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
|
|
|
|
|
: "Выбрать диапазон"}
|
|
|
|
|
</span>
|
|
|
|
|
<DatePicker
|
|
|
|
|
selected={startDate}
|
|
|
|
|
open={datePickerOpen}
|
2023-10-06 17:47:14 +03:00
|
|
|
|
locale="ru"
|
2023-10-06 17:41:26 +03:00
|
|
|
|
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>
|
2023-10-06 17:40:53 +03:00
|
|
|
|
</div>
|
2023-05-11 19:54:15 +03:00
|
|
|
|
{shortReport && <ShortReport />}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
);
|