From 107a00b915c80eeda576c9de8aa23790beabf7e5 Mon Sep 17 00:00:00 2001 From: M1kola Date: Mon, 23 Jan 2023 14:59:57 +0300 Subject: [PATCH 1/5] 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; + } +} From 52e7df0e7b4986f509546b3df61f2dded08b72f7 Mon Sep 17 00:00:00 2001 From: M1kola Date: Mon, 23 Jan 2023 23:51:18 +0300 Subject: [PATCH 2/5] switch report date --- src/pages/Summary/Summary.js | 2 +- src/pages/ViewReport/ViewReport.js | 85 +++++++++++++++++++--------- src/pages/ViewReport/viewReport.scss | 7 ++- 3 files changed, 64 insertions(+), 30 deletions(-) diff --git a/src/pages/Summary/Summary.js b/src/pages/Summary/Summary.js index b202f607..8c97f9d3 100644 --- a/src/pages/Summary/Summary.js +++ b/src/pages/Summary/Summary.js @@ -69,7 +69,7 @@ export const Summary = () => {
- {gitInfo.length && gitInfo.map((itemGit) => { + {Boolean(gitInfo.length) && gitInfo.map((itemGit) => { return
diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js index 052269c4..5fa137af 100644 --- a/src/pages/ViewReport/ViewReport.js +++ b/src/pages/ViewReport/ViewReport.js @@ -1,6 +1,9 @@ import React, {useEffect, useState} from 'react' import {Link} from "react-router-dom"; import {useRequest} from "../../hooks/useRequest"; +import {useSelector} from "react-redux"; +import {getReportDate} from "../../redux/reportSlice"; +import {currentMonthAndDay} from "../../components/Calendar/calendarHelper"; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import {Footer} from "../../components/Footer/Footer"; @@ -10,26 +13,33 @@ 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 getCreatedDate = (day) => { + if (day) { + return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}` + } else { + 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}` + } + }; const {apiRequest} = useRequest(); + const reportDate = useSelector(getReportDate); const [taskText, setTaskText] = useState([]); const [difficulties, setDifficulties] = useState([]) const [tomorrowTask, setTomorrowTask] = useState([]) const [totalHours, setTotalHours] = useState(0); - useEffect(() => { + const [reportDay, setReportDay] = useState(new Date (getCreatedDate(reportDate))) + const [currentDay, setCurrentDay] = useState(new Date ()) + + function getReportFromDate(day) { setTaskText([]) setDifficulties([]) setTomorrowTask([]) - apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=2023-01-22`) + apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`) .then(res => { let spendTime = 0 for (const item of res) { @@ -53,6 +63,21 @@ export const ViewReport = () => { } setTotalHours(spendTime) }) + } + + function nextDay() { + reportDay.setDate(reportDay.getDate() + 1); + getCreatedDate(reportDay) + getReportFromDate(getCreatedDate(reportDay)) + } + + function previousDay() { + reportDay.setDate(reportDay.getDate() - 1); + getReportFromDate(getCreatedDate(reportDay)) + } + + useEffect(() => { + getReportFromDate(getCreatedDate(reportDate)) }, []); return (
@@ -64,7 +89,7 @@ export const ViewReport = () => { arrow

Вернуться

-

{getCreatedDate()}

+

{getCreatedDate(reportDay)}

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

{/*
*/} {/* */} @@ -73,11 +98,11 @@ export const ViewReport = () => {
-
+
previousDay()}> arrow
-

{getCreatedDate()}

-
+

{getCreatedDate(reportDay)}

+
nextDay()}> arrow
@@ -112,20 +137,24 @@ export const ViewReport = () => {
-
-

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

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

{item}

- } - )} -
-
-

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

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

{item}

- } - )} -
+ {Boolean(difficulties.length) && +
+

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

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

{item}

+ } + )} +
+ } + {Boolean(tomorrowTask.length) && +
+

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

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

{item}

+ } + )} +
+ }
:
diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss index 5144485c..65f1f2ee 100644 --- a/src/pages/ViewReport/viewReport.scss +++ b/src/pages/ViewReport/viewReport.scss @@ -122,7 +122,7 @@ p { font-weight: 400; - font-size: 12px; + font-size: 18px; line-height: 32px; color: #000000; } @@ -143,6 +143,11 @@ } } + .disable { + pointer-events: none; + opacity: 0.5; + } + .table__container { margin: 0 -28px; overflow: hidden; From 0cae63237f24e7d130d396d6802913766468ee48 Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 24 Jan 2023 00:08:42 +0300 Subject: [PATCH 3/5] switch report date --- src/pages/ViewReport/ViewReport.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js index 5fa137af..119b2dad 100644 --- a/src/pages/ViewReport/ViewReport.js +++ b/src/pages/ViewReport/ViewReport.js @@ -67,7 +67,6 @@ export const ViewReport = () => { function nextDay() { reportDay.setDate(reportDay.getDate() + 1); - getCreatedDate(reportDay) getReportFromDate(getCreatedDate(reportDay)) } @@ -102,7 +101,7 @@ export const ViewReport = () => { arrow

{getCreatedDate(reportDay)}

-
nextDay()}> +
nextDay()}> arrow
From ffae42083459e59c911156acd25f4f8f380a7845 Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 24 Jan 2023 19:11:24 +0300 Subject: [PATCH 4/5] preLoader and validate report form --- .../ProfileCalendar/ProfileCalendar.js | 26 ++++++++++++------- .../ProfileCalendar/profileCalendar.scss | 9 +++++++ src/components/ReportForm/ReportForm.js | 21 ++++++++++----- src/components/ReportForm/reportForm.scss | 5 ++++ src/hooks/useRequest.js | 2 +- src/pages/ViewReport/ViewReport.js | 22 +++++++++++----- src/pages/ViewReport/viewReport.scss | 8 ++++++ 7 files changed, 69 insertions(+), 24 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index 648bd2c1..b7db9283 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -1,13 +1,14 @@ import React, { useEffect, useState } from 'react' import {useDispatch, useSelector} from 'react-redux' +import {currentMonth, getReports} from '../Calendar/calendarHelper' import { Link } from 'react-router-dom' import moment from "moment"; -import {currentMonth, getReports} from '../Calendar/calendarHelper' import {ProfileCalendarComponent} from "./ProfileCalendarComponent"; -import { Footer } from '../Footer/Footer' +import {Loader} from "../Loader/Loader"; import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; +import { Footer } from '../Footer/Footer' import {useRequest} from "../../hooks/useRequest"; import { getProfileInfo } from '../../redux/outstaffingSlice' @@ -22,6 +23,7 @@ export const ProfileCalendar = () => { const [reports, setReports] = useState([]); const [totalHours, setTotalHours] = useState(0); const [requestDates, setRequestDates] = useState(''); + const [loader, setLoader] = useState(false) const {apiRequest} = useRequest(); @@ -30,6 +32,7 @@ export const ProfileCalendar = () => { }); useEffect(async () => { + setLoader(true) if (!requestDates) { return } @@ -45,6 +48,7 @@ export const ProfileCalendar = () => { } setTotalHours(spendTime); setReports(reports) + setLoader(false) }) }, [requestDates]); @@ -68,14 +72,18 @@ export const ProfileCalendar = () => { }}>Заполнить отчет за день
-
-
- -

- {month} : {totalHours} часов -

+ {loader ? + + : +
+
+ +

+ {month} : {totalHours} часов +

+
-
+ }
diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss index 45d98c4e..d9101e99 100644 --- a/src/components/ProfileCalendar/profileCalendar.scss +++ b/src/components/ProfileCalendar/profileCalendar.scss @@ -16,6 +16,15 @@ .summary__info { padding-right: 25px; } + + .loader { + margin: 20px 0 50px; + &:hover { + path { + fill: #ffffff; + } + } + } .profile__calendar { margin-top: 20px; } diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index 302b4cf0..921e5081 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -1,6 +1,6 @@ import React, {useState} from 'react' import {useSelector} from 'react-redux' -import {Link} from 'react-router-dom' +import {Link, useNavigate} from 'react-router-dom' import {Loader} from '../Loader/Loader' import {currentMonthAndDay} from '../Calendar/calendarHelper' @@ -33,11 +33,12 @@ const getCreatedDate = (day) => { }; const ReportForm = () => { + const navigate= useNavigate(); const reportDate = useSelector(getReportDate); const {apiRequest} = useRequest(); const [isFetching, setIsFetching] = useState(false); - const [reportSuccess, setReportSuccess] = useState(false); + const [reportSuccess, setReportSuccess] = useState(''); const [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]); const [troublesInputValue, setTroublesInputValue] = useState(''); @@ -56,6 +57,11 @@ const ReportForm = () => { }; const handler = () => { + if(!inputs[0].task) { + setReportSuccess('Заполните задачи'); + setTimeout(() => setReportSuccess(''), 1000) + return + } apiRequest('/reports/create', { method: 'POST', data: { @@ -66,10 +72,11 @@ const ReportForm = () => { status: 1, }, }).then((res) => { - if (res.status === 200) { - setReportSuccess(true); - setTimeout(() => setReportSuccess(false), 2000) - } + setReportSuccess('Отчет отправлен'); + setTimeout(() => { + setReportSuccess('') + navigate('/profile/calendar'); + }, 1000) setInputs(() => []); setTroublesInputValue(''); setScheduledInputValue(''); @@ -189,7 +196,7 @@ const ReportForm = () => { Всего за день : {totalHours} часов

{reportSuccess && -

Отчет отправлен

+

{reportSuccess}

}
diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index 71d62d02..89ca5205 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/src/components/ReportForm/reportForm.scss @@ -314,6 +314,11 @@ font-weight: 500; margin-left: 20px; } + + .errorText { + color: #bf3c3c; + font-weight: 600; + } } &__form { diff --git a/src/hooks/useRequest.js b/src/hooks/useRequest.js index fd0c78f2..dddd55fb 100644 --- a/src/hooks/useRequest.js +++ b/src/hooks/useRequest.js @@ -58,4 +58,4 @@ export const useRequest = () => { return {apiRequest} -}; \ No newline at end of file +}; diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js index 119b2dad..9fff3064 100644 --- a/src/pages/ViewReport/ViewReport.js +++ b/src/pages/ViewReport/ViewReport.js @@ -3,8 +3,9 @@ import {Link} from "react-router-dom"; import {useRequest} from "../../hooks/useRequest"; import {useSelector} from "react-redux"; import {getReportDate} from "../../redux/reportSlice"; -import {currentMonthAndDay} from "../../components/Calendar/calendarHelper"; +import SVG from 'react-inlinesvg' +import {Loader} from "../../components/Loader/Loader" import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import {Footer} from "../../components/Footer/Footer"; @@ -32,10 +33,12 @@ export const ViewReport = () => { const [difficulties, setDifficulties] = useState([]) const [tomorrowTask, setTomorrowTask] = useState([]) const [totalHours, setTotalHours] = useState(0); - const [reportDay, setReportDay] = useState(new Date (getCreatedDate(reportDate))) - const [currentDay, setCurrentDay] = useState(new Date ()) + const [reportDay] = useState(new Date (getCreatedDate(reportDate))) + const [currentDay] = useState(new Date ()) + const [loader, setLoader] = useState(false) function getReportFromDate(day) { + setLoader(true) setTaskText([]) setDifficulties([]) setTomorrowTask([]) @@ -62,6 +65,7 @@ export const ViewReport = () => { }) } setTotalHours(spendTime) + setLoader(false) }) } @@ -98,14 +102,17 @@ export const ViewReport = () => {
previousDay()}> - arrow +

{getCreatedDate(reportDay)}

nextDay()}> - arrow +
- {taskText.length ? + {loader && + + } + {Boolean(taskText.length) &&
@@ -155,7 +162,8 @@ export const ViewReport = () => { } - : + } + {!Boolean(taskText.length) && !loader &&

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

diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss index 65f1f2ee..d4035ad5 100644 --- a/src/pages/ViewReport/viewReport.scss +++ b/src/pages/ViewReport/viewReport.scss @@ -148,6 +148,14 @@ opacity: 0.5; } + .loader { + &:hover { + path { + fill: #ffffff; + } + } + } + .table__container { margin: 0 -28px; overflow: hidden; From df7587e0486a55053fa2327c4741f5d3195ef473 Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 24 Jan 2023 19:22:16 +0300 Subject: [PATCH 5/5] preLoader and validate report form --- src/images/arrowViewReport.png | Bin 0 -> 183 bytes src/pages/ViewReport/ViewReport.js | 6 +++--- src/pages/ViewReport/viewReport.scss | 6 +++++- 3 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 src/images/arrowViewReport.png diff --git a/src/images/arrowViewReport.png b/src/images/arrowViewReport.png new file mode 100644 index 0000000000000000000000000000000000000000..5730f025fb5aab9d6f75630f194848b428335644 GIT binary patch literal 183 zcmeAS@N?(olHy`uVBq!ia0vp^oIotV!3HFcc!WBG1PVMNiy0WWg+Z8+Vb&Z8pde#$ zkh>GZx^prwfgF}}M_)$E)e-c@Nd>>C2$B+ufyAuv_GAMAkZsm+x>3e&DU`}&b zA+zzP86MkT9Jc<;{)k<0rB|>~#l=Y}={p{2`TX!(!czF--yQBIPu*K8H@jmsJ5H!) ZGVMxyHBWNeZ55!o44$rjF6*2UngI5CIE4TJ literal 0 HcmV?d00001 diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js index 9fff3064..7a601274 100644 --- a/src/pages/ViewReport/ViewReport.js +++ b/src/pages/ViewReport/ViewReport.js @@ -10,7 +10,7 @@ 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 arrowSwitchDate from "../../images/arrowViewReport.png"; import './viewReport.scss' @@ -102,11 +102,11 @@ export const ViewReport = () => {
previousDay()}> - + arrow

{getCreatedDate(reportDay)}

nextDay()}> - + arrow
{loader && diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss index d4035ad5..f4ec5da6 100644 --- a/src/pages/ViewReport/viewReport.scss +++ b/src/pages/ViewReport/viewReport.scss @@ -136,6 +136,10 @@ justify-content: center; align-items: center; cursor: pointer; + + img { + margin-left: 3px; + } } &__prev { @@ -145,7 +149,7 @@ .disable { pointer-events: none; - opacity: 0.5; + opacity: 0.3; } .loader {