change profile

src/App.js

@@ -11,6 +11,7 @@ import HomePage from './pages/HomePage'
 import CandidatePage from './pages/CandidatePage'
 import CalendarPage from './pages/CalendarPage'
 import ReportPage from './pages/ReportFormPage.js'
+import ProfileCalendarPage from './pages/ProfileCalendarPage.js'
 import FormPage from './pages/FormPage.js'
 import SingleReportPage from './pages/SingleReportPage'
 import { QuizPage } from './pages/quiz/QuizPage'
@@ -18,6 +19,7 @@ import { InterjacentPage } from './pages/quiz/InterjacentPage'
 import { QuizTestPage } from './pages/quiz/QuizTestPage'
 import { InstructionPage } from './pages/quiz/InstructionPage'
 import { ResultPage } from './pages/quiz/ResultPage'
+import { Profile } from './pages/Profile.js'
 
 const App = () => {
   return (
@@ -45,6 +47,7 @@ const App = () => {
           />
           <ProtectedRoute exact path='/report' component={ReportPage} />
           <ProtectedRoute path='/report/:id' component={SingleReportPage} />
+          <ProtectedRoute path='/ProfileCalendar' component={ProfileCalendarPage} />
           <ProtectedRoute path='/quiz' component={QuizPage} />
           <ProtectedRoute
             path='/quiz-interjacent'
@@ -55,6 +58,7 @@ const App = () => {
             path='/quiz-instruction'
             component={InstructionPage}
           />
+          <ProtectedRoute path='/profile' component={Profile} />
           <ProtectedRoute path='/quiz-result' component={ResultPage} />
           <ProtectedRoute component={() => <div>Page not found</div>} />
         </Switch>

src/components/Auth/AuthForDevelopers.js

@@ -19,7 +19,7 @@ const AuthForDevelopers = () => {
   const isAuth = useSelector(selectAuth)
 
   if (isAuth) {
-    return <Redirect to='/report' />
+    return <Redirect to='/profile' />
   }
 
   return (

src/components/Calendar/calendarComponent.scss

@@ -57,7 +57,7 @@
   &__body {
     div {
       display: grid;
-      
+
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
       p {
@@ -250,7 +250,11 @@
 }
 
 .before {
-  background-color: #f0f7e0 !important;
+  background-color: #e5f9b6 !important;
+}
+
+.pass {
+  background-color: #f7d7c9 !important;
 }
 
 .today {
@@ -260,4 +264,4 @@
 
 .selected {
   background-color: #f9f9c3 !important;
-}
+}

src/components/Calendar/calendarHelper.js

@@ -20,6 +20,16 @@ export function calendarHelper(value) {
   return calendar;
 }
 
+export function getReports(value) {
+  const startDay = value.clone().startOf('month').startOf('week').startOf('day');
+  const reportsStart = `${new Date(startDay).getFullYear()}-${new Date(startDay).getMonth() + 1}-${new Date(startDay).getDate()}`
+  const endDay = value.clone().endOf('month').endOf('week');
+  const reportsEnd = `${new Date(endDay).getFullYear()}-${new Date(endDay).getMonth() + 1}-${new Date(endDay).getDate()}`
+  const getReports = `fromDate=${reportsStart}&toDate=${reportsEnd}`
+
+  return getReports;
+}
+
 export function currentMonth() {
   const currentMonth = moment().format('MMMM');
 
@@ -32,4 +42,4 @@ export function currentMonthAndDay(day) {
 
 export function currentMonthAndDayReportPage() {
   return moment().format('D MMMM');
-}
+}

src/components/Profile/ProfileHeader.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {LogoutButton} from "../LogoutButton/LogoutButton";
+
+export const ProfileHeader = () => {
+    return(
+        <header className='profileHeader'>
+            <h2 className='profileHeader__title'>Аутстаффинг <span>Personal Profile</span></h2>
+            <LogoutButton/>
+        </header>
+    )
+}

src/components/Profile/profile.scss

@@ -0,0 +1,98 @@
+.profile {
+
+  &__container {
+    max-width: 1140px;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &Header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 60px;
+
+    &__title {
+      text-align: center;
+      font-family: "GT Eesti Pro Display", sans-serif;
+      font-size: 5em;
+      font-weight: 700;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: 77.81px;
+
+      span {
+        color: #52b709;
+      }
+    }
+
+    .logout-button {
+      top: auto;
+    }
+  }
+
+  &__content {
+    display: flex;
+    margin-top: 20px;
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-left: 45px;
+    }
+  }
+
+  &__sideBar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    border: 2px solid whitesmoke;
+    max-width: 34%;
+    row-gap: 12px;
+
+    &__position {
+      font-size: 3rem;
+      font-family: "GT Eesti Pro Display", sans-serif;
+      font-weight: 700;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: 36px;
+      text-align: center;
+    }
+
+    &__experience {
+      font-family: "GT Eesti Pro Display", sans-serif;
+      font-size: 18px;
+      font-weight: normal;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: 36px;
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+
+      span {
+        font-size: 30px;
+        font-weight: 700;
+        text-align: center;
+      }
+    }
+
+    &-name {
+      font-size: 30px;
+      font-weight: 700;
+      text-align: center;
+    }
+  }
+
+  &__avatar {
+    width: 180px;
+    height: 180px;
+    border-radius: 100px;
+  }
+}

src/components/ProfileCalendar/ProfileCalendar.js

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

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -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>
+    )
+}
+

src/components/ProfileCalendar/profileCalendar.scss

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

src/components/ReportForm/ReportForm.js

@@ -1,30 +1,35 @@
 import React, { useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { fetchPost } from '../../server/server'
-import { useHistory, useParams, Redirect } from 'react-router-dom'
+import {useHistory, useParams, Redirect, Link} from 'react-router-dom'
 import { Loader } from '../Loader/Loader'
-import { auth } from '../../redux/outstaffingSlice'
+import {auth} from '../../redux/outstaffingSlice'
+import { getReportDate } from '../../redux/reportSlice'
 import { getRole } from '../../redux/roleSlice'
 import calendarIcon from '../../images/calendar_icon.png'
 import ellipse from '../../images/ellipse.png'
 import remove from '../../images/remove.png'
 import addIcon from '../../images/addIcon.png'
-import { currentMonthAndDayReportPage } from '../Calendar/calendarHelper'
+import { currentMonthAndDay, getReports } from '../Calendar/calendarHelper'
-
 import './reportForm.scss'
+import arrow from "../../images/right-arrow.png";
 
-const getCreatedDate = () => {
+const getCreatedDate = (day) => {
-  const date = new Date();
+  if (day) {
-  const dd = String(date.getDate()).padStart(2, '0')
+    return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
-  const mm = String(date.getMonth() + 1).padStart(2, '0')
+  } else {
-  const yyyy = date.getFullYear()
+    const date = new Date();
-
+    const dd = String(date.getDate()).padStart(2, '0')
-  return `${yyyy}-${mm}-${dd}`
+    const mm = String(date.getMonth() + 1).padStart(2, '0')
+    const yyyy = date.getFullYear()
+    return `${yyyy}-${mm}-${dd}`
+  }
 }
 
 const ReportForm = () => {
   const dispatch = useDispatch()
   const history = useHistory()
+  const reportDate = useSelector(getReportDate)
   const role = useSelector(getRole)
 
   const [isFetching, setIsFetching] = useState(false)
@@ -49,7 +54,10 @@ const ReportForm = () => {
   return (
     <section className='report-form'>
       <div className='row'>
-        <div className='col-xl-12'>
+        <div className='col-xl-12 report__head'>
+          <Link className='calendar__back' to={`/ProfileCalendar`}>
+            <div><img src={arrow} alt=''/>Вернуться назад</div>
+          </Link>
           <div className='report-form__block'>
             <div className='report-form__block-title'>
               <h2>Добавить отчет</h2>
@@ -61,7 +69,8 @@ const ReportForm = () => {
                 src={calendarIcon}
                 alt=''
               />
-              {currentMonthAndDayReportPage()}
+              {/*{currentMonthAndDayReportPage()}*/}
+              {reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
             </div>
             <div className='report-form__task-list'>
               <img src={ellipse} alt='' />
@@ -149,7 +158,7 @@ const ReportForm = () => {
                   tasks: inputs,
                   difficulties: troublesInputValue,
                   tomorrow: scheduledInputValue,
-                  created_at: getCreatedDate(),
+                  created_at: getCreatedDate(reportDate),
                   status: 1,
                 },
                 logout: () => dispatch(auth(false))

src/components/ReportForm/reportForm.scss

@@ -1,6 +1,11 @@
 .report-form {
+
+  .report__head {
+    margin-top: 20px;
+  }
+
   &__block-title {
-    margin-top: 76px;
+    margin-top: 15px;
 
     h2 {
       color: #282828;

src/pages/Profile.js

@@ -0,0 +1,71 @@
+import React, {useEffect, useState} from 'react';
+import { ProfileHeader } from "../components/Profile/ProfileHeader";
+import { setProfileInfo, getProfileInfo } from "../redux/outstaffingSlice";
+import {useDispatch, useSelector} from "react-redux";
+import { fetchGet } from '../../src/server/server'
+import {Link} from "react-router-dom";
+
+import './../components/Profile/profile.scss'
+export const Profile = () => {
+    const dispatch = useDispatch();
+    const profileInfo = useSelector(getProfileInfo)
+    useEffect(() => {
+        fetchGet({
+            link: `${process.env.REACT_APP_API_URL}/api/profile/get-main-data?user_id=${localStorage.getItem('id')}`,
+        }).then((profileInfo) => {
+            dispatch(setProfileInfo(profileInfo))
+        })
+    }, [dispatch, localStorage.getItem('id')])
+    return(
+        <div className='profile'>
+            <div className='profile__container'>
+                <ProfileHeader/>
+                <div className='profile__content'>
+                    <div className='profile__sideBar'>
+                        <h2 className='profile__sideBar__position'>{profileInfo.position_name} {profileInfo.specification}</h2>
+                        <img className='profile__avatar' src={profileInfo.photo} />
+                        <span className='profile__sideBar-name'>{profileInfo.fio}</span>
+                        <p className='profile__sideBar__experience'>Опыт работы: <span>{profileInfo.years_of_exp}года</span></p>
+                    </div>
+                    <div className='profile__content__info'>
+                        <div className="works__body">
+                            <div className="works__item item-works">
+                                <div className="item-works__body">
+                                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
+                                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
+                                        documentation
+                                    </div>
+                                    <div className="item-works__mark">Angular</div>
+                                </div>
+                            </div>
+                            <div className="works__item item-works">
+                                <div className="item-works__body">
+                                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
+                                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
+                                        documentation
+                                    </div>
+                                    <div className="item-works__mark">Angular</div>
+                                </div>
+                            </div>
+                            <div className="works__item item-works">
+                                <div className="item-works__body">
+                                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
+                                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
+                                        documentation
+                                    </div>
+                                    <div className="item-works__mark item-works__mark_yellow">Laravel</div>
+                                </div>
+                            </div>
+                        </div>
+                        <Link to={`/ProfileCalendar`}>
+                            <button className='candidate-sidebar__select'>
+                                Отчёты
+                            </button>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+

src/pages/ProfileCalendarPage.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WithLogout } from '../hoc/withLogout';
+import { ProfileCalendar } from '../../src/components/ProfileCalendar/ProfileCalendar';
+
+const ProfileCalendarPage = () => {
+    return <WithLogout><ProfileCalendar/></WithLogout>;
+};
+
+export default ProfileCalendarPage;

src/redux/outstaffingSlice.js

@@ -8,6 +8,8 @@ const initialState = {
   currentCandidate: {},
   auth: false,
   positionId: null,
+  profileInfo: {},
+  reportsDates: ''
 };
 
 export const outstaffingSlice = createSlice({
@@ -37,11 +39,17 @@ export const outstaffingSlice = createSlice({
     },
     setUserInfo: (state, action) => {
       state.userInfo = action.payload;
-    }
+    },
+    setProfileInfo: (state, action) => {
+      state.profileInfo = action.payload;
+    },
+    setReportsDates: (state, action) => {
+      state.reportsDates = action.payload;
+    },
   },
 });
 
-export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId, setUserInfo } = outstaffingSlice.actions;
+export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId, setUserInfo, setProfileInfo, setReportsDates } = outstaffingSlice.actions;
 
 export const selectProfiles = (state) => state.outstaffing.profiles;
 export const selectTags = (state) => state.outstaffing.tags;
@@ -50,6 +58,8 @@ export const selectItems = (state) => state.outstaffing.selectedItems;
 export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate;
 export const selectAuth = (state) => state.outstaffing.auth;
 export const getPositionId = (state) => state.outstaffing.positionId;
+export const getProfileInfo = (state) => state.outstaffing.profileInfo;
 export const selectUserInfo = (state) => state.outstaffing.userInfo;
+export const getReportsDates = (state) => state.outstaffing.reportsDates;
 
 export default outstaffingSlice.reducer;

src/redux/reportSlice.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
     dateSelected: '',
+    reportDate: ''
 };
 
 export const reportSlice = createSlice({
@@ -11,11 +12,16 @@ export const reportSlice = createSlice({
     dateSelected: (state, action) => {
       state.dateSelected = action.payload;
     },
+    setReportDate: (state, action) => {
+      state.reportDate = action.payload;
+    },
   },
 });
 
-export const { dateSelected, } = reportSlice.actions;
+export const { dateSelected, setReportDate} = reportSlice.actions;
 
 export const selectDate = (state) => state.report.dateSelected;
 
+export const getReportDate = (state) => state.report.reportDate;
+
 export default reportSlice.reducer;