90 lines
3.5 KiB
JavaScript
90 lines
3.5 KiB
JavaScript
|
import React, { useEffect, useState } from 'react'
|
||
|
|
import {useDispatch, useSelector} from 'react-redux'
|
||
|
|
import { getProfileInfo } from '../../redux/outstaffingSlice'
|
||
|
|
import { setReportDate } from '../../redux/reportSlice';
|
||
|
|
import {fetchGet} from "../../server/server";
|
||
|
|
import arrow from "../../images/right-arrow.png";
|
||
|
|
import { Link } from 'react-router-dom'
|
||
|
|
import moment from "moment";
|
||
|
|
import rectangle from '../../images/rectangle_secondPage.png'
|
||
|
|
import {currentMonth, getReports} from '../Calendar/calendarHelper'
|
||
|
|
import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
|
||
|
|
import { Footer } from '../Footer/Footer'
|
||
|
|
|
||
|
|
import './profileCalendar.scss'
|
||
|
|
export const ProfileCalendar = () => {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const profileInfo = useSelector(getProfileInfo)
|
||
|
|
const [month, setMonth] = useState('')
|
||
|
|
const [reports, setReports] = useState([])
|
||
|
|
const [totalHours, setTotalHours] = useState(0)
|
||
|
|
const [value, setValue] = useState(moment())
|
||
|
|
const [requestDates, setRequestDates] = useState('')
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setRequestDates(getReports(value))
|
||
|
|
})
|
||
|
|
|
||
|
|
useEffect(async () => {
|
||
|
|
if (!requestDates) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const response = await fetchGet({
|
||
|
|
link: `${process.env.REACT_APP_API_URL}/api/reports/reports-by-date?${requestDates}&user_id=${localStorage.getItem('id')}`,
|
||
|
|
}).then((reports) => {
|
||
|
|
let spendTime = 0
|
||
|
|
reports.map((report)=> {
|
||
|
|
if (report.spendTime) {
|
||
|
|
spendTime += Number(report.spendTime)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
setTotalHours(spendTime)
|
||
|
|
setReports(reports)
|
||
|
|
})
|
||
|
|
},[requestDates])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setMonth(currentMonth)
|
||
|
|
}, [month])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className='calendar'>
|
||
|
|
<div className='profile__calendar'>
|
||
|
|
<Link className='calendar__back' to={`/profile`}>
|
||
|
|
<div><img src={arrow} alt=''/>Вернуться назад</div>
|
||
|
|
</Link>
|
||
|
|
<h2 className='calendar__profile'>
|
||
|
|
Добрый день, <span>{profileInfo.fio}</span>
|
||
|
|
</h2>
|
||
|
|
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
|
||
|
|
<div className='calendar__info'>
|
||
|
|
<img className='calendar__info-img' src={profileInfo.photo} alt='img' />
|
||
|
|
<h3 className='calendar__info-name'>{}</h3>
|
||
|
|
</div>
|
||
|
|
<div className='calendar__title'>
|
||
|
|
<h3 className='calendar__title-text'>{profileInfo.position_name}</h3>
|
||
|
|
<img className='calendar__title-img' src={rectangle} alt='img' />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Link to='/report'>
|
||
|
|
<button className='calendar__btn' onClick={() => {
|
||
|
|
dispatch(setReportDate(value))
|
||
|
|
}}>Заполнить отчет за день</button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className='row'>
|
||
|
|
<div className='col-12 col-xl-12'>
|
||
|
|
<ProfileCalendarComponent reportsDates={reports} />
|
||
|
|
<p className='calendar__hours'>
|
||
|
|
{month} : <span> {totalHours} часов </span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Footer />
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
};
|