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-01-16 19:57:55 +03:00
|
|
|
|
2023-05-30 10:10:34 +03:00
|
|
|
import { getProfileInfo } from "@redux/outstaffingSlice";
|
2023-05-11 19:54:15 +03:00
|
|
|
import {
|
|
|
|
getRequestDates,
|
|
|
|
setReportDate,
|
|
|
|
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";
|
2023-01-20 16:20:06 +03:00
|
|
|
|
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-01-16 15:24:08 +03:00
|
|
|
|
2023-05-11 19:54:15 +03:00
|
|
|
function setValueHandler(value) {
|
|
|
|
setValue(value);
|
|
|
|
}
|
2022-12-26 15:12:01 +03:00
|
|
|
|
2023-10-12 12:50:17 +03:00
|
|
|
function setStartDateRange(date) {
|
|
|
|
setStartDate(date);
|
2023-10-12 12:50:02 +03:00
|
|
|
}
|
|
|
|
|
2023-10-10 19:21:46 +03:00
|
|
|
function toggleStartRangeDays() {
|
|
|
|
setStartRangeDays(!startRangeDays);
|
2023-10-10 19:21:34 +03:00
|
|
|
}
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
apiRequest(
|
|
|
|
`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
|
2023-12-04 20:13:10 +03:00
|
|
|
"cardId"
|
|
|
|
)}`
|
2023-05-11 19:54:15 +03:00
|
|
|
).then((reports) => {
|
|
|
|
let spendTime = 0;
|
|
|
|
for (const report of reports) {
|
|
|
|
report.task.map((task) => {
|
|
|
|
if (task.hours_spent) {
|
|
|
|
spendTime += Number(task.hours_spent);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
setTotalHours(spendTime);
|
|
|
|
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-04 19:28:40 +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="/report">
|
|
|
|
<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
|
|
|
|
setValueHandler={setValueHandler}
|
|
|
|
value={value}
|
|
|
|
reports={reports}
|
|
|
|
totalHours={totalHours}
|
2023-10-10 19:21:34 +03:00
|
|
|
startRangeDays={startRangeDays}
|
|
|
|
toggleRangeDays={toggleStartRangeDays}
|
2023-10-12 12:50:02 +03:00
|
|
|
startDate={startDate}
|
|
|
|
setStartDateRange={setStartDateRange}
|
2023-05-11 19:54:15 +03:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<Footer />
|
|
|
|
</div>
|
|
|
|
);
|
2022-12-26 15:12:01 +03:00
|
|
|
};
|