apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working in calendar

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.js
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 />} />

32
src/components/Calendar/calendarComponent.scss
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,19 +156,18 @@
line-height: normal; line-height: normal;
text-align: center; text-align: center;
a {
display: flex;
align-items: center;
justify-content: center;
width: 115px;
height: 42px;
text-decoration: none;
color: #000000;
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin: 0 10px 0 0; margin: 0 10px 0 0;
@media (max-width: 968px) {
margin-right: 2px;
@media (max-width: 610px) {
display: none;
}
}
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
@ -182,15 +180,7 @@
height: 40px; height: 40px;
font-size: 10px; font-size: 10px;
img {
margin-right: 2px;
}
}
@media (max-width: 610px) { @media (max-width: 610px) {
img {
display: none;
}
width: auto; width: auto;
height: auto; height: auto;
} }

126
src/components/ProfileCalendar/ProfileCalendar.js
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 dispatch = useDispatch();
const profileInfo = useSelector(getProfileInfo) const profileInfo = useSelector(getProfileInfo);
const requestDates = useSelector(getRequestDates) const requestDates = useSelector(getRequestDates);
const [value, setValue] = useState(moment()) const [value, setValue] = useState(moment());
const [reports, setReports] = useState([]); const [reports, setReports] = useState([]);
const [totalHours, setTotalHours] = useState(0); const [totalHours, setTotalHours] = useState(0);
const [loader, setLoader] = useState(true) const [loader, setLoader] = useState(true);
function setValueHandler(value) { function setValueHandler(value) {
setValue(value) setValue(value);
} }
useEffect(() => { useEffect(() => {
dispatch(setRequestDate(getReports(moment()))) dispatch(setRequestDate(getReports(moment())));
}, []); }, []);
useEffect(() => { useEffect(() => {
setLoader(true) setLoader(true);
if (!requestDates) { if (!requestDates) {
return return;
} }
apiRequest(`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem('cardId')}`) apiRequest(
.then((reports) => { `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
"cardId"
)}`
).then((reports) => {
let spendTime = 0; let spendTime = 0;
for (const report of reports) { for (const report of reports) {
report.task.map((task) => { report.task.map((task) => {
if (task.hours_spent) { if (task.hours_spent) {
spendTime += Number(task.hours_spent) spendTime += Number(task.hours_spent);
} }
}) });
} }
setTotalHours(spendTime); setTotalHours(spendTime);
setReports(reports) setReports(reports);
setLoader(false) setLoader(false);
}) });
}, [requestDates]); }, [requestDates]);
return ( return (
<div className='profile__calendar'> <div className="profile__calendar">
<ProfileHeader /> <ProfileHeader />
<Navigation /> <Navigation />
<div className='container'> <div className="container">
<ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},{name: 'Ваша отчетность', link: '/profile/calendar'}]} /> <ProfileBreadcrumbs
<h2 className='summary__title'>Ваши отчеты</h2> links={[
<div className='summary__info'> { name: "Главная", link: "/profile" },
<div className='summary__person'> { name: "Ваша отчетность", link: "/profile/calendar" },
<img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/> ]}
<p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p> />
<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> </div>
<Link to='/report'> <Link to="/report">
<button className="calendar__btn" onClick={() => { <button
dispatch(setReportDate('')) className="calendar__btn"
}}>Заполнить отчет за день</button> onClick={() => {
dispatch(setReportDate(""));
}}
>
Заполнить отчет за день
</button>
</Link> </Link>
</div> </div>
{loader ? {loader ? (
<div className='loader__wrapper'> <div className="loader__wrapper">
<Loader height={80} width={80} /> <Loader height={80} width={80} />
</div> </div>
: ) : (
<div className='row calendar__wrapper'> <div className="row calendar__wrapper">
<div className='col-12 col-xl-12'> <div className="col-12 col-xl-12">
<ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} /> <ProfileCalendarComponent
setValueHandler={setValueHandler}
value={value}
reports={reports}
totalHours={totalHours}
/>
</div> </div>
</div> </div>
} )}
</div> </div>
<Footer /> <Footer />
</div> </div>
) );
}; };

176
src/components/ProfileCalendar/ProfileCalendarComponent.js
View File

@ -1,109 +1,135 @@
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,
currentMonthAndDay,
getReports,
hourOfNum,
} from "../Calendar/calendarHelper";
import {
setReportDate,
setRequestDate,
setSendRequest,
} from "../../redux/reportSlice";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { Link } from "react-router-dom"; 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 (day.day() === 6 || day.day() === 0) return `selected`;
if (isToday(day)) return `today` if (isToday(day)) return `today`;
return 'pass' 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;
<span>
{totalHours} {hourOfNum(totalHours)}{" "}
</span>
</p> </p>
</div> </div>
<div className='calendar-component__header-switcher'> <div className="calendar-component__header-switcher">
<div className='calendar-component__header-box' onClick={() => { <div
setValueHandler(prevMonth()) className="calendar-component__header-box"
dispatch(setRequestDate(getReports(prevMonth()))) onClick={() => {
}}> setValueHandler(prevMonth());
<img src={arrow} alt='' /> dispatch(setRequestDate(getReports(prevMonth())));
<span> }}
{prevMonth().format('MMMM')} >
</span> <img src={arrow} alt="" />
<span>{prevMonth().format("MMMM")}</span>
</div> </div>
<div className='calendar-component__header-box'> <div className="calendar-component__header-box">
<span>{value.format('YYYY')}</span> <span>{value.format("YYYY")}</span>
</div> </div>
<div className='calendar-component__header-box' onClick={() => { <div
setValueHandler(nextMonth()) className="calendar-component__header-box"
dispatch(setRequestDate(getReports(nextMonth()))) onClick={() => {
setValueHandler(nextMonth());
}}> dispatch(setRequestDate(getReports(nextMonth())));
<span> }}
{nextMonth().format('MMMM')} >
</span> <span>{nextMonth().format("MMMM")}</span>
<img src={arrow} alt='' /> <img src={arrow} alt="" />
</div> </div>
</div> </div>
</div> </div>
<div className='calendar-component__rectangle'> <div className="calendar-component__rectangle">
<img src={rectangle} alt='' /> <img src={rectangle} alt="" />
</div> </div>
<div className='calendar-component__body'> <div className="calendar-component__body">
<div> <div>
<p>Пн</p> <p>Пн</p>
<p>Вт</p> <p>Вт</p>
@ -114,28 +140,42 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
<p>Вс</p> <p>Вс</p>
</div> </div>
<div className='calendar-component__form'> <div className="calendar-component__form">
{calendar.map((week) => {calendar.map((week) =>
week.map((day) => ( week.map((day) => (
<button <button
onClick={() => { onClick={() => {
dispatch(setReportDate(day)) dispatch(setReportDate(day));
dispatch(setSendRequest(true));
setShortReport(true);
setDayTest(day);
}} }}
key={day} key={day}
className={dayStyles(day)} className={dayStyles(day)}
name={day.format('dddd')} name={day.format("dddd")}
id='btn' id="btn"
> >
<Link to={correctRoute(day)}> {/* <Link to={correctRoute(day)}>
<img className={'calendar__icon'} src={calendarIcon} alt='' /> <img
className={"calendar__icon"}
src={calendarIcon}
alt=""
/>
{currentMonthAndDay(day)}
</Link> */}
<img className={"calendar__icon"} src={calendarIcon} alt="" />
{currentMonthAndDay(day)} {currentMonthAndDay(day)}
</Link>
</button> </button>
)) ))
)} )}
</div> </div>
</div> </div>
<Link to={correctRoute(dayTest)}>
<button className="calendar__btn">Посмотреть подробнее</button>
</Link>
{shortReport && <ShortReport />}
</div> </div>
) );
}) }
);

3
src/components/ProfileCalendar/profileCalendar.scss
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;

167
src/components/ShortReport/ShortReport.jsx Normal file
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;

0
src/components/ShortReport/shortReport.scss Normal file
View File

186
src/pages/ViewReport/ViewReport.js
View File

@ -1,26 +1,30 @@
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);
@ -37,139 +41,179 @@ export const ViewReport = () => {
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(
"cardId"
)}&date=${day}`
).then((res) => {
console.log(res);
let spendTime = 0; let spendTime = 0;
for (const item of res) { for (const item of res) {
if (item.difficulties) { if (item.difficulties) {
setDifficulties(prevArray => [...prevArray, item.difficulties]) setDifficulties((prevArray) => [...prevArray, item.difficulties]);
} }
if (item.tomorrow) { if (item.tomorrow) {
setTomorrowTask(prevArray => [...prevArray, item.tomorrow]) setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
} }
item.task.map((task) => { item.task.map((task) => {
const taskInfo = { const taskInfo = {
hours: task.hours_spent, hours: task.hours_spent,
task: task.task, task: task.task,
id: task.id id: task.id,
}; };
if (task.hours_spent) { if (task.hours_spent) {
spendTime += Number(task.hours_spent) spendTime += Number(task.hours_spent);
} }
setTaskText(prevArray => [...prevArray, taskInfo]) setTaskText((prevArray) => [...prevArray, taskInfo]);
}) });
} }
setTotalHours(spendTime); setTotalHours(spendTime);
setLoader(false) 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" },
{ name: "Просмотр отчета за день", link: "/profile/view" },
]}
/> />
<h2 className='viewReport__title'>Ваши отчеты - <span>просмотр отчета за день</span></h2> <h2 className="viewReport__title">
<Link className='viewReport__back' to={`/profile/calendar`}> Ваши отчеты - <span>просмотр отчета за день</span>
<img src={arrow} alt='arrow'/><p>Вернуться</p> </h2>
<Link className="viewReport__back" to={`/profile/calendar`}>
<img src={arrow} alt="arrow" />
<p>Вернуться</p>
</Link> </Link>
<div className='viewReport__bar'> <div className="viewReport__bar">
<h3 className='viewReport__bar__date'>{getCorrectDate(reportDay)}</h3> <h3 className="viewReport__bar__date">
<p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} {hourOfNum(totalHours)}</span></p> {getCorrectDate(reportDay)}
</h3>
<p className="viewReport__bar__hours">
Вами потрачено на работу :{" "}
<span>
{totalHours} {hourOfNum(totalHours)}
</span>
</p>
{/*<div className='viewReport__bar__progressBar'>*/} {/*<div className='viewReport__bar__progressBar'>*/}
{/* <span></span>*/} {/* <span></span>*/}
{/*</div>*/} {/*</div>*/}
{/*<p className='viewReport__bar__total'>122 часа из 160</p>*/} {/*<p className='viewReport__bar__total'>122 часа из 160</p>*/}
</div> </div>
</div> </div>
<div className='viewReport__switchDate'> <div className="viewReport__switchDate">
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}> <div
<img src={arrowSwitchDate} alt='arrow'/> className="viewReport__switchDate__prev switchDate"
onClick={() => previousDay()}
>
<img src={arrowSwitchDate} alt="arrow" />
</div> </div>
<p>{getCorrectDate(reportDay)}</p> <p>{getCorrectDate(reportDay)}</p>
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}> <div
<img src={arrowSwitchDate} alt='arrow'/> className={`viewReport__switchDate__next switchDate ${
getCreatedDate(currentDay) === getCreatedDate(reportDay)
? "disable"
: ""
}`}
onClick={() => nextDay()}
>
<img src={arrowSwitchDate} alt="arrow" />
</div> </div>
</div> </div>
{loader && {loader && <Loader width={75} height={75} />}
<Loader width={75} height={75}/> {Boolean(taskText.length) && (
} <div className="viewReport__content">
{Boolean(taskText.length) && <div className="table__container">
<div className='viewReport__content'> <table className="viewReport__done">
<div className='table__container'>
<table className='viewReport__done'>
<thead> <thead>
<tr> <tr>
<th><p>Какие задачи были выполнены?</p></th> <th>
<th><p>Время</p></th> <p>Какие задачи были выполнены?</p>
</th>
<th>
<p>Время</p>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{taskText.length && taskText.map((task, index) => { {taskText.length &&
return <tr key={task.id}> taskText.map((task, index) => {
return (
<tr key={task.id}>
<td> <td>
<p>{index + 1}. {task.task}</p> <p>
{index + 1}. {task.task}
</p>
</td> </td>
<td> <td>
<div className='viewReport__done__hours__item'> <div className="viewReport__done__hours__item">
<span>{task.hours}</span> <span>{task.hours}</span>
<p className='hours'>{hourOfNum(task.hours)} на задачу</p> <p className="hours">
{hourOfNum(task.hours)} на задачу
</p>
</div> </div>
</td> </td>
</tr> </tr>
);
})} })}
<tr> <tr>
<td></td> <td></td>
<td><span>Всего: {totalHours} {hourOfNum(totalHours)}</span></td> <td>
<span>
Всего: {totalHours} {hourOfNum(totalHours)}
</span>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
{Boolean(difficulties.length) && {Boolean(difficulties.length) && (
<div className='viewReport__item'> <div className="viewReport__item">
<h3>Какие сложности возникли?</h3> <h3>Какие сложности возникли?</h3>
{difficulties.map((item, index) => { {difficulties.map((item, index) => {
return <p key={index}>{item}</p> return <p key={index}>{item}</p>;
} })}
)}
</div> </div>
} )}
{Boolean(tomorrowTask.length) && {Boolean(tomorrowTask.length) && (
<div className='viewReport__item'> <div className="viewReport__item">
<h3>Что планируется сделать завтра?</h3> <h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => { {tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p> return <p key={index}>{item}</p>;
} })}
</div>
)} )}
</div> </div>
} )}
{!Boolean(taskText.length) && !loader && (
<div className="viewReport__noTask">
<p>
В этот день вы <span>не заполняли</span> отчет
</p>
</div> </div>
} )}
{!Boolean(taskText.length) && !loader &&
<div className='viewReport__noTask'>
<p>В этот день вы <span>не заполняли</span> отчет</p>
</div>
}
<Footer /> <Footer />
</div> </div>
</div> </div>
) );
}; };

25
src/redux/reportSlice.js
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;