2022-12-26 15:12:01 +03:00
|
|
|
|
import React, { useState, useEffect } from 'react'
|
2023-02-21 19:05:04 +03:00
|
|
|
|
import arrow from '../../images/arrowCalendar.png'
|
2022-12-26 15:12:01 +03:00
|
|
|
|
import rectangle from '../../images/rectangle__calendar.png'
|
|
|
|
|
import calendarIcon from '../../images/calendar_icon.png'
|
|
|
|
|
import moment from 'moment'
|
2023-03-01 00:28:58 +03:00
|
|
|
|
import {calendarHelper, currentMonthAndDay, getReports, hourOfNum} from '../Calendar/calendarHelper'
|
2023-02-09 20:46:02 +03:00
|
|
|
|
import {setReportDate, setRequestDate} from '../../redux/reportSlice';
|
2022-12-26 15:12:01 +03:00
|
|
|
|
import {useDispatch} from "react-redux";
|
|
|
|
|
import {Link} from "react-router-dom";
|
|
|
|
|
|
2023-02-09 20:46:02 +03:00
|
|
|
|
import 'moment/locale/ru'
|
2022-12-26 15:12:01 +03:00
|
|
|
|
import './../Calendar/calendarComponent.scss'
|
|
|
|
|
|
2023-02-17 15:19:49 +03:00
|
|
|
|
export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => {
|
2022-12-26 15:12:01 +03:00
|
|
|
|
const dispatch = useDispatch();
|
2023-02-09 20:46:02 +03:00
|
|
|
|
const [currentDay] = useState(moment())
|
2022-12-26 15:12:01 +03:00
|
|
|
|
const [calendar, setCalendar] = useState([])
|
2023-02-17 15:19:49 +03:00
|
|
|
|
const [month, setMonth] = useState('');
|
2022-12-26 15:12:01 +03:00
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setCalendar(calendarHelper(value))
|
|
|
|
|
}, [value])
|
|
|
|
|
|
2023-02-17 15:19:49 +03:00
|
|
|
|
useEffect(() => {
|
|
|
|
|
setMonth(value.format('MMMM'))
|
|
|
|
|
}, [month]);
|
2022-12-26 15:12:01 +03:00
|
|
|
|
|
|
|
|
|
function isToday(day) {
|
|
|
|
|
return day.isSame(new Date(), 'day')
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-16 16:28:56 +03:00
|
|
|
|
function correctDay(day) {
|
|
|
|
|
if (day < 10) {
|
|
|
|
|
return `0${day}`
|
|
|
|
|
} return day
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-26 15:12:01 +03:00
|
|
|
|
function dayStyles(day) {
|
2023-02-09 20:46:02 +03:00
|
|
|
|
if (currentDay < day) return `block`
|
|
|
|
|
for (const date of reports) {
|
2023-01-23 14:59:57 +03:00
|
|
|
|
if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
|
2022-12-26 15:12:01 +03:00
|
|
|
|
return `before`
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-01-16 16:28:56 +03:00
|
|
|
|
if (day.day() === 6 || day.day() === 0) return `selected`
|
2022-12-26 15:12:01 +03:00
|
|
|
|
if (isToday(day)) return `today`
|
|
|
|
|
return 'pass'
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-16 16:28:56 +03:00
|
|
|
|
function correctRoute(day) {
|
2023-02-09 20:46:02 +03:00
|
|
|
|
for (const date of reports) {
|
2023-01-23 14:59:57 +03:00
|
|
|
|
if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
|
|
|
|
|
return `../view`
|
2023-01-16 16:28:56 +03:00
|
|
|
|
}
|
|
|
|
|
}
|
2023-01-16 20:38:33 +03:00
|
|
|
|
return '../../report'
|
2023-01-16 16:28:56 +03:00
|
|
|
|
}
|
|
|
|
|
|
2023-02-09 20:46:02 +03:00
|
|
|
|
function prevMonth() {
|
|
|
|
|
return value.clone().subtract(1, 'month')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function nextMonth() {
|
|
|
|
|
return value.clone().add(1, 'month');
|
|
|
|
|
}
|
2022-12-26 15:12:01 +03:00
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='calendar-component'>
|
|
|
|
|
<div className='calendar-component__header'>
|
2023-03-01 00:28:58 +03:00
|
|
|
|
<div className='calendar-component__header-info'>
|
|
|
|
|
<h3>Мои отчеты:</h3>
|
|
|
|
|
<p className='calendar__hours'>
|
2023-03-07 19:00:41 +03:00
|
|
|
|
{month} <span> {totalHours} {hourOfNum(totalHours)} </span>
|
2023-03-01 00:28:58 +03:00
|
|
|
|
</p>
|
2023-02-09 20:46:02 +03:00
|
|
|
|
</div>
|
2023-03-01 00:28:58 +03:00
|
|
|
|
<div className='calendar-component__header-switcher'>
|
|
|
|
|
<div className='calendar-component__header-box' onClick={() => {
|
|
|
|
|
setValueHandler(prevMonth())
|
|
|
|
|
dispatch(setRequestDate(getReports(prevMonth())))
|
|
|
|
|
}}>
|
|
|
|
|
<img src={arrow} alt='' />
|
|
|
|
|
<span>
|
|
|
|
|
{prevMonth().format('MMMM')}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='calendar-component__header-box'>
|
|
|
|
|
<span>{value.format('YYYY')}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='calendar-component__header-box' onClick={() => {
|
|
|
|
|
setValueHandler(nextMonth())
|
|
|
|
|
dispatch(setRequestDate(getReports(nextMonth())))
|
|
|
|
|
|
|
|
|
|
}}>
|
|
|
|
|
<span>
|
|
|
|
|
{nextMonth().format('MMMM')}
|
|
|
|
|
</span>
|
|
|
|
|
<img src={arrow} alt='' />
|
|
|
|
|
</div>
|
2023-02-09 20:46:02 +03:00
|
|
|
|
</div>
|
2022-12-26 15:12:01 +03:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='calendar-component__rectangle'>
|
|
|
|
|
<img src={rectangle} alt='' />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='calendar-component__body'>
|
|
|
|
|
<div>
|
|
|
|
|
<p>Пн</p>
|
|
|
|
|
<p>Вт</p>
|
|
|
|
|
<p>Ср</p>
|
|
|
|
|
<p>Чт</p>
|
|
|
|
|
<p>Пт</p>
|
|
|
|
|
<p>Сб</p>
|
|
|
|
|
<p>Вс</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='calendar-component__form'>
|
|
|
|
|
{calendar.map((week) =>
|
|
|
|
|
week.map((day) => (
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => {
|
|
|
|
|
dispatch(setReportDate(day))
|
|
|
|
|
}}
|
|
|
|
|
key={day}
|
|
|
|
|
className={dayStyles(day)}
|
|
|
|
|
name={day.format('dddd')}
|
|
|
|
|
id='btn'
|
|
|
|
|
>
|
2023-01-16 20:38:33 +03:00
|
|
|
|
<Link to={correctRoute(day)}>
|
2023-01-16 16:28:56 +03:00
|
|
|
|
<img className={'calendar__icon'} src={calendarIcon} alt='' />
|
|
|
|
|
{currentMonthAndDay(day)}
|
|
|
|
|
</Link>
|
2022-12-26 15:12:01 +03:00
|
|
|
|
</button>
|
|
|
|
|
))
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
2023-02-09 20:46:02 +03:00
|
|
|
|
})
|
2022-12-26 15:12:01 +03:00
|
|
|
|
|