preLoader and validate report form

This commit is contained in:
Николай Полтщук 2023-01-24 19:11:24 +03:00
parent 0cae63237f
commit ffae420834
7 changed files with 69 additions and 24 deletions

View File

@ -1,13 +1,14 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import {useDispatch, useSelector} from 'react-redux' import {useDispatch, useSelector} from 'react-redux'
import {currentMonth, getReports} from '../Calendar/calendarHelper'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import moment from "moment"; import moment from "moment";
import {currentMonth, getReports} from '../Calendar/calendarHelper'
import {ProfileCalendarComponent} from "./ProfileCalendarComponent"; import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
import { Footer } from '../Footer/Footer' import {Loader} from "../Loader/Loader";
import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
import { Footer } from '../Footer/Footer'
import {useRequest} from "../../hooks/useRequest"; import {useRequest} from "../../hooks/useRequest";
import { getProfileInfo } from '../../redux/outstaffingSlice' import { getProfileInfo } from '../../redux/outstaffingSlice'
@ -22,6 +23,7 @@ export const ProfileCalendar = () => {
const [reports, setReports] = useState([]); const [reports, setReports] = useState([]);
const [totalHours, setTotalHours] = useState(0); const [totalHours, setTotalHours] = useState(0);
const [requestDates, setRequestDates] = useState(''); const [requestDates, setRequestDates] = useState('');
const [loader, setLoader] = useState(false)
const {apiRequest} = useRequest(); const {apiRequest} = useRequest();
@ -30,6 +32,7 @@ export const ProfileCalendar = () => {
}); });
useEffect(async () => { useEffect(async () => {
setLoader(true)
if (!requestDates) { if (!requestDates) {
return return
} }
@ -45,6 +48,7 @@ export const ProfileCalendar = () => {
} }
setTotalHours(spendTime); setTotalHours(spendTime);
setReports(reports) setReports(reports)
setLoader(false)
}) })
}, [requestDates]); }, [requestDates]);
@ -68,14 +72,18 @@ export const ProfileCalendar = () => {
}}>Заполнить отчет за день</button> }}>Заполнить отчет за день</button>
</Link> </Link>
</div> </div>
<div className='row'> {loader ?
<div className='col-12 col-xl-12'> <Loader height={80} width={80} />
<ProfileCalendarComponent reportsDates={reports} /> :
<p className='calendar__hours'> <div className='row'>
{month} : <span> {totalHours} часов </span> <div className='col-12 col-xl-12'>
</p> <ProfileCalendarComponent reportsDates={reports} />
<p className='calendar__hours'>
{month} : <span> {totalHours} часов </span>
</p>
</div>
</div> </div>
</div> }
</div> </div>
<Footer /> <Footer />
</div> </div>

View File

@ -16,6 +16,15 @@
.summary__info { .summary__info {
padding-right: 25px; padding-right: 25px;
} }
.loader {
margin: 20px 0 50px;
&:hover {
path {
fill: #ffffff;
}
}
}
.profile__calendar { .profile__calendar {
margin-top: 20px; margin-top: 20px;
} }

View File

@ -1,6 +1,6 @@
import React, {useState} from 'react' import React, {useState} from 'react'
import {useSelector} from 'react-redux' import {useSelector} from 'react-redux'
import {Link} from 'react-router-dom' import {Link, useNavigate} from 'react-router-dom'
import {Loader} from '../Loader/Loader' import {Loader} from '../Loader/Loader'
import {currentMonthAndDay} from '../Calendar/calendarHelper' import {currentMonthAndDay} from '../Calendar/calendarHelper'
@ -33,11 +33,12 @@ const getCreatedDate = (day) => {
}; };
const ReportForm = () => { const ReportForm = () => {
const navigate= useNavigate();
const reportDate = useSelector(getReportDate); const reportDate = useSelector(getReportDate);
const {apiRequest} = useRequest(); const {apiRequest} = useRequest();
const [isFetching, setIsFetching] = useState(false); 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 [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
const [troublesInputValue, setTroublesInputValue] = useState(''); const [troublesInputValue, setTroublesInputValue] = useState('');
@ -56,6 +57,11 @@ const ReportForm = () => {
}; };
const handler = () => { const handler = () => {
if(!inputs[0].task) {
setReportSuccess('Заполните задачи');
setTimeout(() => setReportSuccess(''), 1000)
return
}
apiRequest('/reports/create', { apiRequest('/reports/create', {
method: 'POST', method: 'POST',
data: { data: {
@ -66,10 +72,11 @@ const ReportForm = () => {
status: 1, status: 1,
}, },
}).then((res) => { }).then((res) => {
if (res.status === 200) { setReportSuccess('Отчет отправлен');
setReportSuccess(true); setTimeout(() => {
setTimeout(() => setReportSuccess(false), 2000) setReportSuccess('')
} navigate('/profile/calendar');
}, 1000)
setInputs(() => []); setInputs(() => []);
setTroublesInputValue(''); setTroublesInputValue('');
setScheduledInputValue(''); setScheduledInputValue('');
@ -189,7 +196,7 @@ const ReportForm = () => {
Всего за день : <span>{totalHours} часов</span> Всего за день : <span>{totalHours} часов</span>
</p> </p>
{reportSuccess && {reportSuccess &&
<p className='report-form__footer-done'>Отчет отправлен</p> <p className={`report-form__footer-done ${reportSuccess === 'Заполните задачи' ? 'errorText' : ''}`}>{reportSuccess}</p>
} }
</div> </div>
</div> </div>

View File

@ -314,6 +314,11 @@
font-weight: 500; font-weight: 500;
margin-left: 20px; margin-left: 20px;
} }
.errorText {
color: #bf3c3c;
font-weight: 600;
}
} }
&__form { &__form {

View File

@ -3,8 +3,9 @@ import {Link} from "react-router-dom";
import {useRequest} from "../../hooks/useRequest"; import {useRequest} from "../../hooks/useRequest";
import {useSelector} from "react-redux"; import {useSelector} from "react-redux";
import {getReportDate} from "../../redux/reportSlice"; 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 {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {Footer} from "../../components/Footer/Footer"; import {Footer} from "../../components/Footer/Footer";
@ -32,10 +33,12 @@ export const ViewReport = () => {
const [difficulties, setDifficulties] = useState([]) const [difficulties, setDifficulties] = useState([])
const [tomorrowTask, setTomorrowTask] = useState([]) const [tomorrowTask, setTomorrowTask] = useState([])
const [totalHours, setTotalHours] = useState(0); const [totalHours, setTotalHours] = useState(0);
const [reportDay, setReportDay] = useState(new Date (getCreatedDate(reportDate))) const [reportDay] = useState(new Date (getCreatedDate(reportDate)))
const [currentDay, setCurrentDay] = useState(new Date ()) const [currentDay] = useState(new Date ())
const [loader, setLoader] = useState(false)
function getReportFromDate(day) { function getReportFromDate(day) {
setLoader(true)
setTaskText([]) setTaskText([])
setDifficulties([]) setDifficulties([])
setTomorrowTask([]) setTomorrowTask([])
@ -62,6 +65,7 @@ export const ViewReport = () => {
}) })
} }
setTotalHours(spendTime) setTotalHours(spendTime)
setLoader(false)
}) })
} }
@ -98,14 +102,17 @@ export const ViewReport = () => {
</div> </div>
<div className='viewReport__switchDate'> <div className='viewReport__switchDate'>
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}> <div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
<img src={arrowSwitchDate} alt='arrow'/> <SVG src={arrowSwitchDate}/>
</div> </div>
<p>{getCreatedDate(reportDay)}</p> <p>{getCreatedDate(reportDay)}</p>
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}> <div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
<img src={arrowSwitchDate} alt='arrow'/> <SVG src={arrowSwitchDate}/>
</div> </div>
</div> </div>
{taskText.length ? {loader &&
<Loader width={75} height={75}/>
}
{Boolean(taskText.length) &&
<div className='viewReport__content'> <div className='viewReport__content'>
<div className='table__container'> <div className='table__container'>
<table className='viewReport__done'> <table className='viewReport__done'>
@ -155,7 +162,8 @@ export const ViewReport = () => {
</div> </div>
} }
</div> </div>
: }
{!Boolean(taskText.length) && !loader &&
<div className='viewReport__noTask'> <div className='viewReport__noTask'>
<p>В этот день вы <span>не заполняли</span> отчет</p> <p>В этот день вы <span>не заполняли</span> отчет</p>
</div> </div>

View File

@ -148,6 +148,14 @@
opacity: 0.5; opacity: 0.5;
} }
.loader {
&:hover {
path {
fill: #ffffff;
}
}
}
.table__container { .table__container {
margin: 0 -28px; margin: 0 -28px;
overflow: hidden; overflow: hidden;