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

switch report date

Browse Source
This commit is contained in:
Николай Полтщук 2023-01-23 23:51:18 +03:00
parent 107a00b915
commit 52e7df0e7b
3 changed files with 64 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Summary/Summary.js
View File

@ -69,7 +69,7 @@ export const Summary = () => {
<button>Редактировать раздел</button>
</div>
<div className='summary__sectionGitItems'>
{gitInfo.length && gitInfo.map((itemGit) => {
{Boolean(gitInfo.length) && gitInfo.map((itemGit) => {
return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
<div className='gitItem__info'>
<div className='gitItem__info__about'>

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

@ -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 (
<div className='viewReport'>
@ -64,7 +89,7 @@ export const ViewReport = () => {
<img src={arrow} alt='arrow'/><p>Вернуться</p>
</Link>
<div className='viewReport__bar'>
<h3 className='viewReport__bar__date'>{getCreatedDate()}</h3>
<h3 className='viewReport__bar__date'>{getCreatedDate(reportDay)}</h3>
<p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} часов</span></p>
{/*<div className='viewReport__bar__progressBar'>*/}
{/* <span></span>*/}
@ -73,11 +98,11 @@ export const ViewReport = () => {
</div>
</div>
<div className='viewReport__switchDate'>
<div className='viewReport__switchDate__prev switchDate'>
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
<img src={arrowSwitchDate} alt='arrow'/>
</div>
<p>{getCreatedDate()}</p>
<div className='viewReport__switchDate__next switchDate'>
<p>{getCreatedDate(reportDay)}</p>
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) || getCreatedDate(currentDay) < getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
<img src={arrowSwitchDate} alt='arrow'/>
</div>
</div>
@ -112,20 +137,24 @@ export const ViewReport = () => {
</tbody>
</table>
</div>
<div className='viewReport__item'>
<h3>Какие сложности возникли?</h3>
{difficulties.length && difficulties.map((item, index) => {
return <p key={index}>{item}</p>
}
)}
</div>
<div className='viewReport__item'>
<h3>Что планируется сделать завтра?</h3>
{tomorrowTask.length && tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>
}
)}
</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>
:
<div className='viewReport__noTask'>

7
src/pages/ViewReport/viewReport.scss
View File

@ -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;