apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change profile

Browse Source
This commit is contained in:
Николай Полтщук 2022-12-26 15:12:01 +03:00
parent f452e8b4b5
commit d81110d7d5
15 changed files with 478 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

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

2
src/components/Auth/AuthForDevelopers.js
View File

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

10
src/components/Calendar/calendarComponent.scss
View File

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

12
src/components/Calendar/calendarHelper.js
View File

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

11
src/components/Profile/ProfileHeader.js Normal file
View 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
View 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
View 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
View 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
View 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;
}
}

37
src/components/ReportForm/ReportForm.js
View File

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

7
src/components/ReportForm/reportForm.scss
View File

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

71
src/pages/Profile.js Normal file
View 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
View 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;

14
src/redux/outstaffingSlice.js
View File

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

8
src/redux/reportSlice.js
View File

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