change profile
This commit is contained in:
89
src/components/ProfileCalendar/ProfileCalendar.js
Normal file
89
src/components/ProfileCalendar/ProfileCalendar.js
Normal file
@ -0,0 +1,89 @@
|
||||
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>
|
||||
)
|
||||
};
|
||||
109
src/components/ProfileCalendar/ProfileCalendarComponent.js
Normal file
109
src/components/ProfileCalendar/ProfileCalendarComponent.js
Normal file
@ -0,0 +1,109 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
// import ellipse from '../../images/ellipse.png'
|
||||
import rectangle from '../../images/rectangle__calendar.png'
|
||||
import calendarIcon from '../../images/calendar_icon.png'
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/ru'
|
||||
import { calendarHelper, currentMonthAndDay} from '../Calendar/calendarHelper'
|
||||
import { setReportDate } from '../../redux/reportSlice';
|
||||
import {useDispatch} from "react-redux";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
import './../Calendar/calendarComponent.scss'
|
||||
|
||||
export const ProfileCalendarComponent = ({reportsDates}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [value, setValue] = useState(moment())
|
||||
const [calendar, setCalendar] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
setCalendar(calendarHelper(value))
|
||||
}, [value])
|
||||
|
||||
// function beforeToday(day) {
|
||||
// return day.isBefore(new Date(), 'day')
|
||||
// }
|
||||
|
||||
function isToday(day) {
|
||||
return day.isSame(new Date(), 'day')
|
||||
}
|
||||
|
||||
function dayStyles(day) {
|
||||
if (value < day) return ``
|
||||
if (day.day() === 6 || day.day() === 0) return `selected`
|
||||
function correctDay(day) {
|
||||
if (day < 10) {
|
||||
return `0${day}`
|
||||
} return day
|
||||
}
|
||||
for (const date of reportsDates) {
|
||||
if (`${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${correctDay(new Date(day).getDate())}` === date.date) {
|
||||
return `before`
|
||||
}
|
||||
}
|
||||
if (isToday(day)) return `today`
|
||||
return 'pass'
|
||||
}
|
||||
|
||||
// function prevMonth() {
|
||||
// return value.clone().subtract(1, 'month')
|
||||
// }
|
||||
//
|
||||
// function nextMonth() {
|
||||
// return value.clone().add(1, 'month');
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className='calendar-component'>
|
||||
<div className='calendar-component__header'>
|
||||
<h3>Мои отчеты</h3>
|
||||
{/*<div className='calendar-component__header-box'>*/}
|
||||
{/* <img src={ellipse} alt='' />*/}
|
||||
{/* <span onClick={() => setValue(prevMonth())}>{prevMonth().format('MMMM')}</span>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className='calendar-component__header-box'>*/}
|
||||
{/* <img src={ellipse} alt='' />*/}
|
||||
{/* <span onClick={() => setValue(nextMonth())}>{nextMonth().format('MMMM')}</span>*/}
|
||||
{/*</div>*/}
|
||||
</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) => (
|
||||
<Link to='/report'>
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch(setReportDate(day))
|
||||
}}
|
||||
key={day}
|
||||
className={dayStyles(day)}
|
||||
name={day.format('dddd')}
|
||||
id='btn'
|
||||
>
|
||||
<img className={'calendar__icon'} src={calendarIcon} alt='' />
|
||||
{currentMonthAndDay(day)}
|
||||
</button>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
20
src/components/ProfileCalendar/profileCalendar.scss
Normal file
20
src/components/ProfileCalendar/profileCalendar.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.calendar {
|
||||
|
||||
.profile__calendar {
|
||||
margin-top: 20px;
|
||||
}
|
||||
&__back {
|
||||
text-decoration: none !important;
|
||||
color: black !important;
|
||||
font-size: 14px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__profile {
|
||||
margin-top: 42px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user