From a2e768e5c010ef93e7f25482b9b0f96cd8ba7ddd Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 9 Feb 2023 20:46:02 +0300 Subject: [PATCH 1/3] change calendar month --- .../ProfileCalendar/ProfileCalendar.js | 17 ++++-- .../ProfileCalendarComponent.js | 61 +++++++++++-------- src/redux/reportSlice.js | 10 ++- 3 files changed, 55 insertions(+), 33 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index dd40b413..1c7d6968 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -14,23 +14,28 @@ import {urlForLocal} from "../../helper"; import {apiRequest} from "../../api/request"; import { getProfileInfo } from '../../redux/outstaffingSlice' -import {setReportDate} from "../../redux/reportSlice"; +import {getRequestDates, setReportDate, setRequestDate} from "../../redux/reportSlice"; +import 'moment/locale/ru' import './profileCalendar.scss' export const ProfileCalendar = () => { const dispatch = useDispatch(); - const profileInfo = useSelector(getProfileInfo); + const profileInfo = useSelector(getProfileInfo) + const requestDates = useSelector(getRequestDates) const [month, setMonth] = useState(''); + const [value, setValue] = useState(moment()) const [reports, setReports] = useState([]); const [totalHours, setTotalHours] = useState(0); - const [requestDates, setRequestDates] = useState(''); - const [loader, setLoader] = useState(false) + const [loader, setLoader] = useState(true) + function setValueHandler (value) { + setValue(value) + } useEffect(() => { - setRequestDates(getReports(moment())) + dispatch(setRequestDate(getReports(moment()))) },[]); useEffect( () => { @@ -79,7 +84,7 @@ export const ProfileCalendar = () => { :
- +

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

diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js index 2c574863..92584f90 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.js +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js @@ -1,19 +1,19 @@ import React, { useState, useEffect } from 'react' -// import ellipse from '../../images/ellipse.png' +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 {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper' +import {setReportDate, setRequestDate} from '../../redux/reportSlice'; import {useDispatch} from "react-redux"; import {Link} from "react-router-dom"; +import 'moment/locale/ru' import './../Calendar/calendarComponent.scss' -export const ProfileCalendarComponent = ({reportsDates}) => { +export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports}) => { const dispatch = useDispatch(); - const [value, setValue] = useState(moment()) + const [currentDay] = useState(moment()) const [calendar, setCalendar] = useState([]) useEffect(() => { @@ -35,8 +35,8 @@ export const ProfileCalendarComponent = ({reportsDates}) => { } function dayStyles(day) { - if (value < day) return `block` - for (const date of reportsDates) { + if (currentDay < day) return `block` + for (const date of reports) { if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) { return `before` } @@ -47,7 +47,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => { } function correctRoute(day) { - for (const date of reportsDates) { + for (const date of reports) { if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) { return `../view` } @@ -55,26 +55,37 @@ export const ProfileCalendarComponent = ({reportsDates}) => { return '../../report' } - // function prevMonth() { - // return value.clone().subtract(1, 'month') - // } - // - // function nextMonth() { - // return value.clone().add(1, 'month'); - // } + 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')}*/} - {/*
*/} +
+ + { + setValueHandler(prevMonth()) + dispatch(setRequestDate(getReports(prevMonth()))) + }}> + {prevMonth().format('MMMM')} + +
+
+ + { + setValueHandler(nextMonth()) + dispatch(setRequestDate(getReports(nextMonth()))) + + }}> + {nextMonth().format('MMMM')} + +
@@ -115,5 +126,5 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
) -} +}) diff --git a/src/redux/reportSlice.js b/src/redux/reportSlice.js index 840001f6..15036e0d 100644 --- a/src/redux/reportSlice.js +++ b/src/redux/reportSlice.js @@ -2,7 +2,8 @@ import { createSlice } from '@reduxjs/toolkit'; const initialState = { dateSelected: '', - reportDate: '' + reportDate: '', + requestDates: '' }; export const reportSlice = createSlice({ @@ -15,13 +16,18 @@ export const reportSlice = createSlice({ setReportDate: (state, action) => { state.reportDate = action.payload; }, + setRequestDate: (state, action) => { + state.requestDates = action.payload + } }, }); -export const { dateSelected, setReportDate} = reportSlice.actions; +export const { dateSelected, setReportDate, setRequestDate} = reportSlice.actions; export const selectDate = (state) => state.report.dateSelected; export const getReportDate = (state) => state.report.reportDate; +export const getRequestDates = (state) => state.report.requestDates + export default reportSlice.reducer; From 6b5eeb294241905f2ef76525303415b4e7900ad2 Mon Sep 17 00:00:00 2001 From: M1kola Date: Fri, 17 Feb 2023 15:19:49 +0300 Subject: [PATCH 2/3] fixes --- src/App.js | 6 + src/components/Calendar/calendar.scss | 15 +- .../Calendar/calendarComponent.scss | 280 ++++++++++-------- src/components/Calendar/calendarHelper.js | 16 + .../ProfileCalendar/ProfileCalendar.js | 14 +- .../ProfileCalendarComponent.js | 17 +- .../ProfileCalendar/profileCalendar.scss | 4 + src/components/ProfileHeader/ProfileHeader.js | 10 +- .../ProfileHeader/profileHeader.scss | 4 + src/components/ReportForm/ReportForm.js | 18 +- src/components/ReportForm/reportForm.scss | 60 +++- src/helper.js | 4 +- src/pages/Payouts/Payouts.js | 11 + src/pages/Profile/Profile.js | 2 +- src/pages/Settings/Settings.js | 11 + src/pages/Summary/Summary.js | 2 +- src/pages/Summary/summary.scss | 28 ++ src/pages/Tracker/Tracker.js | 11 + src/pages/ViewReport/ViewReport.js | 18 +- src/pages/ViewReport/viewReport.scss | 143 +++++++++ 20 files changed, 492 insertions(+), 182 deletions(-) create mode 100644 src/pages/Payouts/Payouts.js create mode 100644 src/pages/Settings/Settings.js create mode 100644 src/pages/Tracker/Tracker.js diff --git a/src/App.js b/src/App.js index d00ea2fe..88965023 100644 --- a/src/App.js +++ b/src/App.js @@ -19,6 +19,9 @@ import {ResultPage} from './pages/quiz/ResultPage' import {Profile} from './pages/Profile/Profile.js' import {Summary} from './pages/Summary/Summary' import {ViewReport} from './pages/ViewReport/ViewReport' +import {Tracker} from './pages/Tracker/Tracker' +import {Payouts} from './pages/Payouts/Payouts' +import {Settings} from './pages/Settings/Settings' import './fonts/stylesheet.css' import 'bootstrap/dist/css/bootstrap.min.css' @@ -58,6 +61,9 @@ const App = () => { }/> }/> }/> + }/> + }/> + }/> }/> diff --git a/src/components/Calendar/calendar.scss b/src/components/Calendar/calendar.scss index 1b52c24d..23bb98ef 100644 --- a/src/components/Calendar/calendar.scss +++ b/src/components/Calendar/calendar.scss @@ -95,6 +95,18 @@ box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); transform: scale(1.02); } + + @media (max-width: 800px) { + width: auto; + height: auto; + padding: 15px; + white-space: nowrap; + } + + @media (max-width: 590px) { + padding: 8px; + font-size: 12px; + } } &__hours { @@ -104,7 +116,8 @@ letter-spacing: normal; line-height: 30px; text-align: left; - margin-left: 68px; + margin: 50px 0 0; + text-transform: capitalize; span { font-weight: 100; diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index ddb7184c..176fa833 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -6,7 +6,7 @@ padding-left: 68px; padding-right: 54px; padding-top: 48px; - padding-bottom: 94px; + padding-bottom: 40px; font-family: 'LabGrotesque', sans-serif; &__header { @@ -20,6 +20,10 @@ letter-spacing: normal; line-height: 30px; text-align: left; + + @media (max-width: 500px) { + font-size: 1.7em; + } } &-box { @@ -42,6 +46,10 @@ text-align: left; margin-left: 10px; cursor: pointer; + + @media (max-width: 500px) { + font-size: 1.2em; + } } } } @@ -79,8 +87,9 @@ button { margin: 0 auto; - width: 125px; - height: 42px; + //width: 125px; + //height: 42px; + padding: 0 5px; box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); border-radius: 5px; border: 1px solid #c4c4c4; @@ -94,35 +103,67 @@ text-align: center; a { + display: flex; + align-items: center; + justify-content: center; + width: 115px; + height: 42px; text-decoration: none; color: #000000; + + img { + width: 16px; + height: 16px; + margin: 0 10px 0 0; + } + + @media (max-width: 1200px) { + width: 90px; + height: 40px; + } + + @media (max-width: 968px) { + width: 62px; + height: 40px; + font-size: 10px; + + img { + margin-right: 2px; + } + } + + @media (max-width: 610px) { + img { + display: none; + } + width: auto; + height: auto; + } + } + + @media (max-width: 610px) { + width: 55px; + height: 45px; + } + + @media (max-width: 480px) { + width: 45px; + height: 35px; } } } } - -@media (max-width: 1200px) { - .calendar-component { - &__form { - button { - width: 100px; - height: 40px; - } - } - } -} - @media (max-width: 968px) { .calendar-component { margin-bottom: 40px; - padding: 28px 0 48px 0; + padding: 28px 10px 48px 10px; &__header { - h3 { - position: absolute; - top: -10%; - left: 25%; - } + //h3 { + // position: absolute; + // top: -10%; + // left: 25%; + //} &-box { margin-left: 20px; @@ -132,114 +173,103 @@ &__rectangle { margin: 24px 0; } - - &__form { - button { - width: 72px; - height: 40px; - - img { - display: none; - } - } - } } } -@media (max-width: 768px) { - .calendar-component__form > button { - width: 70px; - height: 40px; +//@media (max-width: 768px) { +// .calendar-component__form > button { +// width: 70px; +// height: 40px; +// +// img { +// display: none; +// } +// } +//} - img { - display: none; - } - } -} - -@media (max-width: 540.98px) { - .calendar-component__form > button { - width: 68px; - height: 40px; - } -} - -@media (max-width: 520.98px) { - .calendar-component__form > button { - width: 66px; - height: 40px; - } -} - -@media (max-width: 500.98px) { - .calendar-component__form > button { - width: 64px; - height: 40px; - } -} - -@media (max-width: 480.98px) { - .calendar-component__form > button { - width: 60px; - height: 40px; - } -} - -@media (max-width: 460.98px) { - .calendar-component__form > button { - width: 56px; - height: 40px; - } -} - -@media (max-width: 440.98px) { - .calendar-component__form > button { - width: 52px; - height: 40px; - } -} - -@media (max-width: 428.98px) { - .calendar-component__form > button { - width: 50px; - height: 40px; - } -} - -@media (max-width: 414.98px) { - .calendar-component__form > button { - width: 49px; - height: 40px; - } -} - -@media (max-width: 395.98px) { - .calendar-component__form > button { - width: 46px; - height: 40px; - } -} - -@media (max-width: 350.98px) { - .calendar-component__form > button { - width: 44px; - height: 40px; - } -} - -@media (max-width: 349.98px) { - .calendar-component__form > button { - width: 42px; - height: 40px; - } -} - -@media (max-width: 346.98px) { - .calendar-component__form > button { - width: 40px; - height: 40px; - } -} +//@media (max-width: 540.98px) { +// .calendar-component__form > button { +// width: 68px; +// height: 40px; +// } +//} +// +//@media (max-width: 520.98px) { +// .calendar-component__form > button { +// width: 66px; +// height: 40px; +// } +//} +// +//@media (max-width: 500.98px) { +// .calendar-component__form > button { +// width: 64px; +// height: 40px; +// } +//} +// +//@media (max-width: 480.98px) { +// .calendar-component__form > button { +// width: 60px; +// height: 40px; +// } +//} +// +//@media (max-width: 460.98px) { +// .calendar-component__form > button { +// width: 56px; +// height: 40px; +// } +//} +// +//@media (max-width: 440.98px) { +// .calendar-component__form > button { +// width: 52px; +// height: 40px; +// } +//} +// +//@media (max-width: 428.98px) { +// .calendar-component__form > button { +// width: 50px; +// height: 40px; +// } +//} +// +//@media (max-width: 414.98px) { +// .calendar-component__form > button { +// width: 49px; +// height: 40px; +// } +//} +// +//@media (max-width: 395.98px) { +// .calendar-component__form > button { +// width: 46px; +// height: 40px; +// } +//} +// +//@media (max-width: 350.98px) { +// .calendar-component__form > button { +// width: 44px; +// height: 40px; +// } +//} +// +//@media (max-width: 349.98px) { +// .calendar-component__form > button { +// width: 42px; +// height: 40px; +// } +//} +// +//@media (max-width: 346.98px) { +// .calendar-component__form > button { +// width: 40px; +// height: 40px; +// } +//} .calendar__icon { margin-right: 10px; diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js index f0b6f81a..62cad531 100644 --- a/src/components/Calendar/calendarHelper.js +++ b/src/components/Calendar/calendarHelper.js @@ -30,6 +30,18 @@ export function getReports(value) { return getReports; } +export function 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}` + } +} + export function currentMonth() { const currentMonth = moment().format('MMMM'); @@ -40,6 +52,10 @@ export function currentMonthAndDay(day) { return day.format('D MMMM'); } +export function getCorrectDate(day) { + return `${new Date(day).getDate()}-${new Date(day).getMonth() + 1}-${new Date(day).getFullYear()}` +}; + export function currentMonthAndDayReportPage() { return moment().format('D MMMM'); } diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index 1c7d6968..6fd2dcbe 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' import {useDispatch, useSelector} from 'react-redux' -import {currentMonth, getReports} from '../Calendar/calendarHelper' +import {getReports} from '../Calendar/calendarHelper' import { Link } from 'react-router-dom' import moment from "moment"; @@ -24,7 +24,6 @@ export const ProfileCalendar = () => { const dispatch = useDispatch(); const profileInfo = useSelector(getProfileInfo) const requestDates = useSelector(getRequestDates) - const [month, setMonth] = useState(''); const [value, setValue] = useState(moment()) const [reports, setReports] = useState([]); const [totalHours, setTotalHours] = useState(0); @@ -59,10 +58,6 @@ export const ProfileCalendar = () => { }) }, [requestDates]); - useEffect(() => { - setMonth(currentMonth) - }, [month]); - return (
@@ -71,7 +66,7 @@ export const ProfileCalendar = () => {
avatar -

{profileInfo.fio} {profileInfo.specification}

+

{profileInfo.fio}, {profileInfo.specification} разработчик

+
+ {value.format('YYYY')} +
{ @@ -124,6 +128,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep )}
+

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

) }) diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss index d9101e99..59fe1f93 100644 --- a/src/components/ProfileCalendar/profileCalendar.scss +++ b/src/components/ProfileCalendar/profileCalendar.scss @@ -15,6 +15,10 @@ .summary__info { padding-right: 25px; + + @media (max-width: 500px) { + padding-right: 5px; + } } .loader { diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js index f2aa854d..adc6055c 100644 --- a/src/components/ProfileHeader/ProfileHeader.js +++ b/src/components/ProfileHeader/ProfileHeader.js @@ -55,14 +55,16 @@ export const ProfileHeader = () => {

{profileInfo?.fio}

- avatar + + avatar +
diff --git a/src/components/ProfileHeader/profileHeader.scss b/src/components/ProfileHeader/profileHeader.scss index ad0cc339..66a08994 100644 --- a/src/components/ProfileHeader/profileHeader.scss +++ b/src/components/ProfileHeader/profileHeader.scss @@ -71,6 +71,10 @@ font-size: 12px; } } + + @media (max-width: 450px) { + column-gap: 8px; + } } &__personalInfo { diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index 11da8999..7a579863 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react' import {useSelector} from 'react-redux' import {Link, useNavigate} from 'react-router-dom' import DatePicker, { registerLocale } from "react-datepicker" +import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper' import ru from "date-fns/locale/ru" registerLocale("ru", ru); @@ -27,18 +28,6 @@ const ReportForm = () => { const navigate= useNavigate(); const reportDate = useSelector(getReportDate); - 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}` - } - }; - useEffect(() => { initListeners() }, []) @@ -130,7 +119,7 @@ const ReportForm = () => { src={calendarIcon} alt='' /> - {getCreatedDate(startDate)} + {getCorrectDate(startDate)} { : input }))}/> + {index > 0 &&
deleteInput(index)} src={remove} alt=''/>
+ } ) })} @@ -196,7 +187,6 @@ const ReportForm = () => { Добавить еще -
diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index f18707cd..635d4acf 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/src/components/ReportForm/reportForm.scss @@ -18,6 +18,10 @@ border-radius: 12px; margin: 25px 0 80px; padding: 50px 40px; + + @media (max-width: 555px) { + padding: 25px 20px; + } } .report__head { @@ -53,6 +57,10 @@ letter-spacing: normal; line-height: 48.74px; text-align: left; + + @media (max-width: 555px) { + font-size: 2.5em; + } } h3 { @@ -65,6 +73,11 @@ text-align: left; margin-top: 52px; margin-bottom: 35px; + + @media (max-width: 555px) { + margin-top: 25px; + margin-bottom: 15px; + } } } @@ -84,6 +97,7 @@ letter-spacing: normal; line-height: normal; text-align: left; + cursor: pointer; img { margin-left: 20px; @@ -102,7 +116,7 @@ font-style: normal; letter-spacing: normal; line-height: 48.74px; - width: 40px; + width: 12px; } &-list { @@ -144,16 +158,25 @@ line-height: normal; text-align: left; margin-bottom: 26px; + white-space: nowrap; } } &-title { - &--description { - margin-left: 20px; - } + //&--description { + // margin-left: 20px; + //} &--hours { margin-left: 330px; + + @media (max-width: 810px) { + margin-left: 125px; + } + + @media (max-width: 610px) { + margin-left: 25px; + } } } @@ -161,6 +184,10 @@ margin-left: 20px; display: flex; align-items: center; + + img { + cursor: pointer; + } } &-form { @@ -186,6 +213,14 @@ font-size: 1.8em; padding-left: 20px; padding-right: 20px; + + @media (max-width: 810px) { + width: 250px; + } + + @media (max-width: 610px) { + width: 150px; + } } } @@ -200,6 +235,18 @@ outline: none; font-size: 1.8em; text-align: center; + + @media (max-width: 500px) { + width: 100px; + } + + @media (max-width: 440px) { + width: 75px; + } + + @media (max-width: 410px) { + width: 50px; + } } } } @@ -235,6 +282,11 @@ padding-left: 20px; padding-right: 20px; outline: none; + + @media (max-width: 610px) { + max-width: 460px; + width: 100%; + } } } diff --git a/src/helper.js b/src/helper.js index ff536c12..078e987e 100644 --- a/src/helper.js +++ b/src/helper.js @@ -3,7 +3,7 @@ export function createMarkup(text) { } export function transformHtml(text) { - let startHtml = {__html: text.split('

').join('

').split('
')}; + let startHtml = {__html: text.split('

||

||

||

').join('

').split('
')}; startHtml = startHtml.__html.filter((el) => el !== null && el !== "" || el === 0 ); @@ -37,4 +37,4 @@ export const getToken = () => { export const urlHasParams = (url) => url.indexOf('?') > 0 ? `${url}&${window.location.search.substr(1)}` : `${url}${window.location.search}`; -export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url; \ No newline at end of file +export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url; diff --git a/src/pages/Payouts/Payouts.js b/src/pages/Payouts/Payouts.js new file mode 100644 index 00000000..0ab6b14f --- /dev/null +++ b/src/pages/Payouts/Payouts.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; + +export const Payouts = () => { + return ( +
+ +
+ ) +}; diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index d55c35e4..fbba3aa7 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -31,7 +31,7 @@ export const Profile = () => {
avatar -

{profileInfo.fio} {profileInfo.specification}

+

{profileInfo.fio}, {profileInfo.specification} разработчик

diff --git a/src/pages/Settings/Settings.js b/src/pages/Settings/Settings.js new file mode 100644 index 00000000..32f53ae3 --- /dev/null +++ b/src/pages/Settings/Settings.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; + +export const Settings = () => { + return ( +
+ +
+ ) +}; diff --git a/src/pages/Summary/Summary.js b/src/pages/Summary/Summary.js index 4e4e4f43..108c7c33 100644 --- a/src/pages/Summary/Summary.js +++ b/src/pages/Summary/Summary.js @@ -34,7 +34,7 @@ export const Summary = () => {
avatar -

{profileInfo.fio} {profileInfo.specification}

+

{profileInfo.fio}, {profileInfo.specification} разработчик

{!openGit && diff --git a/src/pages/Summary/summary.scss b/src/pages/Summary/summary.scss index ff044020..555010a2 100644 --- a/src/pages/Summary/summary.scss +++ b/src/pages/Summary/summary.scss @@ -62,6 +62,10 @@ padding: 0 20px; min-height: 80px; } + + @media (max-width: 500px) { + padding: 0 5px; + } } &__person { @@ -72,6 +76,10 @@ @media (max-width: 690px) { column-gap: 20px; } + + @media (max-width: 550px) { + column-gap: 10px; + } } &__avatar { @@ -92,6 +100,14 @@ font-size: 16px; line-height: 32px; position: relative; + white-space: nowrap; + + @media (max-width: 915px) { + max-width: 220px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } @media (max-width: 690px) { font-size: 14px; @@ -99,6 +115,18 @@ line-height: 15px; } + @media (max-width: 640px) { + max-width: 180px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin: 0; + } + + @media (max-width: 450px) { + max-width: 120px; + } + &:after { content: ''; position: absolute; diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js new file mode 100644 index 00000000..a25b4a3d --- /dev/null +++ b/src/pages/Tracker/Tracker.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; + +export const Tracker = () => { + return ( +
+ +
+ ) +}; diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js index 25d026f9..169558fb 100644 --- a/src/pages/ViewReport/ViewReport.js +++ b/src/pages/ViewReport/ViewReport.js @@ -10,22 +10,12 @@ import {Footer} from "../../components/Footer/Footer"; import arrow from "../../images/right-arrow.png"; import arrowSwitchDate from "../../images/arrowViewReport.png"; +import {apiRequest} from "../../api/request"; +import {getCorrectDate, getCreatedDate} from '../../components/Calendar/calendarHelper' import './viewReport.scss' -import {apiRequest} from "../../api/request"; export const ViewReport = () => { - 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 reportDate = useSelector(getReportDate); const [taskText, setTaskText] = useState([]); @@ -91,7 +81,7 @@ export const ViewReport = () => { arrow

Вернуться

-

{getCreatedDate(reportDay)}

+

{getCorrectDate(reportDay)}

Вами потрачено на работу : {totalHours} часов

{/*
*/} {/* */} @@ -103,7 +93,7 @@ export const ViewReport = () => {
previousDay()}> arrow
-

{getCreatedDate(reportDay)}

+

{getCorrectDate(reportDay)}

nextDay()}> arrow
diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss index f4ec5da6..e1f0625f 100644 --- a/src/pages/ViewReport/viewReport.scss +++ b/src/pages/ViewReport/viewReport.scss @@ -27,6 +27,10 @@ span { color: #52B709; } + + @media (max-width: 500px) { + font-size: 18px; + } } &__back { @@ -60,11 +64,20 @@ height: 72px; justify-content: space-between; + @media (max-width: 500px) { + column-gap: 0; + justify-content: space-between; + } + &__date { font-weight: 500; font-size: 22px; line-height: 32px; color: #000000; + + @media (max-width: 500px) { + font-size: 16px; + } } &__hours { @@ -73,6 +86,10 @@ line-height: 32px; color: #000000; + @media (max-width: 500px) { + font-size: 11px; + } + span { color: #52B709; font-weight: 700; @@ -120,6 +137,11 @@ column-gap: 140px; align-items: center; + @media (max-width: 500px) { + column-gap: 0; + justify-content: space-between; + } + p { font-weight: 400; font-size: 18px; @@ -164,6 +186,10 @@ margin: 0 -28px; overflow: hidden; position: relative; + + @media (max-width: 1205px) { + margin: 0; + } } &__done { @@ -171,6 +197,58 @@ border-collapse: separate; border-spacing: 28px 0; + + @media (max-width: 1205px) { + display: grid; + border-collapse: collapse; + thead { + display: grid; + + tr { + display: grid; + grid-template-columns: 74% calc(26% - 28px); + column-gap: 28px; + } + } + + tbody { + display: grid; + + tr { + display: grid; + grid-template-columns: 74% calc(26% - 28px); + column-gap: 28px; + } + } + } + + @media (max-width: 900px) { + thead { + tr { + th { + padding: 15px; + } + } + } + + tbody { + tr { + td { + padding: 15px; + display: flex; + justify-content: space-between; + } + } + } + } + + @media (max-width: 650px) { + tr { + grid-template-columns: 74% calc(26% - 10px) !important; + column-gap: 10px !important; + } + } + th { padding: 32px 40px; background: white; @@ -179,6 +257,11 @@ font-size: 22px; line-height: 32px; color: #000000; + + @media (max-width: 650px) { + font-size: 16px; + line-height: 20px; + } } td { @@ -190,6 +273,16 @@ font-size: 12px; line-height: 24px; color: #000000; + + @media (max-width: 750px) { + font-size: 10px; + line-height: 18px; + } + + @media (max-width: 465px) { + text-align: center; + line-height: 14px; + } } } @@ -203,6 +296,15 @@ font-size: 17px; line-height: 32px; color: #000000; + + @media (max-width: 750px) { + font-size: 14px; + line-height: 20px; + } + + @media (max-width: 575px) { + text-align: center; + } } } @@ -228,6 +330,19 @@ align-items: center; min-width: 155px; + @media (max-width: 900px) { + column-gap: 0; + justify-content: space-between; + min-width: auto; + width: 100%; + } + + @media (max-width: 575px) { + flex-direction: column; + justify-content: center; + row-gap: 10px; + } + span { width: 48px; height: 48px; @@ -240,6 +355,12 @@ font-size: 22px; line-height: 32px; color: #000000; + + @media (max-width: 900px) { + width: 25px; + height: 25px; + font-size: 18px; + } } p { @@ -266,16 +387,30 @@ margin: 25px 0; padding: 25px 35px; + @media (max-width: 650px) { + padding: 15px 20px; + } + h3 { font-weight: 500; font-size: 22px; line-height: 32px; + + @media (max-width: 650px) { + font-size: 16px; + line-height: 20px; + } } p { font-weight: 400; font-size: 12px; line-height: 24px; + + @media (max-width: 650px) { + font-size: 10px; + line-height: 18px; + } } } @@ -295,6 +430,10 @@ line-height: 32px; color: #000000; + @media (max-width: 500px) { + font-size: 18px; + } + span { color: #8BCC60; font-weight: 500; @@ -304,5 +443,9 @@ footer { margin-top: 70px; + + @media (max-width: 575px) { + margin-top: 0; + } } } From e26b8cc22ebaf058a70051e97cd632a3bbf2b746 Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 21 Feb 2023 19:05:04 +0300 Subject: [PATCH 3/3] personal area partner with fixes report --- src/App.js | 4 + src/components/Calendar/calendar.scss | 6 + .../Calendar/calendarComponent.scss | 13 +- src/components/Calendar/calendarHelper.js | 3 +- .../ProfileCalendarComponent.js | 26 +- .../ProfileCalendar/profileCalendar.scss | 18 ++ src/components/ProfileHeader/ProfileHeader.js | 65 ++++- src/components/ReportForm/ReportForm.js | 6 +- src/helper.js | 2 +- src/images/arrowCalendar.png | Bin 0 -> 2284 bytes src/images/arrowSelect.png | Bin 0 -> 123 bytes src/images/selectArrow.png | Bin 0 -> 247 bytes .../PartnerAddRequest/PartnerAddRequest.js | 98 ++++++++ .../PartnerAddRequest/partnerAddRequest.scss | 228 ++++++++++++++++++ src/pages/PartnerRequests/PartnerRequests.js | 64 +++++ .../PartnerRequests/partnerRequests.scss | 199 +++++++++++++++ src/pages/Profile/Profile.js | 161 ++++++++----- src/pages/Profile/profile.scss | 13 + src/pages/Summary/Summary.js | 12 +- src/pages/Summary/summary.scss | 37 ++- src/pages/ViewReport/ViewReport.js | 6 +- src/pages/ViewReport/viewReport.scss | 34 +-- 22 files changed, 873 insertions(+), 122 deletions(-) create mode 100644 src/images/arrowCalendar.png create mode 100644 src/images/arrowSelect.png create mode 100644 src/images/selectArrow.png create mode 100644 src/pages/PartnerAddRequest/PartnerAddRequest.js create mode 100644 src/pages/PartnerAddRequest/partnerAddRequest.scss create mode 100644 src/pages/PartnerRequests/PartnerRequests.js create mode 100644 src/pages/PartnerRequests/partnerRequests.scss diff --git a/src/App.js b/src/App.js index 88965023..84bf489b 100644 --- a/src/App.js +++ b/src/App.js @@ -22,6 +22,8 @@ import {ViewReport} from './pages/ViewReport/ViewReport' import {Tracker} from './pages/Tracker/Tracker' import {Payouts} from './pages/Payouts/Payouts' import {Settings} from './pages/Settings/Settings' +import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests' +import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest' import './fonts/stylesheet.css' import 'bootstrap/dist/css/bootstrap.min.css' @@ -64,6 +66,8 @@ const App = () => { }/> }/> }/> + }/> + }/> }/> diff --git a/src/components/Calendar/calendar.scss b/src/components/Calendar/calendar.scss index 23bb98ef..07dbf74e 100644 --- a/src/components/Calendar/calendar.scss +++ b/src/components/Calendar/calendar.scss @@ -96,6 +96,12 @@ transform: scale(1.02); } + @media (max-width: 950px) { + width: 200px; + font-size: 15px; + height: 50px; + } + @media (max-width: 800px) { width: auto; height: auto; diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index 176fa833..ba69a3c7 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -29,11 +29,18 @@ &-box { display: flex; align-items: center; - margin-left: 40px; + margin-left: 20px; + cursor: pointer; img { - width: 6px; - height: 6px; + margin: 0px 10px; + width: 12px; + height: 12px; + + &:first-child { + transform: rotate(180deg); + margin: 0; + } } span { diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js index 62cad531..30d8c7c7 100644 --- a/src/components/Calendar/calendarHelper.js +++ b/src/components/Calendar/calendarHelper.js @@ -53,7 +53,8 @@ export function currentMonthAndDay(day) { } export function getCorrectDate(day) { - return `${new Date(day).getDate()}-${new Date(day).getMonth() + 1}-${new Date(day).getFullYear()}` + const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'] + return `${new Date(day).getDate()} ${months[new Date(day).getMonth()]} ${new Date(day).getFullYear()} года` }; export function currentMonthAndDayReportPage() { diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js index 5b438284..ef20a698 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.js +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react' -import ellipse from '../../images/ellipse.png' +import arrow from '../../images/arrowCalendar.png' import rectangle from '../../images/rectangle__calendar.png' import calendarIcon from '../../images/calendar_icon.png' import moment from 'moment' @@ -68,27 +68,27 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep

Мои отчеты

-
- - { - setValueHandler(prevMonth()) - dispatch(setRequestDate(getReports(prevMonth()))) - }}> +
{ + setValueHandler(prevMonth()) + dispatch(setRequestDate(getReports(prevMonth()))) + }}> + + {prevMonth().format('MMMM')}
{value.format('YYYY')}
-
- - { - setValueHandler(nextMonth()) - dispatch(setRequestDate(getReports(nextMonth()))) +
{ + setValueHandler(nextMonth()) + dispatch(setRequestDate(getReports(nextMonth()))) - }}> + }}> + {nextMonth().format('MMMM')} +
diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss index 59fe1f93..36d8c739 100644 --- a/src/components/ProfileCalendar/profileCalendar.scss +++ b/src/components/ProfileCalendar/profileCalendar.scss @@ -53,4 +53,22 @@ transform: scale(1.02); } } + + .summary__info { + @media (max-width: 800px) { + .summary__name { + margin: 0; + max-width: 220px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + @media (max-width: 500px) { + .summary__name { + max-width: 150px; + } + } + } } diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js index adc6055c..d63aae34 100644 --- a/src/components/ProfileHeader/ProfileHeader.js +++ b/src/components/ProfileHeader/ProfileHeader.js @@ -21,6 +21,45 @@ export const ProfileHeader = () => { const userRole = useSelector(getRole); const profileInfo = useSelector(getProfileInfo); + const [user] = useState('developer') + const [navInfo] = useState({ + developer: [ + { + path: '/summary', + name: 'Резюме' + }, + { + path: '/calendar', + name: 'Отчетность' + }, + { + path: '/tracker', + name: 'Трекер' + }, + { + path: '/payouts', + name: 'Выплаты' + }, + { + path: '/settings', + name: 'Настройки' + }, + ], + partner: [ + { + path: '/employees', + name: 'Сотрудники' + }, + { + path: '', + name: 'Отчетность' + }, + { + path: '/requests', + name: 'Запросы' + }, + ] + }) const [isLoggingOut, setIsLoggingOut] = useState(false); @@ -44,7 +83,14 @@ export const ProfileHeader = () => {
-

itguild.для разработчиков

+

itguild. + + {user === 'developer' ? + 'для разработчиков' : + 'для партнеров' + } + +

@@ -53,15 +99,20 @@ export const ProfileHeader = () => {
-

{profileInfo?.fio}

+

+ {user === 'developer' ? + profileInfo?.fio : + '' + } +

avatar diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index 7a579863..77163999 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -60,13 +60,11 @@ const ReportForm = () => { const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0); const deleteInput = (indexRemove) => { - if (indexRemove !== 0) { - setInputs((prev) => prev.filter((el, index) => index !== indexRemove)) - } + setInputs((prev) => prev.filter((el, index) => index !== indexRemove)) }; const handler = () => { - if(!inputs[0].task) { + if(!inputs[0].task || !inputs[0].hours_spent) { setReportSuccess('Заполните задачи'); setTimeout(() => setReportSuccess(''), 1000) return diff --git a/src/helper.js b/src/helper.js index 078e987e..46cfd13b 100644 --- a/src/helper.js +++ b/src/helper.js @@ -3,7 +3,7 @@ export function createMarkup(text) { } export function transformHtml(text) { - let startHtml = {__html: text.split('

||

||

||

').join('

').split('
')}; + let startHtml = {__html: text.split('

||

').join('

').split('
')}; startHtml = startHtml.__html.filter((el) => el !== null && el !== "" || el === 0 ); diff --git a/src/images/arrowCalendar.png b/src/images/arrowCalendar.png new file mode 100644 index 0000000000000000000000000000000000000000..47d2e35769502e99635272e075a616a2d4b4391f GIT binary patch literal 2284 zcmeHJX;c$e6ds}o5)|RoAh^Vx>OoKtk?JAHA|e)%MWAVjvX@0T2@+RAT>+OQVo?D} z0NDwI0D+1csRs>+hbmSFTue+#zI6G@RT`afE#>+*sW)!k zN=whUoylZnW#`<<&C4$+EGjNxmzHtLxfPXFyz0BP_aE>d*3~}|G&D9fKYiBP*3sD| z62FlA*xmPY|KN~xST;8P>h*+t>Q}|IQq@0Mw;O^qn_L`sc^wmtNTyGAl9xRhm)#Hc z)3RhV_~O07Y@Dw**pQMv5{+_50uIJ<+kq5Mi}e@TEz}}HQfcYP-5EMIj=zG2>s6kL zs+CD?ONzkjf5fGtGV@S-BYmkMxoS8aS&zE5$s7RN6tjq3;cHj9xE__gX(NU{5{ee^%0L01tm#-g zb6qn?j5l2=s%pp3+0~%T>%-8aIaLsu70aL68hGT`AzuS1<`3G-* zDcUuoQhAiPEwl+@jpkPWYI$+Wd4;tUl^UsN2qqbFdY)l#uM> z{tvDAHO`qdb6YWA9wFTG+-FBSf0BU@5}gWxBxa1Fh&*b$^+HB?SO`R^aVWLQ*V;U! z`|Z5qp}juZ+d4cX{W=Yu-uJK4BPmA(`dp^gBGYC@ASD^W4UXB;Q4P_ z^|{!&qcP`(^S`$K%$|F+qYXz`CG>KAxyz1QS5$N)=E9ej=2||?8i!GGf{}2CV^OJP zw9bn`gIgz5@%UpYI21z>5sF*FnK>yGShmf`oX?6L#L%_|vVV!+9y17i+;Sl!DZev<+=lCpV*S16@z?t9Ng?WHGm!QSIULB&h=^x zQR8Waw2ZG(I1hbKq$&d?$nz6XHi9SYs7g6a&Qd9)Sm`P?`4J#fOPnW!MA(-$gm9(U z!7b{ogKF$k6HL?uF+fCN;*MHjgPPE;Fex5nN?;=-PpQ3+w(xKJHTYWEKqfcXe}L7M_4;5uwqIU9ha_qNf9FL_9Wk0 z5~0UrQVW{Avom#L^_Z_4d!F|gn literal 0 HcmV?d00001 diff --git a/src/images/selectArrow.png b/src/images/selectArrow.png new file mode 100644 index 0000000000000000000000000000000000000000..b610b0e9ccb530c803533e9fa5bfde9a7e58c0bb GIT binary patch literal 247 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBevhY%V@L(#+un_w4F&?P$t@Gq6lNYUTB>c) zHQBO#>elEKmeUg^JeXUcRCFujW%Gf;@Bh06?ANc%EI7CI+O3Nco7XUi+oh^?u-x&q zY7^LSMRVyhu?MG?PLVYJAazTg>HS}=rEd!NdHJOZCcja9{W8q<&zAPB*B-4q!?jMR oN&7yR$E0GpLO)I3n4iy;%``;({Iz7hgM7l^>FVdQ&MBb@0E4z!C;$Ke literal 0 HcmV?d00001 diff --git a/src/pages/PartnerAddRequest/PartnerAddRequest.js b/src/pages/PartnerAddRequest/PartnerAddRequest.js new file mode 100644 index 00000000..3ea3ad4a --- /dev/null +++ b/src/pages/PartnerAddRequest/PartnerAddRequest.js @@ -0,0 +1,98 @@ +import React from 'react'; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {Footer} from "../../components/Footer/Footer"; + +import arrowDown from "../../images/selectArrow.png" + +import './partnerAddRequest.scss' + +export const PartnerAddRequest = () => { + return ( +
+ +
+

Страница добавления заявки

+
+
+
+

Данные открытой позиции

+
+

Название вакансии

+
+ +
+
+
+

Выберите специализацию

+
+
+ Разработка + +
+
+ Backend Developer + +
+
+
+
+
+

Квалификация

+
+

Выберите уровень знаний

+
+ Разработка + +
+
+
+

Введите необходимое описание

+