switch report date
This commit is contained in:
parent
107a00b915
commit
52e7df0e7b
@ -69,7 +69,7 @@ export const Summary = () => {
|
|||||||
<button>Редактировать раздел</button>
|
<button>Редактировать раздел</button>
|
||||||
</div>
|
</div>
|
||||||
<div className='summary__sectionGitItems'>
|
<div className='summary__sectionGitItems'>
|
||||||
{gitInfo.length && gitInfo.map((itemGit) => {
|
{Boolean(gitInfo.length) && gitInfo.map((itemGit) => {
|
||||||
return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
|
return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
|
||||||
<div className='gitItem__info'>
|
<div className='gitItem__info'>
|
||||||
<div className='gitItem__info__about'>
|
<div className='gitItem__info__about'>
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
import React, {useEffect, useState} from 'react'
|
import React, {useEffect, useState} from 'react'
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from "react-router-dom";
|
||||||
import {useRequest} from "../../hooks/useRequest";
|
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 {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
||||||
import {Footer} from "../../components/Footer/Footer";
|
import {Footer} from "../../components/Footer/Footer";
|
||||||
@ -10,26 +13,33 @@ import arrowSwitchDate from "../../images/arrowViewReport.svg";
|
|||||||
|
|
||||||
import './viewReport.scss'
|
import './viewReport.scss'
|
||||||
|
|
||||||
const getCreatedDate = () => {
|
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 date = new Date();
|
||||||
const dd = String(date.getDate()).padStart(2, '0');
|
const dd = String(date.getDate()).padStart(2, '0');
|
||||||
const mm = String(date.getMonth() + 1).padStart(2, '0');
|
const mm = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
const yyyy = date.getFullYear();
|
const yyyy = date.getFullYear();
|
||||||
return `${yyyy}-${mm}-${dd}`
|
return `${yyyy}-${mm}-${dd}`
|
||||||
};
|
}
|
||||||
|
};
|
||||||
export const ViewReport = () => {
|
|
||||||
const {apiRequest} = useRequest();
|
const {apiRequest} = useRequest();
|
||||||
|
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);
|
||||||
useEffect(() => {
|
const [reportDay, setReportDay] = useState(new Date (getCreatedDate(reportDate)))
|
||||||
|
const [currentDay, setCurrentDay] = useState(new Date ())
|
||||||
|
|
||||||
|
function getReportFromDate(day) {
|
||||||
setTaskText([])
|
setTaskText([])
|
||||||
setDifficulties([])
|
setDifficulties([])
|
||||||
setTomorrowTask([])
|
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 => {
|
.then(res => {
|
||||||
let spendTime = 0
|
let spendTime = 0
|
||||||
for (const item of res) {
|
for (const item of res) {
|
||||||
@ -53,6 +63,21 @@ export const ViewReport = () => {
|
|||||||
}
|
}
|
||||||
setTotalHours(spendTime)
|
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 (
|
return (
|
||||||
<div className='viewReport'>
|
<div className='viewReport'>
|
||||||
@ -64,7 +89,7 @@ export const ViewReport = () => {
|
|||||||
<img src={arrow} alt='arrow'/><p>Вернуться</p>
|
<img src={arrow} alt='arrow'/><p>Вернуться</p>
|
||||||
</Link>
|
</Link>
|
||||||
<div className='viewReport__bar'>
|
<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>
|
<p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} часов</span></p>
|
||||||
{/*<div className='viewReport__bar__progressBar'>*/}
|
{/*<div className='viewReport__bar__progressBar'>*/}
|
||||||
{/* <span></span>*/}
|
{/* <span></span>*/}
|
||||||
@ -73,11 +98,11 @@ export const ViewReport = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='viewReport__switchDate'>
|
<div className='viewReport__switchDate'>
|
||||||
<div className='viewReport__switchDate__prev switchDate'>
|
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
|
||||||
<img src={arrowSwitchDate} alt='arrow'/>
|
<img src={arrowSwitchDate} alt='arrow'/>
|
||||||
</div>
|
</div>
|
||||||
<p>{getCreatedDate()}</p>
|
<p>{getCreatedDate(reportDay)}</p>
|
||||||
<div className='viewReport__switchDate__next switchDate'>
|
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) || getCreatedDate(currentDay) < getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
|
||||||
<img src={arrowSwitchDate} alt='arrow'/>
|
<img src={arrowSwitchDate} alt='arrow'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -112,20 +137,24 @@ export const ViewReport = () => {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
{Boolean(difficulties.length) &&
|
||||||
<div className='viewReport__item'>
|
<div className='viewReport__item'>
|
||||||
<h3>Какие сложности возникли?</h3>
|
<h3>Какие сложности возникли?</h3>
|
||||||
{difficulties.length && 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) &&
|
||||||
<div className='viewReport__item'>
|
<div className='viewReport__item'>
|
||||||
<h3>Что планируется сделать завтра?</h3>
|
<h3>Что планируется сделать завтра?</h3>
|
||||||
{tomorrowTask.length && tomorrowTask.map((item, index) => {
|
{tomorrowTask.map((item, index) => {
|
||||||
return <p key={index}>{item}</p>
|
return <p key={index}>{item}</p>
|
||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
:
|
:
|
||||||
<div className='viewReport__noTask'>
|
<div className='viewReport__noTask'>
|
||||||
|
@ -122,7 +122,7 @@
|
|||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 18px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
@ -143,6 +143,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.disable {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
.table__container {
|
.table__container {
|
||||||
margin: 0 -28px;
|
margin: 0 -28px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
Loading…
Reference in New Issue
Block a user