diff --git a/src/App.js b/src/App.js index 3eeca2a6..69635b0e 100644 --- a/src/App.js +++ b/src/App.js @@ -88,8 +88,9 @@ const App = () => { } /> } /> } /> + } /> } /> - } /> + } /> } /> } /> } /> diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index 7aab544f..5ae4d7ce 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -7,7 +7,7 @@ padding-right: 54px; padding-top: 48px; padding-bottom: 40px; - font-family: 'LabGrotesque', sans-serif; + font-family: "LabGrotesque", sans-serif; &__header { display: flex; @@ -56,7 +56,6 @@ } h3 { - font-size: 2.5em; font-weight: 400; font-style: normal; @@ -133,6 +132,8 @@ text-align: center; } } + + margin-bottom: 60px; } &__form { @@ -142,8 +143,8 @@ 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; @@ -158,39 +159,34 @@ text-align: center; a { - display: flex; - align-items: center; - justify-content: center; - width: 115px; - height: 42px; - text-decoration: none; - color: #000000; + color: black; + } - img { - width: 16px; - height: 16px; - margin: 0 10px 0 0; - } - - @media (max-width: 1200px) { - width: 90px; - height: 40px; - } + img { + width: 16px; + height: 16px; + margin: 0 10px 0 0; @media (max-width: 968px) { - width: 62px; - height: 40px; - font-size: 10px; + margin-right: 2px; - img { - margin-right: 2px; - } - } - - @media (max-width: 610px) { - img { + @media (max-width: 610px) { display: none; } + } + } + + @media (max-width: 1200px) { + width: 90px; + height: 40px; + } + + @media (max-width: 968px) { + width: 62px; + height: 40px; + font-size: 10px; + + @media (max-width: 610px) { width: auto; height: auto; } diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js index 73afcb39..3ee0de81 100644 --- a/src/components/Calendar/calendarHelper.js +++ b/src/components/Calendar/calendarHelper.js @@ -1,19 +1,23 @@ -import moment from 'moment'; -import 'moment/locale/ru'; +import moment from "moment"; +import "moment/locale/ru"; export function calendarHelper(value) { - const startDay = value.clone().startOf('month').startOf('week').startOf('day'); - const endDay = value.clone().endOf('month').endOf('week'); + const startDay = value + .clone() + .startOf("month") + .startOf("week") + .startOf("day"); + const endDay = value.clone().endOf("month").endOf("week"); - const day = startDay.clone().subtract(1, 'day'); + const day = startDay.clone().subtract(1, "day"); const calendar = []; - while (day.isBefore(endDay, 'day')) { + while (day.isBefore(endDay, "day")) { calendar.push( Array(1) .fill(0) - .map(() => day.add(1, 'day').clone()) + .map(() => day.add(1, "day").clone()) ); } @@ -21,48 +25,84 @@ export function calendarHelper(value) { } 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}` + 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 getCreatedDate(day) { if (day) { - return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}` + return `${new Date(day).getFullYear()}-${correctDay( + new Date(day).getMonth() + 1 + )}-${correctDay(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 dd = String(date.getDate()).padStart(2, "0"); + const mm = String(date.getMonth() + 1).padStart(2, "0"); const yyyy = date.getFullYear(); - return `${yyyy}-${mm}-${dd}` + return `${yyyy}-${mm}-${dd}`; } } +export function correctDay(day) { + if (day < 10) { + return `0${day}`; + } + return day; +} + export function currentMonth() { - const currentMonth = moment().format('MMMM'); + const currentMonth = moment().format("MMMM"); return currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1); } export function currentMonthAndDay(day) { - return day.format('D MMMM'); + return day.format("D MMMM"); } export function getCorrectDate(day) { - const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'] - return `${new Date(day).getDate()} ${months[new Date(day).getMonth()]} ${new Date(day).getFullYear()} года` -}; + const months = [ + "января", + "февраля", + "марта", + "апреля", + "мая", + "июня", + "июля", + "августа", + "сентября", + "октября", + "ноября", + "декабря", + ]; + return `${new Date(day).getDate()} ${ + months[new Date(day).getMonth()] + } ${new Date(day).getFullYear()} года`; +} export function currentMonthAndDayReportPage() { - return moment().format('D MMMM'); + return moment().format("D MMMM"); } export function hourOfNum(number) { - const hours = [' час', ' часа', ' часов']; + const hours = [" час", " часа", " часов"]; const cases = [2, 0, 1, 1, 1, 2]; - return hours[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]]; + return hours[ + number % 100 > 4 && number % 100 < 20 + ? 2 + : cases[number % 10 < 5 ? number % 10 : 5] + ]; } diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index 8eb07cf5..67f3f9ee 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -1,99 +1,127 @@ -import React, { useEffect, useState } from 'react' -import {useDispatch, useSelector} from 'react-redux' +import React, { useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; -import {getReports} from '../Calendar/calendarHelper' -import {Link, Navigate} from 'react-router-dom' +import { getReports } from "../Calendar/calendarHelper"; +import { Link, Navigate } from "react-router-dom"; import moment from "moment"; -import {ProfileCalendarComponent} from "./ProfileCalendarComponent"; -import {Loader} from "../Loader/Loader"; -import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; -import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" -import { Footer } from '../Footer/Footer' +import { ProfileCalendarComponent } from "./ProfileCalendarComponent"; +import { Loader } from "../Loader/Loader"; +import { ProfileHeader } from "../ProfileHeader/ProfileHeader"; +import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; +import { Footer } from "../Footer/Footer"; +import { Navigation } from "../Navigation/Navigation"; +import { ViewReport } from "../../pages/ViewReport/ViewReport"; -import {urlForLocal} from "../../helper"; +import { urlForLocal } from "../../helper"; -import {apiRequest} from "../../api/request"; -import { getProfileInfo } from '../../redux/outstaffingSlice' -import {getRequestDates, setReportDate, setRequestDate} from "../../redux/reportSlice"; - -import 'moment/locale/ru' -import './profileCalendar.scss' -import { Navigation } from '../Navigation/Navigation'; +import { apiRequest } from "../../api/request"; +import { getProfileInfo } from "../../redux/outstaffingSlice"; +import { + getRequestDates, + setReportDate, + setRequestDate, +} from "../../redux/reportSlice"; +import "moment/locale/ru"; +import "./profileCalendar.scss"; export const ProfileCalendar = () => { - if(localStorage.getItem('role_status') === '18') { - return + if (localStorage.getItem("role_status") === "18") { + return ; + } + const dispatch = useDispatch(); + const profileInfo = useSelector(getProfileInfo); + const requestDates = useSelector(getRequestDates); + const [value, setValue] = useState(moment()); + const [reports, setReports] = useState([]); + const [totalHours, setTotalHours] = useState(0); + const [loader, setLoader] = useState(true); + + function setValueHandler(value) { + setValue(value); + } + + useEffect(() => { + dispatch(setRequestDate(getReports(moment()))); + }, []); + + useEffect(() => { + setLoader(true); + if (!requestDates) { + return; } - const dispatch = useDispatch(); - const profileInfo = useSelector(getProfileInfo) - const requestDates = useSelector(getRequestDates) - const [value, setValue] = useState(moment()) - const [reports, setReports] = useState([]); - const [totalHours, setTotalHours] = useState(0); - const [loader, setLoader] = useState(true) + apiRequest( + `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( + "cardId" + )}` + ).then((reports) => { + let spendTime = 0; + for (const report of reports) { + report.task.map((task) => { + if (task.hours_spent) { + spendTime += Number(task.hours_spent); + } + }); + } + setTotalHours(spendTime); + setReports(reports); + setLoader(false); + }); + }, [requestDates]); - function setValueHandler (value) { - setValue(value) - } - - useEffect(() => { - dispatch(setRequestDate(getReports(moment()))) - },[]); - - useEffect( () => { - setLoader(true) - if (!requestDates) { - return - } - apiRequest(`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem('cardId')}`) - .then((reports) => { - let spendTime = 0; - for (const report of reports) { - report.task.map((task) => { - if(task.hours_spent) { - spendTime += Number(task.hours_spent) - } - }) - } - setTotalHours(spendTime); - setReports(reports) - setLoader(false) - }) - }, [requestDates]); - - return ( -
- - -
- -

Ваши отчеты

-
-
- avatar -

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

-
- - - -
- {loader ? -
- -
- : -
-
- -
-
- } -
-