Merge pull request #49 from apuc/change-month

change calendar month
This commit is contained in:
NikoM1k 2023-02-09 19:49:18 +02:00 committed by GitHub
commit 4da9497531
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 33 deletions

View File

@ -14,23 +14,28 @@ import {urlForLocal} from "../../helper";
import {apiRequest} from "../../api/request"; import {apiRequest} from "../../api/request";
import { getProfileInfo } from '../../redux/outstaffingSlice' import { getProfileInfo } from '../../redux/outstaffingSlice'
import {setReportDate} from "../../redux/reportSlice"; import {getRequestDates, setReportDate, setRequestDate} from "../../redux/reportSlice";
import 'moment/locale/ru'
import './profileCalendar.scss' import './profileCalendar.scss'
export const ProfileCalendar = () => { export const ProfileCalendar = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const profileInfo = useSelector(getProfileInfo); const profileInfo = useSelector(getProfileInfo)
const requestDates = useSelector(getRequestDates)
const [month, setMonth] = useState(''); const [month, setMonth] = useState('');
const [value, setValue] = useState(moment())
const [reports, setReports] = useState([]); const [reports, setReports] = useState([]);
const [totalHours, setTotalHours] = useState(0); const [totalHours, setTotalHours] = useState(0);
const [requestDates, setRequestDates] = useState(''); const [loader, setLoader] = useState(true)
const [loader, setLoader] = useState(false)
function setValueHandler (value) {
setValue(value)
}
useEffect(() => { useEffect(() => {
setRequestDates(getReports(moment())) dispatch(setRequestDate(getReports(moment())))
},[]); },[]);
useEffect( () => { useEffect( () => {
@ -79,7 +84,7 @@ export const ProfileCalendar = () => {
: :
<div className='row'> <div className='row'>
<div className='col-12 col-xl-12'> <div className='col-12 col-xl-12'>
<ProfileCalendarComponent reportsDates={reports} /> <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} />
<p className='calendar__hours'> <p className='calendar__hours'>
{month} : <span> {totalHours} часов </span> {month} : <span> {totalHours} часов </span>
</p> </p>

View File

@ -1,19 +1,19 @@
import React, { useState, useEffect } from 'react' 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 rectangle from '../../images/rectangle__calendar.png'
import calendarIcon from '../../images/calendar_icon.png' import calendarIcon from '../../images/calendar_icon.png'
import moment from 'moment' import moment from 'moment'
import 'moment/locale/ru' import {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
import { calendarHelper, currentMonthAndDay} from '../Calendar/calendarHelper' import {setReportDate, setRequestDate} from '../../redux/reportSlice';
import { setReportDate } from '../../redux/reportSlice';
import {useDispatch} from "react-redux"; import {useDispatch} from "react-redux";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import 'moment/locale/ru'
import './../Calendar/calendarComponent.scss' import './../Calendar/calendarComponent.scss'
export const ProfileCalendarComponent = ({reportsDates}) => { export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports}) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [value, setValue] = useState(moment()) const [currentDay] = useState(moment())
const [calendar, setCalendar] = useState([]) const [calendar, setCalendar] = useState([])
useEffect(() => { useEffect(() => {
@ -35,8 +35,8 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
} }
function dayStyles(day) { function dayStyles(day) {
if (value < day) return `block` if (currentDay < day) return `block`
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) { if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
return `before` return `before`
} }
@ -47,7 +47,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
} }
function correctRoute(day) { 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) { if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
return `../view` return `../view`
} }
@ -55,26 +55,37 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
return '../../report' return '../../report'
} }
// function prevMonth() { function prevMonth() {
// return value.clone().subtract(1, 'month') return value.clone().subtract(1, 'month')
// } }
//
// function nextMonth() { function nextMonth() {
// return value.clone().add(1, 'month'); return value.clone().add(1, 'month');
// } }
return ( return (
<div className='calendar-component'> <div className='calendar-component'>
<div className='calendar-component__header'> <div className='calendar-component__header'>
<h3>Мои отчеты</h3> <h3>Мои отчеты</h3>
{/*<div className='calendar-component__header-box'>*/} <div className='calendar-component__header-box'>
{/* <img src={ellipse} alt='' />*/} <img src={ellipse} alt='' />
{/* <span onClick={() => setValue(prevMonth())}>{prevMonth().format('MMMM')}</span>*/} <span onClick={() => {
{/*</div>*/} setValueHandler(prevMonth())
{/*<div className='calendar-component__header-box'>*/} dispatch(setRequestDate(getReports(prevMonth())))
{/* <img src={ellipse} alt='' />*/} }}>
{/* <span onClick={() => setValue(nextMonth())}>{nextMonth().format('MMMM')}</span>*/} {prevMonth().format('MMMM')}
{/*</div>*/} </span>
</div>
<div className='calendar-component__header-box'>
<img src={ellipse} alt='' />
<span onClick={() => {
setValueHandler(nextMonth())
dispatch(setRequestDate(getReports(nextMonth())))
}}>
{nextMonth().format('MMMM')}
</span>
</div>
</div> </div>
<div className='calendar-component__rectangle'> <div className='calendar-component__rectangle'>
@ -115,5 +126,5 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
</div> </div>
</div> </div>
) )
} })

View File

@ -2,7 +2,8 @@ import { createSlice } from '@reduxjs/toolkit';
const initialState = { const initialState = {
dateSelected: '', dateSelected: '',
reportDate: '' reportDate: '',
requestDates: ''
}; };
export const reportSlice = createSlice({ export const reportSlice = createSlice({
@ -15,13 +16,18 @@ export const reportSlice = createSlice({
setReportDate: (state, action) => { setReportDate: (state, action) => {
state.reportDate = action.payload; 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 selectDate = (state) => state.report.dateSelected;
export const getReportDate = (state) => state.report.reportDate; export const getReportDate = (state) => state.report.reportDate;
export const getRequestDates = (state) => state.report.requestDates
export default reportSlice.reducer; export default reportSlice.reducer;