change profile

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