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
Show Stats 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;

6
src/pages/Summary/Summary.js
View File

@ -60,7 +60,7 @@ export const Summary = () => {
<div className='skills__section__items'>
<div className='skills__section__items__wrapper'>
{profileInfo.skillValues && profileInfo.skillValues.map((skill) =>
<span key={skill.id} className='skill_item'>{skill.skill.name}</span>
<span key={skill.id} className='skill_item'>{skill.skill.name},</span>
)}
</div>
</div>
@ -86,7 +86,7 @@ export const Summary = () => {
</div>
<div className='summary__sectionGitItems'>
{Boolean(gitInfo.length) && gitInfo.map((itemGit) => {
return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
return <a href={itemGit.link} target="_blank" rel="noreferrer" key={itemGit.id} className='summary__sectionGitItem gitItem'>
<div className='gitItem__info'>
<div className='gitItem__info__about'>
<img src={gitImgItem} alt='gitImg'/>
@ -103,7 +103,7 @@ export const Summary = () => {
<a className='gitItem__link' href={itemGit.link} target="_blank" rel="noreferrer">
<img src={rightArrow} alt='arrowRight'/>
</a>
</div>
</a>
})
}
</div>

13
src/pages/Summary/summary.scss
View File

@ -51,7 +51,7 @@
margin-top: 30px;
display: flex;
align-items: center;
padding: 0 130px 0 45px;
padding: 0 25px 0 45px;
justify-content: space-between;
@media (max-width: 930px) {
@ -150,16 +150,16 @@
}
&__git {
background: #52B709;
border-radius: 44px;
border-radius: 31px;
width: 177px;
height: 50px;
height: 62px;
font-weight: 500;
font-size: 16px;
font-size: 1.9em;
line-height: 32px;
color: white;
border: none;
transition: all 0.3s ease;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
@ -168,6 +168,7 @@
@media (max-width: 690px) {
width: 120px;
height: 50px;
}
}
@ -307,10 +308,12 @@
border-radius: 12px;
padding: 35px 30px 30px 45px;
transition: all 0.3s ease;
color: #000000;
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
}
@media (max-width: 825px) {

6
src/pages/ViewReport/ViewReport.js
View File

@ -12,7 +12,7 @@ import {Footer} from "../../components/Footer/Footer";
import arrow from "../../images/right-arrow.png";
import arrowSwitchDate from "../../images/arrowViewReport.png";
import {apiRequest} from "../../api/request";
import {getCorrectDate, getCreatedDate} from '../../components/Calendar/calendarHelper'
import {getCorrectDate, getCreatedDate, hourOfNum} from '../../components/Calendar/calendarHelper'
import './viewReport.scss'
@ -90,7 +90,7 @@ export const ViewReport = () => {
</Link>
<div className='viewReport__bar'>
<h3 className='viewReport__bar__date'>{getCorrectDate(reportDay)}</h3>
<p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} часов</span></p>
<p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} {hourOfNum(totalHours)}</span></p>
{/*<div className='viewReport__bar__progressBar'>*/}
{/* <span></span>*/}
{/*</div>*/}
@ -128,7 +128,7 @@ export const ViewReport = () => {
<td>
<div className='viewReport__done__hours__item'>
<span>{task.hours}</span>
<p className='hours'>часов на задачу</p>
<p className='hours'>{hourOfNum(task.hours)} на задачу</p>
</div>
</td>
</tr>

2
src/pages/ViewReport/viewReport.scss
View File

@ -82,7 +82,7 @@
&__hours {
font-weight: 400;
font-size: 12px;
font-size: 15px;
line-height: 32px;
color: #000000;