change profile
This commit is contained in:
parent
f452e8b4b5
commit
d81110d7d5
@ -11,6 +11,7 @@ import HomePage from './pages/HomePage'
|
|||||||
import CandidatePage from './pages/CandidatePage'
|
import CandidatePage from './pages/CandidatePage'
|
||||||
import CalendarPage from './pages/CalendarPage'
|
import CalendarPage from './pages/CalendarPage'
|
||||||
import ReportPage from './pages/ReportFormPage.js'
|
import ReportPage from './pages/ReportFormPage.js'
|
||||||
|
import ProfileCalendarPage from './pages/ProfileCalendarPage.js'
|
||||||
import FormPage from './pages/FormPage.js'
|
import FormPage from './pages/FormPage.js'
|
||||||
import SingleReportPage from './pages/SingleReportPage'
|
import SingleReportPage from './pages/SingleReportPage'
|
||||||
import { QuizPage } from './pages/quiz/QuizPage'
|
import { QuizPage } from './pages/quiz/QuizPage'
|
||||||
@ -18,6 +19,7 @@ import { InterjacentPage } from './pages/quiz/InterjacentPage'
|
|||||||
import { QuizTestPage } from './pages/quiz/QuizTestPage'
|
import { QuizTestPage } from './pages/quiz/QuizTestPage'
|
||||||
import { InstructionPage } from './pages/quiz/InstructionPage'
|
import { InstructionPage } from './pages/quiz/InstructionPage'
|
||||||
import { ResultPage } from './pages/quiz/ResultPage'
|
import { ResultPage } from './pages/quiz/ResultPage'
|
||||||
|
import { Profile } from './pages/Profile.js'
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
@ -45,6 +47,7 @@ const App = () => {
|
|||||||
/>
|
/>
|
||||||
<ProtectedRoute exact path='/report' component={ReportPage} />
|
<ProtectedRoute exact path='/report' component={ReportPage} />
|
||||||
<ProtectedRoute path='/report/:id' component={SingleReportPage} />
|
<ProtectedRoute path='/report/:id' component={SingleReportPage} />
|
||||||
|
<ProtectedRoute path='/ProfileCalendar' component={ProfileCalendarPage} />
|
||||||
<ProtectedRoute path='/quiz' component={QuizPage} />
|
<ProtectedRoute path='/quiz' component={QuizPage} />
|
||||||
<ProtectedRoute
|
<ProtectedRoute
|
||||||
path='/quiz-interjacent'
|
path='/quiz-interjacent'
|
||||||
@ -55,6 +58,7 @@ const App = () => {
|
|||||||
path='/quiz-instruction'
|
path='/quiz-instruction'
|
||||||
component={InstructionPage}
|
component={InstructionPage}
|
||||||
/>
|
/>
|
||||||
|
<ProtectedRoute path='/profile' component={Profile} />
|
||||||
<ProtectedRoute path='/quiz-result' component={ResultPage} />
|
<ProtectedRoute path='/quiz-result' component={ResultPage} />
|
||||||
<ProtectedRoute component={() => <div>Page not found</div>} />
|
<ProtectedRoute component={() => <div>Page not found</div>} />
|
||||||
</Switch>
|
</Switch>
|
||||||
|
@ -19,7 +19,7 @@ const AuthForDevelopers = () => {
|
|||||||
const isAuth = useSelector(selectAuth)
|
const isAuth = useSelector(selectAuth)
|
||||||
|
|
||||||
if (isAuth) {
|
if (isAuth) {
|
||||||
return <Redirect to='/report' />
|
return <Redirect to='/profile' />
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -250,7 +250,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.before {
|
.before {
|
||||||
background-color: #f0f7e0 !important;
|
background-color: #e5f9b6 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pass {
|
||||||
|
background-color: #f7d7c9 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.today {
|
.today {
|
||||||
|
@ -20,6 +20,16 @@ export function calendarHelper(value) {
|
|||||||
return calendar;
|
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() {
|
export function currentMonth() {
|
||||||
const currentMonth = moment().format('MMMM');
|
const currentMonth = moment().format('MMMM');
|
||||||
|
|
||||||
|
11
src/components/Profile/ProfileHeader.js
Normal file
11
src/components/Profile/ProfileHeader.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
98
src/components/Profile/profile.scss
Normal file
98
src/components/Profile/profile.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
89
src/components/ProfileCalendar/ProfileCalendar.js
Normal file
89
src/components/ProfileCalendar/ProfileCalendar.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
};
|
109
src/components/ProfileCalendar/ProfileCalendarComponent.js
Normal file
109
src/components/ProfileCalendar/ProfileCalendarComponent.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
20
src/components/ProfileCalendar/profileCalendar.scss
Normal file
20
src/components/ProfileCalendar/profileCalendar.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -1,30 +1,35 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
import { useSelector, useDispatch } from 'react-redux'
|
||||||
import { fetchPost } from '../../server/server'
|
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 { 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 { getRole } from '../../redux/roleSlice'
|
||||||
import calendarIcon from '../../images/calendar_icon.png'
|
import calendarIcon from '../../images/calendar_icon.png'
|
||||||
import ellipse from '../../images/ellipse.png'
|
import ellipse from '../../images/ellipse.png'
|
||||||
import remove from '../../images/remove.png'
|
import remove from '../../images/remove.png'
|
||||||
import addIcon from '../../images/addIcon.png'
|
import addIcon from '../../images/addIcon.png'
|
||||||
import { currentMonthAndDayReportPage } from '../Calendar/calendarHelper'
|
import { currentMonthAndDay, getReports } from '../Calendar/calendarHelper'
|
||||||
|
|
||||||
import './reportForm.scss'
|
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 ReportForm = () => {
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
const history = useHistory()
|
const history = useHistory()
|
||||||
|
const reportDate = useSelector(getReportDate)
|
||||||
const role = useSelector(getRole)
|
const role = useSelector(getRole)
|
||||||
|
|
||||||
const [isFetching, setIsFetching] = useState(false)
|
const [isFetching, setIsFetching] = useState(false)
|
||||||
@ -49,7 +54,10 @@ const ReportForm = () => {
|
|||||||
return (
|
return (
|
||||||
<section className='report-form'>
|
<section className='report-form'>
|
||||||
<div className='row'>
|
<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'>
|
||||||
<div className='report-form__block-title'>
|
<div className='report-form__block-title'>
|
||||||
<h2>Добавить отчет</h2>
|
<h2>Добавить отчет</h2>
|
||||||
@ -61,7 +69,8 @@ const ReportForm = () => {
|
|||||||
src={calendarIcon}
|
src={calendarIcon}
|
||||||
alt=''
|
alt=''
|
||||||
/>
|
/>
|
||||||
{currentMonthAndDayReportPage()}
|
{/*{currentMonthAndDayReportPage()}*/}
|
||||||
|
{reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
|
||||||
</div>
|
</div>
|
||||||
<div className='report-form__task-list'>
|
<div className='report-form__task-list'>
|
||||||
<img src={ellipse} alt='' />
|
<img src={ellipse} alt='' />
|
||||||
@ -149,7 +158,7 @@ const ReportForm = () => {
|
|||||||
tasks: inputs,
|
tasks: inputs,
|
||||||
difficulties: troublesInputValue,
|
difficulties: troublesInputValue,
|
||||||
tomorrow: scheduledInputValue,
|
tomorrow: scheduledInputValue,
|
||||||
created_at: getCreatedDate(),
|
created_at: getCreatedDate(reportDate),
|
||||||
status: 1,
|
status: 1,
|
||||||
},
|
},
|
||||||
logout: () => dispatch(auth(false))
|
logout: () => dispatch(auth(false))
|
||||||
|
@ -1,6 +1,11 @@
|
|||||||
.report-form {
|
.report-form {
|
||||||
|
|
||||||
|
.report__head {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
&__block-title {
|
&__block-title {
|
||||||
margin-top: 76px;
|
margin-top: 15px;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #282828;
|
color: #282828;
|
||||||
|
71
src/pages/Profile.js
Normal file
71
src/pages/Profile.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
9
src/pages/ProfileCalendarPage.js
Normal file
9
src/pages/ProfileCalendarPage.js
Normal file
@ -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;
|
@ -8,6 +8,8 @@ const initialState = {
|
|||||||
currentCandidate: {},
|
currentCandidate: {},
|
||||||
auth: false,
|
auth: false,
|
||||||
positionId: null,
|
positionId: null,
|
||||||
|
profileInfo: {},
|
||||||
|
reportsDates: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
export const outstaffingSlice = createSlice({
|
export const outstaffingSlice = createSlice({
|
||||||
@ -37,11 +39,17 @@ export const outstaffingSlice = createSlice({
|
|||||||
},
|
},
|
||||||
setUserInfo: (state, action) => {
|
setUserInfo: (state, action) => {
|
||||||
state.userInfo = action.payload;
|
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 selectProfiles = (state) => state.outstaffing.profiles;
|
||||||
export const selectTags = (state) => state.outstaffing.tags;
|
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 selectCurrentCandidate = (state) => state.outstaffing.currentCandidate;
|
||||||
export const selectAuth = (state) => state.outstaffing.auth;
|
export const selectAuth = (state) => state.outstaffing.auth;
|
||||||
export const getPositionId = (state) => state.outstaffing.positionId;
|
export const getPositionId = (state) => state.outstaffing.positionId;
|
||||||
|
export const getProfileInfo = (state) => state.outstaffing.profileInfo;
|
||||||
export const selectUserInfo = (state) => state.outstaffing.userInfo;
|
export const selectUserInfo = (state) => state.outstaffing.userInfo;
|
||||||
|
export const getReportsDates = (state) => state.outstaffing.reportsDates;
|
||||||
|
|
||||||
export default outstaffingSlice.reducer;
|
export default outstaffingSlice.reducer;
|
||||||
|
@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
|
|||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
dateSelected: '',
|
dateSelected: '',
|
||||||
|
reportDate: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
export const reportSlice = createSlice({
|
export const reportSlice = createSlice({
|
||||||
@ -11,11 +12,16 @@ export const reportSlice = createSlice({
|
|||||||
dateSelected: (state, action) => {
|
dateSelected: (state, action) => {
|
||||||
state.dateSelected = action.payload;
|
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 selectDate = (state) => state.report.dateSelected;
|
||||||
|
|
||||||
|
export const getReportDate = (state) => state.report.reportDate;
|
||||||
|
|
||||||
export default reportSlice.reducer;
|
export default reportSlice.reducer;
|
||||||
|
Loading…
Reference in New Issue
Block a user