139 lines
4.3 KiB
JavaScript
139 lines
4.3 KiB
JavaScript
import moment from "moment";
|
|
import "moment/locale/ru";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { Link, Navigate } from "react-router-dom";
|
|
|
|
import { getProfileInfo } from "@redux/outstaffingSlice";
|
|
import {
|
|
getRequestDates,
|
|
setEditReport,
|
|
setReportDate,
|
|
setRequestDate
|
|
} from "@redux/reportSlice";
|
|
|
|
import { urlForLocal } from "@utils/helper";
|
|
|
|
import { apiRequest } from "@api/request";
|
|
|
|
import { getReports } from "@components/Calendar/calendarHelper";
|
|
import { Footer } from "@components/Common/Footer/Footer";
|
|
import { Loader } from "@components/Common/Loader/Loader";
|
|
import { Navigation } from "@components/Navigation/Navigation";
|
|
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
|
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
|
|
|
import avatarMok from "assets/images/avatarMok.png";
|
|
|
|
import { ProfileCalendarComponent } from "./ProfileCalendarComponent";
|
|
import "./profileCalendar.scss";
|
|
|
|
export const ProfileCalendar = () => {
|
|
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);
|
|
const [startRangeDays, setStartRangeDays] = useState(false);
|
|
const [startDate, setStartDate] = useState(null);
|
|
|
|
useEffect(() => {
|
|
dispatch(setRequestDate(getReports(moment())));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setLoader(true);
|
|
if (!requestDates) {
|
|
return;
|
|
}
|
|
apiRequest(
|
|
`/reports/index?${requestDates}&user_id=${localStorage.getItem("id")}`
|
|
).then((reports) => {
|
|
let spendTime = 0;
|
|
|
|
reports
|
|
.filter(
|
|
(item) => new Date(item.created_at).getMonth() === value.month()
|
|
)
|
|
.map((report) => {
|
|
spendTime += report.task.reduce(
|
|
(acc, task) => acc + task.hours_spent,
|
|
0
|
|
);
|
|
});
|
|
|
|
setTotalHours(Math.floor(spendTime));
|
|
setReports(reports);
|
|
setLoader(false);
|
|
});
|
|
}, [requestDates]);
|
|
|
|
return (
|
|
<div className="profile__calendar">
|
|
<ProfileHeader />
|
|
<Navigation />
|
|
<div className="container">
|
|
<ProfileBreadcrumbs
|
|
links={[
|
|
{ name: "Главная", link: "/profile" },
|
|
{ name: "Отчеты", link: "/profile/calendar" }
|
|
]}
|
|
/>
|
|
<h2 className="summary__title">Ваши отчеты</h2>
|
|
<div className="summary__info">
|
|
<div className="summary__person">
|
|
<img
|
|
src={
|
|
profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
|
|
}
|
|
className="summary__avatar"
|
|
alt="avatar"
|
|
/>
|
|
<p className="summary__name">
|
|
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
|
|
{profileInfo.specification} разработчик
|
|
</p>
|
|
</div>
|
|
<Link to="/profile/calendar/report">
|
|
<button
|
|
className="calendar__btn"
|
|
onClick={() => {
|
|
dispatch(setReportDate(""));
|
|
dispatch(setEditReport(""));
|
|
}}
|
|
>
|
|
Заполнить отчет
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
{loader ? (
|
|
<div className="loader__wrapper">
|
|
<Loader height={80} width={80} />
|
|
</div>
|
|
) : (
|
|
<div className="row calendar__wrapper">
|
|
<div className="col-12 col-xl-12">
|
|
<ProfileCalendarComponent
|
|
setValueHandler={(value) => setValue(value)}
|
|
value={value}
|
|
reports={reports}
|
|
totalHours={totalHours}
|
|
startRangeDays={startRangeDays}
|
|
toggleRangeDays={() => setStartRangeDays(!startRangeDays)}
|
|
startDate={startDate}
|
|
setStartDateRange={(date) => setStartDate(date)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|