Merge pull request #54 from apuc/partner-personal-area

Partner personal area

src/components/Calendar/calendarComponent.scss

@@ -11,6 +11,49 @@
 
   &__header {
     display: flex;
+    justify-content: space-between;
+
+    @media (max-width: 560px) {
+      flex-direction: column;
+      row-gap: 15px;
+    }
+
+    &-info {
+      display: flex;
+
+      @media (max-width: 685px) {
+        font-size: 7px;
+      }
+
+      @media (max-width: 560px) {
+        font-size: 10px;
+      }
+
+      @media (max-width: 560px) {
+        justify-content: center;
+      }
+
+      .calendar__hours {
+        margin: 0 10px;
+        line-height: 0;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &-switcher {
+      display: flex;
+
+      @media (max-width: 590px) {
+        font-size: 8px;
+      }
+
+      @media (max-width: 560px) {
+        justify-content: center;
+        font-size: 12px;
+      }
+    }
 
     h3 {
 
@@ -20,6 +63,7 @@
       letter-spacing: normal;
       line-height: 30px;
       text-align: left;
+      margin-bottom: 0;
 
       @media (max-width: 500px) {
         font-size: 1.7em;
@@ -58,6 +102,10 @@
           font-size: 1.2em;
         }
       }
+
+      @media (max-width: 560px) {
+        margin-left: 0 !important;
+      }
     }
   }
 
@@ -183,6 +231,12 @@
   }
 }
 
+@media (max-width: 560px) {
+  .calendar-component {
+    padding-top: 10px;
+  }
+}
+
 //@media (max-width: 768px) {
 //  .calendar-component__form > button {
 //    width: 70px;

src/components/Calendar/calendarHelper.js

@@ -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]];
+}

src/components/ProfileCalendar/ProfileCalendar.js

@@ -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>

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -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-info'>
-                <div className='calendar-component__header-box' onClick={() => {
+                    <h3>Мои отчеты:</h3>
-                    setValueHandler(prevMonth())
+                    <p className='calendar__hours'>
-                    dispatch(setRequestDate(getReports(prevMonth())))
+                        {month} - <span> {totalHours} {hourOfNum(totalHours)} </span>
-                }}>
+                    </p>
-                    <img src={arrow} alt='' />
-                    <span>
-                        {prevMonth().format('MMMM')}
-                    </span>
                 </div>
-                <div className='calendar-component__header-box'>
+                <div className='calendar-component__header-switcher'>
-                    <span>{value.format('YYYY')}</span>
+                    <div className='calendar-component__header-box' onClick={() => {
-                </div>
+                        setValueHandler(prevMonth())
-                <div className='calendar-component__header-box' onClick={() => {
+                        dispatch(setRequestDate(getReports(prevMonth())))
-                    setValueHandler(nextMonth())
+                    }}>
-                    dispatch(setRequestDate(getReports(nextMonth())))
+                        <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>
+                        <span>
-                        {nextMonth().format('MMMM')}
+                            {nextMonth().format('MMMM')}
-                    </span>
+                        </span>
-                    <img src={arrow} alt='' />
+                        <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>
     )
 })

src/components/ProfileCalendar/profileCalendar.scss

@@ -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;

src/components/ProfileHeader/ProfileHeader.js

@@ -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>

src/components/ProfileHeader/profileHeader.scss

@@ -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 {

src/components/ReportForm/ReportForm.js

@@ -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) {
+    for (let input of inputs) {
-      setReportSuccess('Заполните задачи');
+      if(!input.task || !input.hours_spent) {
-      setTimeout(() => setReportSuccess(''), 1000)
+        setReportSuccess('Заполните задачи');
-      return
+        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>

src/components/ReportForm/reportForm.scss

@@ -151,27 +151,29 @@
 
       p {
         font-family: 'GT Eesti Pro Display';
-        font-size: 1.3em;
+        font-size: 1.5em;
-        font-weight: 100;
         font-style: normal;
         letter-spacing: normal;
         line-height: normal;
         text-align: left;
         margin-bottom: 26px;
         white-space: nowrap;
+
+        @media (max-width: 450px) {
+          font-size: 13px;
+        }
       }
     }
 
     &-title {
       //&--description {
-      //  margin-left: 20px;
       //}
 
       &--hours {
-        margin-left: 330px;
+        margin-left: 310px;
 
         @media (max-width: 810px) {
-          margin-left: 125px;
+          margin-left: 100px;
         }
 
         @media (max-width: 610px) {
@@ -202,6 +204,11 @@
       margin-left: 20px;
 
       &--description {
+
+        .checkTask {
+          border-color: #fc0000;
+        }
+
         input {
           width: 460px;
           height: 42px;
@@ -225,6 +232,18 @@
       }
 
       &--hours {
+        @media (max-width: 610px) {
+          margin-left: 45px;
+        }
+
+        @media (max-width: 450px) {
+          margin-left: 22px;
+        }
+
+        .checkTask {
+          border-color: #fc0000;
+        }
+
         input {
           width: 141px;
           height: 42px;
@@ -257,8 +276,7 @@
 
     span {
       font-family: 'GT Eesti Pro Display';
-      font-size: 1.3em;
+      font-size: 1.5em;
-      font-weight: 100;
       font-style: normal;
       letter-spacing: normal;
       line-height: normal;

src/pages/Summary/Summary.js

@@ -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>

src/pages/Summary/summary.scss

@@ -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: 31px;
-    border-radius: 44px;
     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) {

src/pages/ViewReport/ViewReport.js

@@ -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>

src/pages/ViewReport/viewReport.scss

@@ -64,6 +64,11 @@
     height: 72px;
     justify-content: space-between;
 
+    @media (max-width: 540px) {
+      padding: 10px 15px;
+      height: 60px;
+    }
+
     @media (max-width: 500px) {
       column-gap: 0;
       justify-content: space-between;
@@ -75,18 +80,22 @@
       line-height: 32px;
       color: #000000;
 
-      @media (max-width: 500px) {
+      @media (max-width: 660px) {
         font-size: 16px;
       }
+
+      @media (max-width: 490px) {
+        font-size: 12px;
+      }
     }
 
     &__hours {
       font-weight: 400;
-      font-size: 12px;
+      font-size: 15px;
       line-height: 32px;
       color: #000000;
 
-      @media (max-width: 500px) {
+      @media (max-width: 660px) {
         font-size: 11px;
       }