Working in calendar

This commit is contained in:
MaxOvs19 2023-05-11 19:54:15 +03:00
parent e145e6084c
commit fb0ce999f6
9 changed files with 673 additions and 397 deletions

View File

@ -88,8 +88,9 @@ const App = () => {
<Route index element={<Profile />} /> <Route index element={<Profile />} />
<Route exact path="catalog" element={<Home />} /> <Route exact path="catalog" element={<Home />} />
<Route exact path="calendar" element={<ProfileCalendar />} /> <Route exact path="calendar" element={<ProfileCalendar />} />
<Route exact path="calendar/view/" element={<ProfileCalendar />} />
<Route exact path="summary" element={<Summary />} /> <Route exact path="summary" element={<Summary />} />
<Route exact path="view" element={<ViewReport />} /> <Route exact path="view/:id" element={<ViewReport />} />
<Route exact path="tracker" element={<Tracker />} /> <Route exact path="tracker" element={<Tracker />} />
<Route exact path="payouts" element={<Payouts />} /> <Route exact path="payouts" element={<Payouts />} />
<Route exact path="settings" element={<PartnerSettings />} /> <Route exact path="settings" element={<PartnerSettings />} />

View File

@ -7,7 +7,7 @@
padding-right: 54px; padding-right: 54px;
padding-top: 48px; padding-top: 48px;
padding-bottom: 40px; padding-bottom: 40px;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
&__header { &__header {
display: flex; display: flex;
@ -56,7 +56,6 @@
} }
h3 { h3 {
font-size: 2.5em; font-size: 2.5em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -142,8 +141,8 @@
button { button {
margin: 0 auto; margin: 0 auto;
//width: 125px; width: 125px;
//height: 42px; height: 42px;
padding: 0 5px; padding: 0 5px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px; border-radius: 5px;
@ -157,40 +156,31 @@
line-height: normal; line-height: normal;
text-align: center; text-align: center;
a { img {
display: flex; width: 16px;
align-items: center; height: 16px;
justify-content: center; margin: 0 10px 0 0;
width: 115px;
height: 42px;
text-decoration: none;
color: #000000;
img {
width: 16px;
height: 16px;
margin: 0 10px 0 0;
}
@media (max-width: 1200px) {
width: 90px;
height: 40px;
}
@media (max-width: 968px) { @media (max-width: 968px) {
width: 62px; margin-right: 2px;
height: 40px;
font-size: 10px;
img { @media (max-width: 610px) {
margin-right: 2px;
}
}
@media (max-width: 610px) {
img {
display: none; display: none;
} }
}
}
@media (max-width: 1200px) {
width: 90px;
height: 40px;
}
@media (max-width: 968px) {
width: 62px;
height: 40px;
font-size: 10px;
@media (max-width: 610px) {
width: auto; width: auto;
height: auto; height: auto;
} }

View File

@ -1,99 +1,127 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from "react";
import {useDispatch, useSelector} from 'react-redux' import { useDispatch, useSelector } from "react-redux";
import {getReports} from '../Calendar/calendarHelper' import { getReports } from "../Calendar/calendarHelper";
import {Link, Navigate} from 'react-router-dom' import { Link, Navigate } from "react-router-dom";
import moment from "moment"; import moment from "moment";
import {ProfileCalendarComponent} from "./ProfileCalendarComponent"; import { ProfileCalendarComponent } from "./ProfileCalendarComponent";
import {Loader} from "../Loader/Loader"; import { Loader } from "../Loader/Loader";
import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from '../Footer/Footer' import { Footer } from "../Footer/Footer";
import { Navigation } from "../Navigation/Navigation";
import { ViewReport } from "../../pages/ViewReport/ViewReport";
import {urlForLocal} from "../../helper"; import { urlForLocal } from "../../helper";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import { getProfileInfo } from '../../redux/outstaffingSlice' import { getProfileInfo } from "../../redux/outstaffingSlice";
import {getRequestDates, setReportDate, setRequestDate} from "../../redux/reportSlice"; import {
getRequestDates,
import 'moment/locale/ru' setReportDate,
import './profileCalendar.scss' setRequestDate,
import { Navigation } from '../Navigation/Navigation'; } from "../../redux/reportSlice";
import "moment/locale/ru";
import "./profileCalendar.scss";
export const ProfileCalendar = () => { export const ProfileCalendar = () => {
if(localStorage.getItem('role_status') === '18') { if (localStorage.getItem("role_status") === "18") {
return <Navigate to="/profile" replace/> 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);
function setValueHandler(value) {
setValue(value);
}
useEffect(() => {
dispatch(setRequestDate(getReports(moment())));
}, []);
useEffect(() => {
setLoader(true);
if (!requestDates) {
return;
} }
const dispatch = useDispatch(); apiRequest(
const profileInfo = useSelector(getProfileInfo) `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
const requestDates = useSelector(getRequestDates) "cardId"
const [value, setValue] = useState(moment()) )}`
const [reports, setReports] = useState([]); ).then((reports) => {
const [totalHours, setTotalHours] = useState(0); let spendTime = 0;
const [loader, setLoader] = useState(true) 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]);
function setValueHandler (value) { return (
setValue(value) <div className="profile__calendar">
} <ProfileHeader />
<Navigation />
useEffect(() => { <div className="container">
dispatch(setRequestDate(getReports(moment()))) <ProfileBreadcrumbs
},[]); links={[
{ name: "Главная", link: "/profile" },
useEffect( () => { { name: "Ваша отчетность", link: "/profile/calendar" },
setLoader(true) ]}
if (!requestDates) { />
return <h2 className="summary__title">Ваши отчеты</h2>
} <div className="summary__info">
apiRequest(`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem('cardId')}`) <div className="summary__person">
.then((reports) => { <img
let spendTime = 0; src={urlForLocal(profileInfo.photo)}
for (const report of reports) { className="summary__avatar"
report.task.map((task) => { alt="avatar"
if(task.hours_spent) { />
spendTime += Number(task.hours_spent) <p className="summary__name">
} {profileInfo.fio}, {profileInfo.specification} разработчик
}) </p>
} </div>
setTotalHours(spendTime); <Link to="/report">
setReports(reports) <button
setLoader(false) className="calendar__btn"
}) onClick={() => {
}, [requestDates]); dispatch(setReportDate(""));
}}
return ( >
<div className='profile__calendar'> Заполнить отчет за день
<ProfileHeader/> </button>
<Navigation /> </Link>
<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} />
</div>
</div>
}
</div>
<Footer />
</div> </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}
/>
</div>
</div>
)}
</div>
<Footer />
</div>
);
}; };

View File

@ -1,141 +1,181 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from "react";
import arrow from '../../images/arrowCalendar.png' import arrow from "../../images/arrowCalendar.png";
import rectangle from '../../images/rectangle__calendar.png' import rectangle from "../../images/rectangle__calendar.png";
import calendarIcon from '../../images/calendar_icon.png' import calendarIcon from "../../images/calendar_icon.png";
import moment from 'moment' import moment from "moment";
import {calendarHelper, currentMonthAndDay, getReports, hourOfNum} from '../Calendar/calendarHelper' import {
import {setReportDate, setRequestDate} from '../../redux/reportSlice'; calendarHelper,
import {useDispatch} from "react-redux"; currentMonthAndDay,
import {Link} from "react-router-dom"; getReports,
hourOfNum,
} from "../Calendar/calendarHelper";
import {
setReportDate,
setRequestDate,
setSendRequest,
} from "../../redux/reportSlice";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import ShortReport from "../ShortReport/ShortReport";
import 'moment/locale/ru' import "moment/locale/ru";
import './../Calendar/calendarComponent.scss' import "./../Calendar/calendarComponent.scss";
export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => { export const ProfileCalendarComponent = React.memo(
({ value, setValueHandler, reports, totalHours }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [currentDay] = useState(moment()) const [currentDay] = useState(moment());
const [calendar, setCalendar] = useState([]) const [calendar, setCalendar] = useState([]);
const [month, setMonth] = useState(''); const [month, setMonth] = useState("");
const [shortReport, setShortReport] = useState(false);
const [dayTest, setDayTest] = useState("");
useEffect(() => { useEffect(() => {
setCalendar(calendarHelper(value)) setCalendar(calendarHelper(value));
}, [value]) }, [value]);
useEffect(() => { useEffect(() => {
setMonth(value.format('MMMM')) setMonth(value.format("MMMM"));
}, [month]); }, [month]);
function isToday(day) { function isToday(day) {
return day.isSame(new Date(), 'day') return day.isSame(new Date(), "day");
} }
function correctDay(day) { function correctDay(day) {
if (day < 10) { if (day < 10) {
return `0${day}` return `0${day}`;
} return day }
return day;
} }
function dayStyles(day) { function dayStyles(day) {
if (currentDay < day) return `block` if (currentDay < day) return `block`;
for (const date of reports) { for (const date of reports) {
if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) { if (
return `before` `${new Date(day).getFullYear()}-${correctDay(
} new Date(day).getMonth() + 1
)}-${correctDay(new Date(day).getDate())}` === date.created_at
) {
return `before`;
} }
if (day.day() === 6 || day.day() === 0) return `selected` }
if (isToday(day)) return `today` if (day.day() === 6 || day.day() === 0) return `selected`;
return 'pass' if (isToday(day)) return `today`;
return "pass";
} }
function correctRoute(day) { function correctRoute(day) {
for (const date of reports) { for (const date of reports) {
if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) { if (
return `../view` `${new Date(day).getFullYear()}-${correctDay(
} new Date(day).getMonth() + 1
)}-${correctDay(new Date(day).getDate())}` === date.created_at
) {
return `../view/${day}`;
} }
return '../../report' }
return "../../report";
} }
function prevMonth() { function prevMonth() {
return value.clone().subtract(1, 'month') return value.clone().subtract(1, "month");
} }
function nextMonth() { function nextMonth() {
return value.clone().add(1, 'month'); return value.clone().add(1, "month");
} }
return ( return (
<div className='calendar-component'> <div className="calendar-component">
<div className='calendar-component__header'> <div className="calendar-component__header">
<div className='calendar-component__header-info'> <div className="calendar-component__header-info">
<h3>Мои отчеты:</h3> <h3>Мои отчеты:</h3>
<p className='calendar__hours'> <p className="calendar__hours">
{month}&nbsp;<span>{totalHours} {hourOfNum(totalHours)} </span> {month}&nbsp;
</p> <span>
</div> {totalHours} {hourOfNum(totalHours)}{" "}
<div className='calendar-component__header-switcher'> </span>
<div className='calendar-component__header-box' onClick={() => { </p>
setValueHandler(prevMonth()) </div>
dispatch(setRequestDate(getReports(prevMonth()))) <div className="calendar-component__header-switcher">
}}> <div
<img src={arrow} alt='' /> className="calendar-component__header-box"
<span> onClick={() => {
{prevMonth().format('MMMM')} setValueHandler(prevMonth());
</span> dispatch(setRequestDate(getReports(prevMonth())));
</div> }}
<div className='calendar-component__header-box'> >
<span>{value.format('YYYY')}</span> <img src={arrow} alt="" />
</div> <span>{prevMonth().format("MMMM")}</span>
<div className='calendar-component__header-box' onClick={() => {
setValueHandler(nextMonth())
dispatch(setRequestDate(getReports(nextMonth())))
}}>
<span>
{nextMonth().format('MMMM')}
</span>
<img src={arrow} alt='' />
</div>
</div>
</div> </div>
<div className="calendar-component__header-box">
<div className='calendar-component__rectangle'> <span>{value.format("YYYY")}</span>
<img src={rectangle} alt='' />
</div> </div>
<div
<div className='calendar-component__body'> className="calendar-component__header-box"
<div> onClick={() => {
<p>Пн</p> setValueHandler(nextMonth());
<p>Вт</p> dispatch(setRequestDate(getReports(nextMonth())));
<p>Ср</p> }}
<p>Чт</p> >
<p>Пт</p> <span>{nextMonth().format("MMMM")}</span>
<p>Сб</p> <img src={arrow} alt="" />
<p>Вс</p>
</div>
<div className='calendar-component__form'>
{calendar.map((week) =>
week.map((day) => (
<button
onClick={() => {
dispatch(setReportDate(day))
}}
key={day}
className={dayStyles(day)}
name={day.format('dddd')}
id='btn'
>
<Link to={correctRoute(day)}>
<img className={'calendar__icon'} src={calendarIcon} alt='' />
{currentMonthAndDay(day)}
</Link>
</button>
))
)}
</div>
</div> </div>
</div>
</div> </div>
)
})
<div className="calendar-component__rectangle">
<img src={rectangle} alt="" />
</div>
<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));
dispatch(setSendRequest(true));
setShortReport(true);
setDayTest(day);
}}
key={day}
className={dayStyles(day)}
name={day.format("dddd")}
id="btn"
>
{/* <Link to={correctRoute(day)}>
<img
className={"calendar__icon"}
src={calendarIcon}
alt=""
/>
{currentMonthAndDay(day)}
</Link> */}
<img className={"calendar__icon"} src={calendarIcon} alt="" />
{currentMonthAndDay(day)}
</button>
))
)}
</div>
</div>
<Link to={correctRoute(dayTest)}>
<button className="calendar__btn">Посмотреть подробнее</button>
</Link>
{shortReport && <ShortReport />}
</div>
);
}
);

View File

@ -1,5 +1,5 @@
.profile__calendar { .profile__calendar {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: "LabGrotesque", sans-serif; font-family: "LabGrotesque", sans-serif;
@ -32,7 +32,6 @@
} }
} }
.calendar__wrapper { .calendar__wrapper {
min-height: 719px; min-height: 719px;

View File

@ -0,0 +1,167 @@
import React, { useEffect, useState } from "react";
import { apiRequest } from "../../api/request";
import {
getCorrectDate,
getCreatedDate,
hourOfNum,
} from "../../components/Calendar/calendarHelper";
import {
getReportDate,
getSendRequest,
setSendRequest,
} from "../../redux/reportSlice";
import { useDispatch, useSelector } from "react-redux";
import "./shortReport.scss";
export const ShortReport = ({}) => {
const reportDate = useSelector(getReportDate);
const sendTest = useSelector(getSendRequest);
const dispatch = useDispatch();
const [taskText, setTaskText] = useState([]);
const [difficulties, setDifficulties] = useState([]);
const [tomorrowTask, setTomorrowTask] = useState([]);
const [totalHours, setTotalHours] = useState(0);
const [loader, setLoader] = useState(false);
const [reportDay] = useState(new Date(getCreatedDate(reportDate)));
function getReportFromDate(day) {
setLoader(true);
setTaskText([]);
setDifficulties([]);
setTomorrowTask([]);
apiRequest(
`reports/find-by-date?user_card_id=${localStorage.getItem(
"cardId"
)}&date=${day}`
).then((res) => {
console.log(res);
let spendTime = 0;
for (const item of res) {
if (item.difficulties) {
setDifficulties((prevArray) => [...prevArray, item.difficulties]);
}
if (item.tomorrow) {
setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
}
item.task.map((task) => {
const taskInfo = {
hours: task.hours_spent,
task: task.task,
id: task.id,
};
if (task.hours_spent) {
spendTime += Number(task.hours_spent);
}
setTaskText((prevArray) => [...prevArray, taskInfo]);
});
}
setTotalHours(spendTime);
setLoader(false);
});
}
if (sendTest) {
dispatch(setSendRequest(false));
getReportFromDate(getCreatedDate(reportDate));
}
return (
<div>
<div className="viewReport__info">
<h2 className="viewReport__title">
Ваши отчеты - <span>просмотр отчета за день</span>
</h2>
<div className="viewReport__bar">
<h3 className="viewReport__bar__date">
{getCorrectDate(reportDate)}
</h3>
<p className="viewReport__bar__hours">
Вами потрачено на работу :{" "}
<span>
{totalHours} {hourOfNum(totalHours)}
</span>
</p>
</div>
</div>
{Boolean(taskText.length) && (
<div className="viewReport__content">
<div className="table__container">
<table className="viewReport__done">
<thead>
<tr>
<th>
<p>Какие задачи были выполнены?</p>
</th>
<th>
<p>Время</p>
</th>
</tr>
</thead>
<tbody>
{taskText.length &&
taskText.map((task, index) => {
return (
<tr key={task.id}>
<td>
<p>
{index + 1}. {task.task}
</p>
</td>
<td>
<div className="viewReport__done__hours__item">
<span>{task.hours}</span>
<p className="hours">
{hourOfNum(task.hours)} на задачу
</p>
</div>
</td>
</tr>
);
})}
<tr>
<td></td>
<td>
<span>
Всего: {totalHours} {hourOfNum(totalHours)}
</span>
</td>
</tr>
</tbody>
</table>
</div>
{Boolean(difficulties.length) && (
<div className="viewReport__item">
<h3>Какие сложности возникли?</h3>
{difficulties.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</div>
)}
{Boolean(tomorrowTask.length) && (
<div className="viewReport__item">
<h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</div>
)}
</div>
)}
{!Boolean(taskText.length) && !loader && (
<div className="viewReport__noTask">
<p>
В этот день вы <span>не заполняли</span> отчет
</p>
</div>
)}
</div>
);
};
export default ShortReport;

View File

@ -1,175 +1,219 @@
import React, {useEffect, useState} from 'react' import React, { useEffect, useState } from "react";
import {Link, Navigate} from "react-router-dom"; import { Link, Navigate } from "react-router-dom";
import {useSelector} from "react-redux"; import { useSelector } from "react-redux";
import {getReportDate} from "../../redux/reportSlice"; import { getReportDate } from "../../redux/reportSlice";
import {Loader} from "../../components/Loader/Loader" import { Loader } from "../../components/Loader/Loader";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import {Footer} from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import {getCorrectDate, getCreatedDate, hourOfNum} from '../../components/Calendar/calendarHelper' import {
getCorrectDate,
getCreatedDate,
hourOfNum,
} from "../../components/Calendar/calendarHelper";
import arrow from "../../images/right-arrow.png"; import arrow from "../../images/right-arrow.png";
import arrowSwitchDate from "../../images/arrowViewReport.png"; import arrowSwitchDate from "../../images/arrowViewReport.png";
import './viewReport.scss' import "./viewReport.scss";
import { Navigation } from '../../components/Navigation/Navigation'; import { Navigation } from "../../components/Navigation/Navigation";
export const ViewReport = () => { export const ViewReport = () => {
if(localStorage.getItem('role_status') === '18') { if (localStorage.getItem("role_status") === "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const reportDate = useSelector(getReportDate); const reportDate = useSelector(getReportDate);
const [taskText, setTaskText] = useState([]); const [taskText, setTaskText] = useState([]);
const [difficulties, setDifficulties] = useState([]); const [difficulties, setDifficulties] = useState([]);
const [tomorrowTask, setTomorrowTask] = useState([]); const [tomorrowTask, setTomorrowTask] = useState([]);
const [totalHours, setTotalHours] = useState(0); const [totalHours, setTotalHours] = useState(0);
const [reportDay] = useState(new Date (getCreatedDate(reportDate))); const [reportDay] = useState(new Date(getCreatedDate(reportDate)));
const [currentDay] = useState(new Date ()); const [currentDay] = useState(new Date());
const [loader, setLoader] = useState(false); const [loader, setLoader] = useState(false);
function getReportFromDate(day) { function getReportFromDate(day) {
setLoader(true); setLoader(true);
setTaskText([]); setTaskText([]);
setDifficulties([]); setDifficulties([]);
setTomorrowTask([]); setTomorrowTask([]);
apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`) apiRequest(
.then(res => { `reports/find-by-date?user_card_id=${localStorage.getItem(
let spendTime = 0; "cardId"
for (const item of res) { )}&date=${day}`
if(item.difficulties) { ).then((res) => {
setDifficulties(prevArray => [...prevArray, item.difficulties]) console.log(res);
} let spendTime = 0;
if(item.tomorrow) { for (const item of res) {
setTomorrowTask(prevArray => [...prevArray, item.tomorrow]) if (item.difficulties) {
} setDifficulties((prevArray) => [...prevArray, item.difficulties]);
item.task.map((task) => { }
const taskInfo = { if (item.tomorrow) {
hours: task.hours_spent, setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
task: task.task, }
id: task.id item.task.map((task) => {
}; const taskInfo = {
if(task.hours_spent) { hours: task.hours_spent,
spendTime += Number(task.hours_spent) task: task.task,
} id: task.id,
setTaskText(prevArray => [...prevArray, taskInfo]) };
}) if (task.hours_spent) {
} spendTime += Number(task.hours_spent);
setTotalHours(spendTime); }
setLoader(false) setTaskText((prevArray) => [...prevArray, taskInfo]);
}) });
} }
setTotalHours(spendTime);
setLoader(false);
});
}
function nextDay() { function nextDay() {
reportDay.setDate(reportDay.getDate() + 1); reportDay.setDate(reportDay.getDate() + 1);
getReportFromDate(getCreatedDate(reportDay)) getReportFromDate(getCreatedDate(reportDay));
} }
function previousDay() { function previousDay() {
reportDay.setDate(reportDay.getDate() - 1); reportDay.setDate(reportDay.getDate() - 1);
getReportFromDate(getCreatedDate(reportDay)) getReportFromDate(getCreatedDate(reportDay));
} }
useEffect(() => { useEffect(() => {
getReportFromDate(getCreatedDate(reportDate)) getReportFromDate(getCreatedDate(reportDate));
}, []); }, []);
return ( return (
<div className='viewReport'> <div className="viewReport">
<ProfileHeader/> <ProfileHeader />
<Navigation /> <Navigation />
<div className='container'> <div className="container">
<div className='viewReport__info'> <div className="viewReport__info">
<ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'}, <ProfileBreadcrumbs
{name: 'Ваша отчетность', link: '/profile/calendar'}, links={[
{name: 'Просмотр отчета за день', link: '/profile/view'}]} { name: "Главная", link: "/profile" },
/> { name: "Ваша отчетность", link: "/profile/calendar" },
<h2 className='viewReport__title'>Ваши отчеты - <span>просмотр отчета за день</span></h2> { name: "Просмотр отчета за день", link: "/profile/view" },
<Link className='viewReport__back' to={`/profile/calendar`}> ]}
<img src={arrow} alt='arrow'/><p>Вернуться</p> />
</Link> <h2 className="viewReport__title">
<div className='viewReport__bar'> Ваши отчеты - <span>просмотр отчета за день</span>
<h3 className='viewReport__bar__date'>{getCorrectDate(reportDay)}</h3> </h2>
<p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} {hourOfNum(totalHours)}</span></p> <Link className="viewReport__back" to={`/profile/calendar`}>
{/*<div className='viewReport__bar__progressBar'>*/} <img src={arrow} alt="arrow" />
{/* <span></span>*/} <p>Вернуться</p>
{/*</div>*/} </Link>
{/*<p className='viewReport__bar__total'>122 часа из 160</p>*/} <div className="viewReport__bar">
</div> <h3 className="viewReport__bar__date">
</div> {getCorrectDate(reportDay)}
<div className='viewReport__switchDate'> </h3>
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}> <p className="viewReport__bar__hours">
<img src={arrowSwitchDate} alt='arrow'/> Вами потрачено на работу :{" "}
</div> <span>
<p>{getCorrectDate(reportDay)}</p> {totalHours} {hourOfNum(totalHours)}
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}> </span>
<img src={arrowSwitchDate} alt='arrow'/> </p>
</div> {/*<div className='viewReport__bar__progressBar'>*/}
</div> {/* <span></span>*/}
{loader && {/*</div>*/}
<Loader width={75} height={75}/> {/*<p className='viewReport__bar__total'>122 часа из 160</p>*/}
} </div>
{Boolean(taskText.length) &&
<div className='viewReport__content'>
<div className='table__container'>
<table className='viewReport__done'>
<thead>
<tr>
<th><p>Какие задачи были выполнены?</p></th>
<th><p>Время</p></th>
</tr>
</thead>
<tbody>
{taskText.length && taskText.map((task, index) => {
return <tr key={task.id}>
<td>
<p>{index + 1}. {task.task}</p>
</td>
<td>
<div className='viewReport__done__hours__item'>
<span>{task.hours}</span>
<p className='hours'>{hourOfNum(task.hours)} на задачу</p>
</div>
</td>
</tr>
})}
<tr>
<td></td>
<td><span>Всего: {totalHours} {hourOfNum(totalHours)}</span></td>
</tr>
</tbody>
</table>
</div>
{Boolean(difficulties.length) &&
<div className='viewReport__item'>
<h3>Какие сложности возникли?</h3>
{difficulties.map((item, index) => {
return <p key={index}>{item}</p>
}
)}
</div>
}
{Boolean(tomorrowTask.length) &&
<div className='viewReport__item'>
<h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>
}
)}
</div>
}
</div>
}
{!Boolean(taskText.length) && !loader &&
<div className='viewReport__noTask'>
<p>В этот день вы <span>не заполняли</span> отчет</p>
</div>
}
<Footer />
</div>
</div> </div>
) <div className="viewReport__switchDate">
<div
className="viewReport__switchDate__prev switchDate"
onClick={() => previousDay()}
>
<img src={arrowSwitchDate} alt="arrow" />
</div>
<p>{getCorrectDate(reportDay)}</p>
<div
className={`viewReport__switchDate__next switchDate ${
getCreatedDate(currentDay) === getCreatedDate(reportDay)
? "disable"
: ""
}`}
onClick={() => nextDay()}
>
<img src={arrowSwitchDate} alt="arrow" />
</div>
</div>
{loader && <Loader width={75} height={75} />}
{Boolean(taskText.length) && (
<div className="viewReport__content">
<div className="table__container">
<table className="viewReport__done">
<thead>
<tr>
<th>
<p>Какие задачи были выполнены?</p>
</th>
<th>
<p>Время</p>
</th>
</tr>
</thead>
<tbody>
{taskText.length &&
taskText.map((task, index) => {
return (
<tr key={task.id}>
<td>
<p>
{index + 1}. {task.task}
</p>
</td>
<td>
<div className="viewReport__done__hours__item">
<span>{task.hours}</span>
<p className="hours">
{hourOfNum(task.hours)} на задачу
</p>
</div>
</td>
</tr>
);
})}
<tr>
<td></td>
<td>
<span>
Всего: {totalHours} {hourOfNum(totalHours)}
</span>
</td>
</tr>
</tbody>
</table>
</div>
{Boolean(difficulties.length) && (
<div className="viewReport__item">
<h3>Какие сложности возникли?</h3>
{difficulties.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</div>
)}
{Boolean(tomorrowTask.length) && (
<div className="viewReport__item">
<h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</div>
)}
</div>
)}
{!Boolean(taskText.length) && !loader && (
<div className="viewReport__noTask">
<p>
В этот день вы <span>не заполняли</span> отчет
</p>
</div>
)}
<Footer />
</div>
</div>
);
}; };

View File

@ -1,13 +1,14 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from "@reduxjs/toolkit";
const initialState = { const initialState = {
dateSelected: '', dateSelected: "",
reportDate: '', reportDate: "",
requestDates: '' requestDates: "",
sendRequest: "",
}; };
export const reportSlice = createSlice({ export const reportSlice = createSlice({
name: 'report', name: "report",
initialState, initialState,
reducers: { reducers: {
dateSelected: (state, action) => { dateSelected: (state, action) => {
@ -17,17 +18,23 @@ export const reportSlice = createSlice({
state.reportDate = action.payload; state.reportDate = action.payload;
}, },
setRequestDate: (state, action) => { setRequestDate: (state, action) => {
state.requestDates = action.payload state.requestDates = action.payload;
} },
setSendRequest: (state, action) => {
state.sendRequest = action.payload;
},
}, },
}); });
export const { dateSelected, setReportDate, setRequestDate} = reportSlice.actions; export const { dateSelected, setReportDate, setRequestDate, setSendRequest } =
reportSlice.actions;
export const selectDate = (state) => state.report.dateSelected; export const selectDate = (state) => state.report.dateSelected;
export const getReportDate = (state) => state.report.reportDate; export const getReportDate = (state) => state.report.reportDate;
export const getRequestDates = (state) => state.report.requestDates export const getRequestDates = (state) => state.report.requestDates;
export const getSendRequest = (state) => state.report.sendRequest;
export default reportSlice.reducer; export default reportSlice.reducer;