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, 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 { 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); function setValueHandler(value) { setValue(value); } function toggleStartRangeDays () { setStartRangeDays(!startRangeDays) } useEffect(() => { dispatch(setRequestDate(getReports(moment()))); }, []); useEffect(() => { setLoader(true); if (!requestDates) { return; } 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); } }); } setTotalHours(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={urlForLocal(profileInfo.photo)} className="summary__avatar" alt="avatar" /> <p className="summary__name"> {profileInfo.fio}, {profileInfo.specification} разработчик </p> </div> <Link to="/report"> <button className="calendar__btn" onClick={() => { dispatch(setReportDate("")); }} > Заполнить отчет за день </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={setValueHandler} value={value} reports={reports} totalHours={totalHours} startRangeDays={startRangeDays} toggleRangeDays={toggleStartRangeDays} /> </div> </div> )} </div> <Footer /> </div> ); };