Merge pull request #44 from apuc/viewReportPage
preLoader and validate report form
This commit is contained in:
commit
5c1dbd0922
@ -1,13 +1,14 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import {useDispatch, useSelector} from 'react-redux'
|
||||
|
||||
import {currentMonth, getReports} from '../Calendar/calendarHelper'
|
||||
import { Link } from 'react-router-dom'
|
||||
import moment from "moment";
|
||||
|
||||
import {currentMonth, getReports} from '../Calendar/calendarHelper'
|
||||
import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
|
||||
import { Footer } from '../Footer/Footer'
|
||||
import {Loader} from "../Loader/Loader";
|
||||
import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
|
||||
import { Footer } from '../Footer/Footer'
|
||||
|
||||
import {useRequest} from "../../hooks/useRequest";
|
||||
import { getProfileInfo } from '../../redux/outstaffingSlice'
|
||||
@ -22,6 +23,7 @@ export const ProfileCalendar = () => {
|
||||
const [reports, setReports] = useState([]);
|
||||
const [totalHours, setTotalHours] = useState(0);
|
||||
const [requestDates, setRequestDates] = useState('');
|
||||
const [loader, setLoader] = useState(false)
|
||||
|
||||
const {apiRequest} = useRequest();
|
||||
|
||||
@ -30,6 +32,7 @@ export const ProfileCalendar = () => {
|
||||
});
|
||||
|
||||
useEffect(async () => {
|
||||
setLoader(true)
|
||||
if (!requestDates) {
|
||||
return
|
||||
}
|
||||
@ -45,6 +48,7 @@ export const ProfileCalendar = () => {
|
||||
}
|
||||
setTotalHours(spendTime);
|
||||
setReports(reports)
|
||||
setLoader(false)
|
||||
})
|
||||
}, [requestDates]);
|
||||
|
||||
@ -68,14 +72,18 @@ export const ProfileCalendar = () => {
|
||||
}}>Заполнить отчет за день</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-12'>
|
||||
<ProfileCalendarComponent reportsDates={reports} />
|
||||
<p className='calendar__hours'>
|
||||
{month} : <span> {totalHours} часов </span>
|
||||
</p>
|
||||
{loader ?
|
||||
<Loader height={80} width={80} />
|
||||
:
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-12'>
|
||||
<ProfileCalendarComponent reportsDates={reports} />
|
||||
<p className='calendar__hours'>
|
||||
{month} : <span> {totalHours} часов </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
@ -16,6 +16,15 @@
|
||||
.summary__info {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: 20px 0 50px;
|
||||
&:hover {
|
||||
path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile__calendar {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, {useState} from 'react'
|
||||
import {useSelector} from 'react-redux'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {Link, useNavigate} from 'react-router-dom'
|
||||
|
||||
import {Loader} from '../Loader/Loader'
|
||||
import {currentMonthAndDay} from '../Calendar/calendarHelper'
|
||||
@ -33,11 +33,12 @@ const getCreatedDate = (day) => {
|
||||
};
|
||||
|
||||
const ReportForm = () => {
|
||||
const navigate= useNavigate();
|
||||
const reportDate = useSelector(getReportDate);
|
||||
|
||||
const {apiRequest} = useRequest();
|
||||
const [isFetching, setIsFetching] = useState(false);
|
||||
const [reportSuccess, setReportSuccess] = useState(false);
|
||||
const [reportSuccess, setReportSuccess] = useState('');
|
||||
|
||||
const [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
|
||||
const [troublesInputValue, setTroublesInputValue] = useState('');
|
||||
@ -56,6 +57,11 @@ const ReportForm = () => {
|
||||
};
|
||||
|
||||
const handler = () => {
|
||||
if(!inputs[0].task) {
|
||||
setReportSuccess('Заполните задачи');
|
||||
setTimeout(() => setReportSuccess(''), 1000)
|
||||
return
|
||||
}
|
||||
apiRequest('/reports/create', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
@ -66,10 +72,11 @@ const ReportForm = () => {
|
||||
status: 1,
|
||||
},
|
||||
}).then((res) => {
|
||||
if (res.status === 200) {
|
||||
setReportSuccess(true);
|
||||
setTimeout(() => setReportSuccess(false), 2000)
|
||||
}
|
||||
setReportSuccess('Отчет отправлен');
|
||||
setTimeout(() => {
|
||||
setReportSuccess('')
|
||||
navigate('/profile/calendar');
|
||||
}, 1000)
|
||||
setInputs(() => []);
|
||||
setTroublesInputValue('');
|
||||
setScheduledInputValue('');
|
||||
@ -189,7 +196,7 @@ const ReportForm = () => {
|
||||
Всего за день : <span>{totalHours} часов</span>
|
||||
</p>
|
||||
{reportSuccess &&
|
||||
<p className='report-form__footer-done'>Отчет отправлен</p>
|
||||
<p className={`report-form__footer-done ${reportSuccess === 'Заполните задачи' ? 'errorText' : ''}`}>{reportSuccess}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -314,6 +314,11 @@
|
||||
font-weight: 500;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.errorText {
|
||||
color: #bf3c3c;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
|
@ -3,8 +3,9 @@ import {Link} from "react-router-dom";
|
||||
import {useRequest} from "../../hooks/useRequest";
|
||||
import {useSelector} from "react-redux";
|
||||
import {getReportDate} from "../../redux/reportSlice";
|
||||
import {currentMonthAndDay} from "../../components/Calendar/calendarHelper";
|
||||
import SVG from 'react-inlinesvg'
|
||||
|
||||
import {Loader} from "../../components/Loader/Loader"
|
||||
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
||||
import {Footer} from "../../components/Footer/Footer";
|
||||
|
||||
@ -32,10 +33,12 @@ export const ViewReport = () => {
|
||||
const [difficulties, setDifficulties] = useState([])
|
||||
const [tomorrowTask, setTomorrowTask] = useState([])
|
||||
const [totalHours, setTotalHours] = useState(0);
|
||||
const [reportDay, setReportDay] = useState(new Date (getCreatedDate(reportDate)))
|
||||
const [currentDay, setCurrentDay] = useState(new Date ())
|
||||
const [reportDay] = useState(new Date (getCreatedDate(reportDate)))
|
||||
const [currentDay] = useState(new Date ())
|
||||
const [loader, setLoader] = useState(false)
|
||||
|
||||
function getReportFromDate(day) {
|
||||
setLoader(true)
|
||||
setTaskText([])
|
||||
setDifficulties([])
|
||||
setTomorrowTask([])
|
||||
@ -62,6 +65,7 @@ export const ViewReport = () => {
|
||||
})
|
||||
}
|
||||
setTotalHours(spendTime)
|
||||
setLoader(false)
|
||||
})
|
||||
}
|
||||
|
||||
@ -98,14 +102,17 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
<div className='viewReport__switchDate'>
|
||||
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
|
||||
<img src={arrowSwitchDate} alt='arrow'/>
|
||||
<SVG src={arrowSwitchDate}/>
|
||||
</div>
|
||||
<p>{getCreatedDate(reportDay)}</p>
|
||||
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
|
||||
<img src={arrowSwitchDate} alt='arrow'/>
|
||||
<SVG src={arrowSwitchDate}/>
|
||||
</div>
|
||||
</div>
|
||||
{taskText.length ?
|
||||
{loader &&
|
||||
<Loader width={75} height={75}/>
|
||||
}
|
||||
{Boolean(taskText.length) &&
|
||||
<div className='viewReport__content'>
|
||||
<div className='table__container'>
|
||||
<table className='viewReport__done'>
|
||||
@ -155,7 +162,8 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
:
|
||||
}
|
||||
{!Boolean(taskText.length) && !loader &&
|
||||
<div className='viewReport__noTask'>
|
||||
<p>В этот день вы <span>не заполняли</span> отчет</p>
|
||||
</div>
|
||||
|
@ -148,6 +148,14 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.loader {
|
||||
&:hover {
|
||||
path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table__container {
|
||||
margin: 0 -28px;
|
||||
overflow: hidden;
|
||||
|
Loading…
Reference in New Issue
Block a user