apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new fixes

Browse Source
This commit is contained in:
Николай Полтщук
2023-03-01 00:28:58 +03:00
parent b568ec699e
commit 28a0c7f843
13 changed files with 141 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Calendar/calendarComponent.scss
View File

@ -11,6 +11,21 @@
&__header {
display: flex;
justify-content: space-between;
&-info {
display: flex;
.calendar__hours {
margin: 0 10px;
line-height: 0;
font-weight: 500;
}
}
&-switcher {
display: flex;
}
h3 {
@ -20,6 +35,7 @@
letter-spacing: normal;
line-height: 30px;
text-align: left;
margin-bottom: 0;
@media (max-width: 500px) {
font-size: 1.7em;

6
src/components/Calendar/calendarHelper.js
View File

@ -60,3 +60,9 @@ export function getCorrectDate(day) {
export function currentMonthAndDayReportPage() {
return moment().format('D MMMM');
}
export function hourOfNum(number) {
const hours = [' час', ' часа', ' часов'];
const cases = [2, 0, 1, 1, 1, 2];
return hours[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
}

6
src/components/ProfileCalendar/ProfileCalendar.js
View File

@ -80,9 +80,11 @@ export const ProfileCalendar = () => {
</Link>
</div>
{loader ?
<Loader height={80} width={80} />
<div className='loader__wrapper'>
<Loader height={80} width={80} />
</div>
:
<div className='row'>
<div className='row calendar__wrapper'>
<div className='col-12 col-xl-12'>
<ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
</div>

52
src/components/ProfileCalendar/ProfileCalendarComponent.js
View File

@ -3,7 +3,7 @@ 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 {calendarHelper, currentMonth, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
import {calendarHelper, currentMonthAndDay, getReports, hourOfNum} from '../Calendar/calendarHelper'
import {setReportDate, setRequestDate} from '../../redux/reportSlice';
import {useDispatch} from "react-redux";
import {Link} from "react-router-dom";
@ -67,28 +67,35 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
return (
<div className='calendar-component'>
<div className='calendar-component__header'>
<h3>Мои отчеты</h3>
<div className='calendar-component__header-box' onClick={() => {
setValueHandler(prevMonth())
dispatch(setRequestDate(getReports(prevMonth())))
}}>
<img src={arrow} alt='' />
<span>
{prevMonth().format('MMMM')}
</span>
<div className='calendar-component__header-info'>
<h3>Мои отчеты:</h3>
<p className='calendar__hours'>
{month} - <span> {totalHours} {hourOfNum(totalHours)} </span>
</p>
</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())))
<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='' />
}}>
<span>
{nextMonth().format('MMMM')}
</span>
<img src={arrow} alt='' />
</div>
</div>
</div>
@ -128,9 +135,6 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
)}
</div>
</div>
<p className='calendar__hours'>
{month} : <span> {totalHours} часов </span>
</p>
</div>
)
})

21
src/components/ProfileCalendar/profileCalendar.scss
View File

@ -21,8 +21,27 @@
}
}
.loader__wrapper {
min-height: 719px;
display: flex;
justify-content: center;
align-items: center;
@media (max-width: 1000px) {
min-height: 645px;
}
}
.calendar__wrapper {
min-height: 719px;
@media (max-width: 1000px) {
min-height: auto;
}
}
.loader {
margin: 20px 0 50px;
&:hover {
path {
fill: #ffffff;

28
src/components/ProfileHeader/ProfileHeader.js
View File

@ -46,18 +46,26 @@ export const ProfileHeader = () => {
},
],
partner: [
{
path: '/employees',
name: 'Сотрудники'
},
{
path: '',
name: 'Отчетность'
},
{
path: '/requests',
name: 'Запросы'
},
{
path: '/employees',
name: 'Персонал'
},
{
path: '/tracker',
name: 'Трекер'
},
{
path: '/payouts',
name: 'Договора'
},
{
path: '/settings',
name: 'Настройки'
},
]
})
@ -86,14 +94,14 @@ export const ProfileHeader = () => {
<header className='profileHeader'>
<div className='profileHeader__head'>
<div className='profileHeader__container'>
<h2 className='profileHeader__title'>itguild.
<NavLink to={'/profile'} className='profileHeader__title'>itguild.
<span>
{user === 'developer' ?
'для разработчиков' :
'для партнеров'
}
</span>
</h2>
</NavLink>
<button onClick={handler} className='profileHeader__logout'>
{isLoggingOut ? <Loader/> : 'Выйти'}
</button>

6
src/components/ProfileHeader/profileHeader.scss
View File

@ -23,10 +23,16 @@
font-size: 20px;
line-height: 32px;
margin-bottom: 0;
color: black;
span {
color: #52B709;
}
&:hover {
color: black;
text-decoration: none;
}
}
&__logout {

19
src/components/ReportForm/ReportForm.js
View File

@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react'
import {useSelector} from 'react-redux'
import {Link, Navigate, useNavigate} from 'react-router-dom'
import DatePicker, { registerLocale } from "react-datepicker"
import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper'
import {getCorrectDate, getCreatedDate, hourOfNum} from '../Calendar/calendarHelper'
import ru from "date-fns/locale/ru"
registerLocale("ru", ru);
@ -67,10 +67,12 @@ const ReportForm = () => {
};
const handler = () => {
if(!inputs[0].task || !inputs[0].hours_spent) {
setReportSuccess('Заполните задачи');
setTimeout(() => setReportSuccess(''), 1000)
return
for (let input of inputs) {
if(!input.task || !input.hours_spent) {
setReportSuccess('Заполните задачи');
setTimeout(() => setReportSuccess(''), 2000)
return
}
}
apiRequest('/reports/create', {
method: 'POST',
@ -158,7 +160,8 @@ const ReportForm = () => {
{index + 1}.
</div>
<div className='report-form__task-input report-form__task-input--description'>
<input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
<input value={inputs[index].task} className={!input.task && reportSuccess === 'Заполните задачи' ? 'checkTask' : ''} name='text' type='text'
onChange={e => setInputs(inputs.map((input, inputIndex) => {
return index === inputIndex
? {
...input,
@ -168,7 +171,7 @@ const ReportForm = () => {
}))}/>
</div>
<div className='report-form__task-input report-form__task-input--hours'>
<input name='number' type='number' min='1'
<input value={inputs[index].hours_spent} className={!input.hours_spent && reportSuccess === 'Заполните задачи' ? 'checkTask' : ''} name='number' type='number' min='1'
onChange={e => setInputs(inputs.map((input, inputIndex) => {
return index === inputIndex
? {
@ -217,7 +220,7 @@ const ReportForm = () => {
{isFetching ? <Loader/> : 'Отправить'}
</button>
<p className='report-form__footer-text'>
Всего за день : <span>{totalHours} часов</span>
Всего за день : <span>{totalHours} {hourOfNum(totalHours)}</span>
</p>
{reportSuccess &&
<p className={`report-form__footer-done ${reportSuccess === 'Заполните задачи' ? 'errorText' : ''}`}>{reportSuccess}</p>

23
src/components/ReportForm/reportForm.scss
View File

@ -151,8 +151,7 @@
p {
font-family: 'GT Eesti Pro Display';
font-size: 1.3em;
font-weight: 100;
font-size: 1.5em;
font-style: normal;
letter-spacing: normal;
line-height: normal;
@ -168,10 +167,10 @@
//}
&--hours {
margin-left: 330px;
margin-left: 310px;
@media (max-width: 810px) {
margin-left: 125px;
margin-left: 100px;
}
@media (max-width: 610px) {
@ -202,6 +201,11 @@
margin-left: 20px;
&--description {
.checkTask {
border-color: #fc0000;
}
input {
width: 460px;
height: 42px;
@ -225,6 +229,14 @@
}
&--hours {
@media (max-width: 610px) {
margin-left: 45px;
}
.checkTask {
border-color: #fc0000;
}
input {
width: 141px;
height: 42px;
@ -257,8 +269,7 @@
span {
font-family: 'GT Eesti Pro Display';
font-size: 1.3em;
font-weight: 100;
font-size: 1.5em;
font-style: normal;
letter-spacing: normal;
line-height: normal;