From 107a00b915c80eeda576c9de8aa23790beabf7e5 Mon Sep 17 00:00:00 2001 From: M1kola Date: Mon, 23 Jan 2023 14:59:57 +0300 Subject: [PATCH] view ReportPage --- src/App.js | 2 + .../ProfileCalendar/ProfileCalendar.js | 14 +- .../ProfileCalendarComponent.js | 6 +- src/images/arrowViewReport.svg | 3 + src/pages/ViewReport/ViewReport.js | 139 +++++++++ src/pages/ViewReport/viewReport.scss | 291 ++++++++++++++++++ 6 files changed, 446 insertions(+), 9 deletions(-) create mode 100644 src/images/arrowViewReport.svg create mode 100644 src/pages/ViewReport/ViewReport.js create mode 100644 src/pages/ViewReport/viewReport.scss diff --git a/src/App.js b/src/App.js index 318c49ef..dcbdf52b 100644 --- a/src/App.js +++ b/src/App.js @@ -18,6 +18,7 @@ import {InstructionPage} from './pages/quiz/InstructionPage' import {ResultPage} from './pages/quiz/ResultPage' import {Profile} from './pages/Profile/Profile.js' import {Summary} from './pages/Summary/Summary' +import {ViewReport} from './pages/ViewReport/ViewReport' import './fonts/stylesheet.css' import 'bootstrap/dist/css/bootstrap.min.css' @@ -55,6 +56,7 @@ const App = () => { }/> }/> }/> + }/> }/> diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index 183f4e5d..648bd2c1 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -33,14 +33,16 @@ export const ProfileCalendar = () => { if (!requestDates) { return } - apiRequest(`/reports/reports-by-date?${requestDates}&user_id=${localStorage.getItem('id')}`) + apiRequest(`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem('cardId')}`) .then((reports) => { let spendTime = 0; - reports.map((report) => { - if (report.spendTime) { - spendTime += Number(report.spendTime) - } - }); + for (const report of reports) { + report.task.map((task) => { + if(task.hours_spent) { + spendTime += Number(task.hours_spent) + } + }) + } setTotalHours(spendTime); setReports(reports) }) diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js index b2307e14..2c574863 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.js +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js @@ -37,7 +37,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => { function dayStyles(day) { if (value < day) return `block` for (const date of reportsDates) { - if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.date) { + if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) { return `before` } } @@ -48,8 +48,8 @@ export const ProfileCalendarComponent = ({reportsDates}) => { function correctRoute(day) { for (const date of reportsDates) { - if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.date) { - return `../../view/report` + if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) { + return `../view` } } return '../../report' diff --git a/src/images/arrowViewReport.svg b/src/images/arrowViewReport.svg new file mode 100644 index 00000000..80de657d --- /dev/null +++ b/src/images/arrowViewReport.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js new file mode 100644 index 00000000..052269c4 --- /dev/null +++ b/src/pages/ViewReport/ViewReport.js @@ -0,0 +1,139 @@ +import React, {useEffect, useState} from 'react' +import {Link} from "react-router-dom"; +import {useRequest} from "../../hooks/useRequest"; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {Footer} from "../../components/Footer/Footer"; + +import arrow from "../../images/right-arrow.png"; +import arrowSwitchDate from "../../images/arrowViewReport.svg"; + +import './viewReport.scss' + +const getCreatedDate = () => { + const date = new Date(); + const dd = String(date.getDate()).padStart(2, '0'); + const mm = String(date.getMonth() + 1).padStart(2, '0'); + const yyyy = date.getFullYear(); + return `${yyyy}-${mm}-${dd}` +}; + +export const ViewReport = () => { + const {apiRequest} = useRequest(); + + const [taskText, setTaskText] = useState([]); + const [difficulties, setDifficulties] = useState([]) + const [tomorrowTask, setTomorrowTask] = useState([]) + const [totalHours, setTotalHours] = useState(0); + useEffect(() => { + setTaskText([]) + setDifficulties([]) + setTomorrowTask([]) + apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=2023-01-22`) + .then(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) + }) + }, []); + return ( +
+ +
+
+

Ваши отчеты - просмотр отчета за день

+ + arrow

Вернуться

+ +
+

{getCreatedDate()}

+

Вами потрачено на работу : {totalHours} часов

+ {/*
*/} + {/* */} + {/*
*/} + {/*

122 часа из 160

*/} +
+
+
+
+ arrow +
+

{getCreatedDate()}

+
+ arrow +
+
+ {taskText.length ? +
+
+ + + + + + + + + {taskText.length && taskText.map((task) => { + return + + + + })} + + + + + +

Какие задачи были выполнены?

Время

+

{task.task}

+ 		+
+ {task.hours} +

часа на задачу

+
+
Всего: {totalHours} часов
+
+
+

Какие сложности возникли?

+ {difficulties.length && difficulties.map((item, index) => { + return

{item}

+ } + )} +
+
+

Что планируется сделать завтра?

+ {tomorrowTask.length && tomorrowTask.map((item, index) => { + return

{item}

+ } + )} +
+
+ : +
+

В этот день вы не заполняли отчет

+
+ } +
+
+ ) +}; diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss new file mode 100644 index 00000000..5144485c --- /dev/null +++ b/src/pages/ViewReport/viewReport.scss @@ -0,0 +1,291 @@ +.viewReport { + background: #F1F1F1; + height: 100%; + min-height: 100vh; + font-family: 'LabGrotesque', sans-serif; + + .container { + max-width: 1160px; + margin-top: 23px; + + @media (max-width: 570px) { + margin-top: 0; + } + } + + &__info { + display: flex; + flex-direction: column; + margin-top: 23px; + } + + &__title { + font-weight: 700; + font-size: 22px; + line-height: 32px; + color: #000000; + span { + color: #52B709; + } + } + + &__back { + display: flex; + align-items: center; + column-gap: 30px; + margin-top: 20px; + cursor: pointer; + + &:hover { + text-decoration: none; + } + p { + margin-bottom: 0; + font-weight: 400; + font-size: 14px; + line-height: 32px; + color: #000000; + text-decoration: none; + } + } + + &__bar { + display: flex; + margin-top: 20px; + background: #FFFFFF; + border-radius: 12px; + padding: 20px 33px; + align-items: center; + column-gap: 60px; + height: 72px; + justify-content: space-between; + + &__date { + font-weight: 500; + font-size: 22px; + line-height: 32px; + color: #000000; + } + + &__hours { + font-weight: 400; + font-size: 12px; + line-height: 32px; + color: #000000; + + span { + color: #52B709; + font-weight: 700; + } + } + + &__progressBar { + max-width: 390px; + width: 100%; + background: #F1F1F1; + border-radius: 12px; + height: 8px; + position: relative; + + span { + position: absolute; + height: 100%; + left: 0; + width: 60%; + background: #52B709; + border-radius: 12px; + } + } + + &__total { + font-weight: 400; + font-size: 12px; + line-height: 32px; + } + + } + + h3 { + margin-bottom: 0; + } + + p { + margin-bottom: 0; + } + + &__switchDate { + display: flex; + margin: 30px 0; + justify-content: center; + column-gap: 140px; + align-items: center; + + p { + font-weight: 400; + font-size: 12px; + line-height: 32px; + color: #000000; + } + + .switchDate { + width: 48px; + height: 48px; + background: #8DC63F; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + &__prev { + transform: rotate(180deg); + } + } + + .table__container { + margin: 0 -28px; + overflow: hidden; + position: relative; + } + + &__done { + width: 100%; + border-collapse: separate; + border-spacing: 28px 0; + + th { + padding: 32px 40px; + background: white; + border-radius: 12px 12px 0 0; + font-weight: 500; + font-size: 22px; + line-height: 32px; + color: #000000; + } + + td { + padding: 15px 40px; + background: white; + + p { + font-weight: 400; + font-size: 12px; + line-height: 24px; + color: #000000; + } + } + + tr:last-child { + td { + border-radius: 0 0 12px 12px; + } + + td:last-child { + font-weight: 500; + font-size: 17px; + line-height: 32px; + color: #000000; + } + } + + &__hours { + width: 25%; + background: #FFFFFF; + border-radius: 12px; + padding: 32px 40px 18px; + display: flex; + flex-direction: column; + row-gap: 30px; + + h3 { + font-weight: 500; + font-size: 22px; + line-height: 32px; + color: #000000; + } + + &__item { + display: flex; + column-gap: 25px; + align-items: center; + min-width: 155px; + + span { + width: 48px; + height: 48px; + background: #8DC63F; + border-radius: 50px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 22px; + line-height: 32px; + color: #000000; + } + + p { + font-weight: 400; + font-size: 12px; + line-height: 32px; + } + } + + &__total { + font-weight: 500; + font-size: 17px; + line-height: 32px; + } + } + } + + &__item { + display: flex; + flex-direction: column; + row-gap: 22px; + background: #FFFFFF; + border-radius: 12px; + margin: 25px 0; + padding: 25px 35px; + + h3 { + font-weight: 500; + font-size: 22px; + line-height: 32px; + } + + p { + font-weight: 400; + font-size: 12px; + line-height: 24px; + } + } + + &__item:last-child { + margin-bottom: 0; + } + + &__noTask { + padding: 25px 10px; + background: #FFFFFF; + border-radius: 12px; + text-align: center; + + p { + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #000000; + + span { + color: #8BCC60; + font-weight: 500; + } + } + } + + footer { + margin-top: 70px; + } +}