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

Merge pull request #49 from apuc/change-month

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ProfileCalendar/ProfileCalendar.js
View File

@ -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 = () => {
:
<div className='row'>
<div className='col-12 col-xl-12'>
<ProfileCalendarComponent reportsDates={reports} />
<ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} />
<p className='calendar__hours'>
{month} : <span> {totalHours} часов </span>
</p>

61
src/components/ProfileCalendar/ProfileCalendarComponent.js
View File

@ -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 (
<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 className='calendar-component__header-box'>
<img src={ellipse} alt='' />
<span onClick={() => {
setValueHandler(prevMonth())
dispatch(setRequestDate(getReports(prevMonth())))
}}>
{prevMonth().format('MMMM')}
</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 className='calendar-component__rectangle'>
@ -115,5 +126,5 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
</div>
</div>
)
}
})

10
src/redux/reportSlice.js
View File

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