Merge remote-tracking branch 'origin/main' into main
This commit is contained in:
@ -95,6 +95,24 @@
|
||||
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
@media (max-width: 950px) {
|
||||
width: 200px;
|
||||
font-size: 15px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 590px) {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__hours {
|
||||
@ -104,7 +122,8 @@
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
margin-left: 68px;
|
||||
margin: 50px 0 0;
|
||||
text-transform: capitalize;
|
||||
|
||||
span {
|
||||
font-weight: 100;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
padding-left: 68px;
|
||||
padding-right: 54px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 94px;
|
||||
padding-bottom: 40px;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
|
||||
&__header {
|
||||
@ -20,16 +20,27 @@
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin: 0px 10px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
&:first-child {
|
||||
transform: rotate(180deg);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@ -42,6 +53,10 @@
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -79,8 +94,9 @@
|
||||
|
||||
button {
|
||||
margin: 0 auto;
|
||||
width: 125px;
|
||||
height: 42px;
|
||||
//width: 125px;
|
||||
//height: 42px;
|
||||
padding: 0 5px;
|
||||
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c4c4c4;
|
||||
@ -94,35 +110,67 @@
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 115px;
|
||||
height: 42px;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 968px) {
|
||||
width: 62px;
|
||||
height: 40px;
|
||||
font-size: 10px;
|
||||
|
||||
img {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 610px) {
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 610px) {
|
||||
width: 55px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 45px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.calendar-component {
|
||||
&__form {
|
||||
button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 968px) {
|
||||
.calendar-component {
|
||||
margin-bottom: 40px;
|
||||
padding: 28px 0 48px 0;
|
||||
padding: 28px 10px 48px 10px;
|
||||
|
||||
&__header {
|
||||
h3 {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 25%;
|
||||
}
|
||||
//h3 {
|
||||
// position: absolute;
|
||||
// top: -10%;
|
||||
// left: 25%;
|
||||
//}
|
||||
|
||||
&-box {
|
||||
margin-left: 20px;
|
||||
@ -132,114 +180,103 @@
|
||||
&__rectangle {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
&__form {
|
||||
button {
|
||||
width: 72px;
|
||||
height: 40px;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.calendar-component__form > button {
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
//@media (max-width: 768px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 70px;
|
||||
// height: 40px;
|
||||
//
|
||||
// img {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 68px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 66px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 64px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 460.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 440.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 52px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 428.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 49px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 395.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 46px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 44px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 349.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 42px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 346.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
//@media (max-width: 540.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 68px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 520.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 66px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 500.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 64px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 480.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 60px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 460.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 56px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 440.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 52px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 428.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 50px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 414.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 49px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 395.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 46px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 350.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 44px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 349.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 42px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 346.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 40px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
|
||||
.calendar__icon {
|
||||
margin-right: 10px;
|
||||
|
||||
@ -30,6 +30,18 @@ export function getReports(value) {
|
||||
return getReports;
|
||||
}
|
||||
|
||||
export function 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}`
|
||||
}
|
||||
}
|
||||
|
||||
export function currentMonth() {
|
||||
const currentMonth = moment().format('MMMM');
|
||||
|
||||
@ -40,6 +52,11 @@ export function currentMonthAndDay(day) {
|
||||
return day.format('D MMMM');
|
||||
}
|
||||
|
||||
export function getCorrectDate(day) {
|
||||
const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
|
||||
return `${new Date(day).getDate()} ${months[new Date(day).getMonth()]} ${new Date(day).getFullYear()} года`
|
||||
};
|
||||
|
||||
export function currentMonthAndDayReportPage() {
|
||||
return moment().format('D MMMM');
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import {useDispatch, useSelector} from 'react-redux'
|
||||
|
||||
import {currentMonth, getReports} from '../Calendar/calendarHelper'
|
||||
import {getReports} from '../Calendar/calendarHelper'
|
||||
import { Link } from 'react-router-dom'
|
||||
import moment from "moment";
|
||||
|
||||
@ -14,23 +14,27 @@ import {urlForLocal} from "../../helper";
|
||||
|
||||
import {apiRequest} from "../../api/request";
|
||||
import { getProfileInfo } from '../../redux/outstaffingSlice'
|
||||
import {setReportDate} from "../../redux/reportSlice";
|
||||
import {getRequestDates, setReportDate, setRequestDate} from "../../redux/reportSlice";
|
||||
|
||||
import 'moment/locale/ru'
|
||||
import './profileCalendar.scss'
|
||||
|
||||
|
||||
export const ProfileCalendar = () => {
|
||||
const dispatch = useDispatch();
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
const [month, setMonth] = useState('');
|
||||
const profileInfo = useSelector(getProfileInfo)
|
||||
const requestDates = useSelector(getRequestDates)
|
||||
const [value, setValue] = useState(moment())
|
||||
const [reports, setReports] = useState([]);
|
||||
const [totalHours, setTotalHours] = useState(0);
|
||||
const [requestDates, setRequestDates] = useState('');
|
||||
const [loader, setLoader] = useState(false)
|
||||
const [loader, setLoader] = useState(true)
|
||||
|
||||
function setValueHandler (value) {
|
||||
setValue(value)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setRequestDates(getReports(moment()))
|
||||
dispatch(setRequestDate(getReports(moment())))
|
||||
},[]);
|
||||
|
||||
useEffect( () => {
|
||||
@ -54,10 +58,6 @@ export const ProfileCalendar = () => {
|
||||
})
|
||||
}, [requestDates]);
|
||||
|
||||
useEffect(() => {
|
||||
setMonth(currentMonth)
|
||||
}, [month]);
|
||||
|
||||
return (
|
||||
<div className='profile__calendar'>
|
||||
<ProfileHeader/>
|
||||
@ -66,7 +66,7 @@ export const ProfileCalendar = () => {
|
||||
<div className='summary__info'>
|
||||
<div className='summary__person'>
|
||||
<img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
|
||||
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
||||
<p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
|
||||
</div>
|
||||
<Link to='/report'>
|
||||
<button className="calendar__btn" onClick={() => {
|
||||
@ -79,10 +79,7 @@ export const ProfileCalendar = () => {
|
||||
:
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-12'>
|
||||
<ProfileCalendarComponent reportsDates={reports} />
|
||||
<p className='calendar__hours'>
|
||||
{month} : <span> {totalHours} часов </span>
|
||||
</p>
|
||||
<ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -1,28 +1,29 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
// import ellipse from '../../images/ellipse.png'
|
||||
import arrow from '../../images/arrowCalendar.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 {calendarHelper, currentMonth, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
|
||||
import {setReportDate, setRequestDate} from '../../redux/reportSlice';
|
||||
import {useDispatch} from "react-redux";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
import 'moment/locale/ru'
|
||||
import './../Calendar/calendarComponent.scss'
|
||||
|
||||
export const ProfileCalendarComponent = ({reportsDates}) => {
|
||||
export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [value, setValue] = useState(moment())
|
||||
const [currentDay] = useState(moment())
|
||||
const [calendar, setCalendar] = useState([])
|
||||
const [month, setMonth] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setCalendar(calendarHelper(value))
|
||||
}, [value])
|
||||
|
||||
// function beforeToday(day) {
|
||||
// return day.isBefore(new Date(), 'day')
|
||||
// }
|
||||
useEffect(() => {
|
||||
setMonth(value.format('MMMM'))
|
||||
}, [month]);
|
||||
|
||||
function isToday(day) {
|
||||
return day.isSame(new Date(), 'day')
|
||||
@ -35,8 +36,8 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
|
||||
}
|
||||
|
||||
function dayStyles(day) {
|
||||
if (value < day) return `block`
|
||||
for (const date of reportsDates) {
|
||||
if (currentDay < day) return `block`
|
||||
for (const date of reports) {
|
||||
if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
|
||||
return `before`
|
||||
}
|
||||
@ -47,7 +48,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
|
||||
}
|
||||
|
||||
function correctRoute(day) {
|
||||
for (const date of reportsDates) {
|
||||
for (const date of reports) {
|
||||
if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
|
||||
return `../view`
|
||||
}
|
||||
@ -55,26 +56,40 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
|
||||
return '../../report'
|
||||
}
|
||||
|
||||
// function prevMonth() {
|
||||
// return value.clone().subtract(1, 'month')
|
||||
// }
|
||||
//
|
||||
// function nextMonth() {
|
||||
// return value.clone().add(1, 'month');
|
||||
// }
|
||||
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 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>
|
||||
</div>
|
||||
|
||||
<div className='calendar-component__rectangle'>
|
||||
@ -113,7 +128,10 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className='calendar__hours'>
|
||||
{month} : <span> {totalHours} часов </span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -15,6 +15,10 @@
|
||||
|
||||
.summary__info {
|
||||
padding-right: 25px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
@ -49,4 +53,22 @@
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
.summary__info {
|
||||
@media (max-width: 800px) {
|
||||
.summary__name {
|
||||
margin: 0;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.summary__name {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,6 +21,45 @@ export const ProfileHeader = () => {
|
||||
|
||||
const userRole = useSelector(getRole);
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
const [user] = useState('developer')
|
||||
const [navInfo] = useState({
|
||||
developer: [
|
||||
{
|
||||
path: '/summary',
|
||||
name: 'Резюме'
|
||||
},
|
||||
{
|
||||
path: '/calendar',
|
||||
name: 'Отчетность'
|
||||
},
|
||||
{
|
||||
path: '/tracker',
|
||||
name: 'Трекер'
|
||||
},
|
||||
{
|
||||
path: '/payouts',
|
||||
name: 'Выплаты'
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'Настройки'
|
||||
},
|
||||
],
|
||||
partner: [
|
||||
{
|
||||
path: '/employees',
|
||||
name: 'Сотрудники'
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
name: 'Отчетность'
|
||||
},
|
||||
{
|
||||
path: '/requests',
|
||||
name: 'Запросы'
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
||||
|
||||
@ -44,7 +83,14 @@ export const ProfileHeader = () => {
|
||||
<header className='profileHeader'>
|
||||
<div className='profileHeader__head'>
|
||||
<div className='profileHeader__container'>
|
||||
<h2 className='profileHeader__title'>itguild.<span>для разработчиков</span></h2>
|
||||
<h2 className='profileHeader__title'>itguild.
|
||||
<span>
|
||||
{user === 'developer' ?
|
||||
'для разработчиков' :
|
||||
'для партнеров'
|
||||
}
|
||||
</span>
|
||||
</h2>
|
||||
<button onClick={handler} className='profileHeader__logout'>
|
||||
{isLoggingOut ? <Loader/> : 'Выйти'}
|
||||
</button>
|
||||
@ -53,16 +99,23 @@ export const ProfileHeader = () => {
|
||||
<div className='profileHeader__info'>
|
||||
<div className='profileHeader__container'>
|
||||
<nav className='profileHeader__nav'>
|
||||
<NavLink end to={'/profile/summary'}>Резюме</NavLink>
|
||||
<NavLink end to={'/profile'}>Отчетность</NavLink>
|
||||
<NavLink end to={'/'}>Трекер</NavLink>
|
||||
<NavLink end to={'/'}>Выплаты</NavLink>
|
||||
<NavLink end to={'/'}>Настройки</NavLink>
|
||||
{
|
||||
navInfo[user].map((link, index) => {
|
||||
return <NavLink key={index} end to={`/profile${link.path}`}>{link.name}</NavLink>
|
||||
})
|
||||
}
|
||||
</nav>
|
||||
|
||||
<div className='profileHeader__personalInfo'>
|
||||
<h3 className='profileHeader__personalInfoName'>{profileInfo?.fio}</h3>
|
||||
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
|
||||
<h3 className='profileHeader__personalInfoName'>
|
||||
{user === 'developer' ?
|
||||
profileInfo?.fio :
|
||||
''
|
||||
}
|
||||
</h3>
|
||||
<NavLink end to={'/profile'}>
|
||||
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,6 +71,10 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
column-gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__personalInfo {
|
||||
|
||||
@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react'
|
||||
import {useSelector} from 'react-redux'
|
||||
import {Link, useNavigate} from 'react-router-dom'
|
||||
import DatePicker, { registerLocale } from "react-datepicker"
|
||||
import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper'
|
||||
import ru from "date-fns/locale/ru"
|
||||
registerLocale("ru", ru);
|
||||
|
||||
@ -27,18 +28,6 @@ const ReportForm = () => {
|
||||
const navigate= useNavigate();
|
||||
const reportDate = useSelector(getReportDate);
|
||||
|
||||
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}`
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initListeners()
|
||||
}, [])
|
||||
@ -71,13 +60,11 @@ const ReportForm = () => {
|
||||
const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0);
|
||||
|
||||
const deleteInput = (indexRemove) => {
|
||||
if (indexRemove !== 0) {
|
||||
setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
|
||||
}
|
||||
setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
|
||||
};
|
||||
|
||||
const handler = () => {
|
||||
if(!inputs[0].task) {
|
||||
if(!inputs[0].task || !inputs[0].hours_spent) {
|
||||
setReportSuccess('Заполните задачи');
|
||||
setTimeout(() => setReportSuccess(''), 1000)
|
||||
return
|
||||
@ -130,7 +117,7 @@ const ReportForm = () => {
|
||||
src={calendarIcon}
|
||||
alt=''
|
||||
/>
|
||||
{getCreatedDate(startDate)}
|
||||
{getCorrectDate(startDate)}
|
||||
</div>
|
||||
<DatePicker
|
||||
className='datePicker'
|
||||
@ -184,9 +171,11 @@ const ReportForm = () => {
|
||||
: input
|
||||
}))}/>
|
||||
</div>
|
||||
{index > 0 &&
|
||||
<div className='report-form__task-remove'>
|
||||
<img onClick={() => deleteInput(index)} src={remove} alt=''/>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
)
|
||||
})}
|
||||
@ -196,7 +185,6 @@ const ReportForm = () => {
|
||||
<span>Добавить еще </span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-4'></div>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
|
||||
@ -18,6 +18,10 @@
|
||||
border-radius: 12px;
|
||||
margin: 25px 0 80px;
|
||||
padding: 50px 40px;
|
||||
|
||||
@media (max-width: 555px) {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.report__head {
|
||||
@ -53,6 +57,10 @@
|
||||
letter-spacing: normal;
|
||||
line-height: 48.74px;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 555px) {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -65,6 +73,11 @@
|
||||
text-align: left;
|
||||
margin-top: 52px;
|
||||
margin-bottom: 35px;
|
||||
|
||||
@media (max-width: 555px) {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,6 +97,7 @@
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
margin-left: 20px;
|
||||
@ -102,7 +116,7 @@
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 48.74px;
|
||||
width: 40px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&-list {
|
||||
@ -144,16 +158,25 @@
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
margin-bottom: 26px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
&--description {
|
||||
margin-left: 20px;
|
||||
}
|
||||
//&--description {
|
||||
// margin-left: 20px;
|
||||
//}
|
||||
|
||||
&--hours {
|
||||
margin-left: 330px;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
margin-left: 125px;
|
||||
}
|
||||
|
||||
@media (max-width: 610px) {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,6 +184,10 @@
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-form {
|
||||
@ -186,6 +213,14 @@
|
||||
font-size: 1.8em;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 610px) {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -200,6 +235,18 @@
|
||||
outline: none;
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 440px) {
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
@media (max-width: 410px) {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -235,6 +282,11 @@
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
outline: none;
|
||||
|
||||
@media (max-width: 610px) {
|
||||
max-width: 460px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user