From d81110d7d5f7059764507ea836c356ae651c3b58 Mon Sep 17 00:00:00 2001 From: M1kola Date: Mon, 26 Dec 2022 15:12:01 +0300 Subject: [PATCH] change profile --- src/App.js | 4 + src/components/Auth/AuthForDevelopers.js | 2 +- .../Calendar/calendarComponent.scss | 10 +- src/components/Calendar/calendarHelper.js | 12 +- src/components/Profile/ProfileHeader.js | 11 ++ src/components/Profile/profile.scss | 98 ++++++++++++++++ .../ProfileCalendar/ProfileCalendar.js | 89 ++++++++++++++ .../ProfileCalendarComponent.js | 109 ++++++++++++++++++ .../ProfileCalendar/profileCalendar.scss | 20 ++++ src/components/ReportForm/ReportForm.js | 37 +++--- src/components/ReportForm/reportForm.scss | 7 +- src/pages/Profile.js | 71 ++++++++++++ src/pages/ProfileCalendarPage.js | 9 ++ src/redux/outstaffingSlice.js | 14 ++- src/redux/reportSlice.js | 8 +- 15 files changed, 478 insertions(+), 23 deletions(-) create mode 100644 src/components/Profile/ProfileHeader.js create mode 100644 src/components/Profile/profile.scss create mode 100644 src/components/ProfileCalendar/ProfileCalendar.js create mode 100644 src/components/ProfileCalendar/ProfileCalendarComponent.js create mode 100644 src/components/ProfileCalendar/profileCalendar.scss create mode 100644 src/pages/Profile.js create mode 100644 src/pages/ProfileCalendarPage.js diff --git a/src/App.js b/src/App.js index 16fa012c..3849ec25 100644 --- a/src/App.js +++ b/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 = () => { /> + { path='/quiz-instruction' component={InstructionPage} /> +
Page not found
} /> diff --git a/src/components/Auth/AuthForDevelopers.js b/src/components/Auth/AuthForDevelopers.js index 79ee5a04..ec6bfef6 100644 --- a/src/components/Auth/AuthForDevelopers.js +++ b/src/components/Auth/AuthForDevelopers.js @@ -19,7 +19,7 @@ const AuthForDevelopers = () => { const isAuth = useSelector(selectAuth) if (isAuth) { - return + return } return ( diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index 3bd1a297..dd5dbf36 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/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; -} \ No newline at end of file +} diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js index a2367bb6..f0b6f81a 100644 --- a/src/components/Calendar/calendarHelper.js +++ b/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'); -} \ No newline at end of file +} diff --git a/src/components/Profile/ProfileHeader.js b/src/components/Profile/ProfileHeader.js new file mode 100644 index 00000000..b652078c --- /dev/null +++ b/src/components/Profile/ProfileHeader.js @@ -0,0 +1,11 @@ +import React from 'react'; +import {LogoutButton} from "../LogoutButton/LogoutButton"; + +export const ProfileHeader = () => { + return( +
+

Аутстаффинг Personal Profile

+ +
+ ) +} diff --git a/src/components/Profile/profile.scss b/src/components/Profile/profile.scss new file mode 100644 index 00000000..bac0c7fa --- /dev/null +++ b/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; + } +} diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js new file mode 100644 index 00000000..ae5899b3 --- /dev/null +++ b/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 ( +
+
+ +
Вернуться назад
+ +

+ Добрый день, {profileInfo.fio} +

+
+
+ img +

{}

+
+
+

{profileInfo.position_name}

+ img +
+
+ + + +
+
+
+ +
+
+ +

+ {month} : {totalHours} часов +

+
+
+
+
+ ) +}; diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js new file mode 100644 index 00000000..b34fb4de --- /dev/null +++ b/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 ( +
+
+

Мои отчеты

+ {/*
*/} + {/* */} + {/* setValue(prevMonth())}>{prevMonth().format('MMMM')}*/} + {/*
*/} + {/*
*/} + {/* */} + {/* setValue(nextMonth())}>{nextMonth().format('MMMM')}*/} + {/*
*/} +
+ +
+ +
+ +
+
+

Пн

+

Вт

+

Ср

+

Чт

+

Пт

+

Сб

+

Вс

+
+ +
+ {calendar.map((week) => + week.map((day) => ( + + + + )) + )} +
+
+
+ ) +} + diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss new file mode 100644 index 00000000..f769cbb7 --- /dev/null +++ b/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; + } +} diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index f2d4ae65..b8653c9c 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/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 (
-
+
+ +
Вернуться назад
+

Добавить отчет

@@ -61,7 +69,8 @@ const ReportForm = () => { src={calendarIcon} alt='' /> - {currentMonthAndDayReportPage()} + {/*{currentMonthAndDayReportPage()}*/} + {reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
@@ -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)) diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index 68f85c02..eb3449d4 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/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; diff --git a/src/pages/Profile.js b/src/pages/Profile.js new file mode 100644 index 00000000..31fd3a39 --- /dev/null +++ b/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( +
+
+ +
+
+

{profileInfo.position_name} {profileInfo.specification}

+ + {profileInfo.fio} +

Опыт работы: {profileInfo.years_of_exp}года

+
+
+
+
+
+ Vuetifyis.com +
Forked from peluprvi/vuetifyjs.com
Vuetifyjs.com + documentation +
+
Angular
+
+
+
+
+ Vuetifyis.com +
Forked from peluprvi/vuetifyjs.com
Vuetifyjs.com + documentation +
+
Angular
+
+
+
+
+ Vuetifyis.com +
Forked from peluprvi/vuetifyjs.com
Vuetifyjs.com + documentation +
+
Laravel
+
+
+
+ + + +
+
+
+
+ ) +} + diff --git a/src/pages/ProfileCalendarPage.js b/src/pages/ProfileCalendarPage.js new file mode 100644 index 00000000..b1095be0 --- /dev/null +++ b/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 ; +}; + +export default ProfileCalendarPage; diff --git a/src/redux/outstaffingSlice.js b/src/redux/outstaffingSlice.js index 304ad4ca..f48d9711 100644 --- a/src/redux/outstaffingSlice.js +++ b/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; diff --git a/src/redux/reportSlice.js b/src/redux/reportSlice.js index 9146e9dc..840001f6 100644 --- a/src/redux/reportSlice.js +++ b/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;