135 lines
4.2 KiB
React
Raw Normal View History

2023-05-31 08:36:15 +03:00
import moment from "moment";
import "moment/locale/ru";
2023-05-11 19:54:15 +03:00
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
2023-05-24 15:34:43 +03:00
import { Link, Navigate } from "react-router-dom";
2023-05-30 10:10:34 +03:00
import { getProfileInfo } from "@redux/outstaffingSlice";
2023-05-11 19:54:15 +03:00
import {
getRequestDates,
setReportDate,
2023-12-19 17:36:30 +03:00
setRequestDate
2023-05-30 10:10:34 +03:00
} from "@redux/reportSlice";
2023-01-16 21:11:46 +03:00
2023-05-31 08:36:15 +03:00
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import { getReports } from "@components/Calendar/calendarHelper";
2023-05-30 10:54:47 +03:00
import { Footer } from "@components/Common/Footer/Footer";
2023-05-31 08:36:15 +03:00
import { Loader } from "@components/Common/Loader/Loader";
2023-05-30 10:10:34 +03:00
import { Navigation } from "@components/Navigation/Navigation";
2023-05-31 08:36:15 +03:00
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
2023-05-30 10:10:34 +03:00
2023-11-05 20:41:40 +03:00
import avatarMok from "assets/images/avatarMok.png";
2023-11-05 20:42:03 +03:00
import { ProfileCalendarComponent } from "./ProfileCalendarComponent";
2023-05-11 19:54:15 +03:00
import "./profileCalendar.scss";
2022-12-26 15:12:01 +03:00
export const ProfileCalendar = () => {
2023-05-11 19:54:15 +03:00
if (localStorage.getItem("role_status") === "18") {
return <Navigate to="/profile" replace />;
}
const dispatch = useDispatch();
const profileInfo = useSelector(getProfileInfo);
const requestDates = useSelector(getRequestDates);
const [value, setValue] = useState(moment());
const [reports, setReports] = useState([]);
const [totalHours, setTotalHours] = useState(0);
const [loader, setLoader] = useState(true);
2023-10-10 19:21:34 +03:00
const [startRangeDays, setStartRangeDays] = useState(false);
2023-10-12 12:50:02 +03:00
const [startDate, setStartDate] = useState(null);
2023-05-11 19:54:15 +03:00
useEffect(() => {
dispatch(setRequestDate(getReports(moment())));
}, []);
2022-12-26 15:12:01 +03:00
2023-05-11 19:54:15 +03:00
useEffect(() => {
setLoader(true);
if (!requestDates) {
return;
}
2024-02-01 23:32:16 +03:00
apiRequest(
`/reports/index?${requestDates}&user_id=${localStorage.getItem("id")}`
2023-05-11 19:54:15 +03:00
).then((reports) => {
let spendTime = 0;
2023-12-20 16:15:14 +03:00
2023-12-20 16:14:30 +03:00
reports
.filter(
(item) => new Date(item.created_at).getMonth() === value.month()
)
.map((report) => {
spendTime += report.task.reduce(
(acc, task) => acc + task.hours_spent,
0
);
2023-05-11 19:54:15 +03:00
});
2023-12-20 16:14:30 +03:00
setTotalHours(Math.floor(spendTime));
2023-05-11 19:54:15 +03:00
setReports(reports);
setLoader(false);
});
}, [requestDates]);
2022-12-26 15:12:01 +03:00
2023-05-11 19:54:15 +03:00
return (
<div className="profile__calendar">
<ProfileHeader />
<Navigation />
<div className="container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
2023-12-19 17:36:30 +03:00
{ name: "Отчеты", link: "/profile/calendar" }
2023-05-11 19:54:15 +03:00
]}
/>
<h2 className="summary__title">Ваши отчеты</h2>
<div className="summary__info">
<div className="summary__person">
<img
2023-11-05 20:42:03 +03:00
src={
profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
}
2023-05-11 19:54:15 +03:00
className="summary__avatar"
alt="avatar"
/>
<p className="summary__name">
2023-11-05 20:42:03 +03:00
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
{profileInfo.specification} разработчик
2023-05-11 19:54:15 +03:00
</p>
</div>
<Link to="/profile/calendar/report">
2023-05-11 19:54:15 +03:00
<button
className="calendar__btn"
2023-12-04 20:13:10 +03:00
onClick={() => dispatch(setReportDate(""))}
2023-05-11 19:54:15 +03:00
>
2023-12-04 20:13:10 +03:00
Заполнить отчет
2023-05-11 19:54:15 +03:00
</button>
</Link>
2023-01-13 15:53:07 +03:00
</div>
2023-05-11 19:54:15 +03:00
{loader ? (
<div className="loader__wrapper">
<Loader height={80} width={80} />
</div>
) : (
<div className="row calendar__wrapper">
<div className="col-12 col-xl-12">
<ProfileCalendarComponent
2023-12-20 16:14:30 +03:00
setValueHandler={(value) => setValue(value)}
2023-05-11 19:54:15 +03:00
value={value}
reports={reports}
totalHours={totalHours}
2023-10-10 19:21:34 +03:00
startRangeDays={startRangeDays}
2023-12-20 16:14:30 +03:00
toggleRangeDays={() => setStartRangeDays(!startRangeDays)}
2023-10-12 12:50:02 +03:00
startDate={startDate}
2023-12-20 16:14:30 +03:00
setStartDateRange={(date) => setStartDate(date)}
2023-05-11 19:54:15 +03:00
/>
</div>
</div>
)}
</div>
<Footer />
</div>
);
2022-12-26 15:12:01 +03:00
};