new design calendar and report
This commit is contained in:
@ -11,6 +11,8 @@ import ellipse from '../../images/ellipse.png'
|
||||
import remove from '../../images/remove.png'
|
||||
import addIcon from '../../images/addIcon.png'
|
||||
import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
|
||||
import {ProfileHeader} from "../Profile/ProfileHeader";
|
||||
import {Footer} from "../Footer/Footer";
|
||||
import './reportForm.scss'
|
||||
import arrow from "../../images/right-arrow.png";
|
||||
|
||||
@ -53,14 +55,21 @@ const ReportForm = () => {
|
||||
|
||||
return (
|
||||
<section className='report-form'>
|
||||
<div className='row'>
|
||||
<div className='col-xl-12 report__head'>
|
||||
<Link className='calendar__back' to={`/ProfileCalendar`}>
|
||||
<div><img src={arrow} alt=''/>Вернуться назад</div>
|
||||
</Link>
|
||||
<ProfileHeader/>
|
||||
<div className='container'>
|
||||
<h2 className='summary__title'>Ваши отчеты - <span>добавить отчет</span></h2>
|
||||
<div>
|
||||
<div className='report__head'>
|
||||
<Link className='calendar__back' to={`/profile/profilecalendar`}>
|
||||
<div><img src={arrow} alt=''/>Вернуться</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='report-form__content'>
|
||||
<div className='report-form__block'>
|
||||
<div className='report-form__block-title'>
|
||||
<h2>Добавить отчет</h2>
|
||||
<h2>Добавление отчета за день</h2>
|
||||
<h3>Дата заполнения отчета:</h3>
|
||||
</div>
|
||||
<div className='report-form__block-img'>
|
||||
@ -77,117 +86,118 @@ const ReportForm = () => {
|
||||
<span>Какие задачи были выполнены?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-8'>
|
||||
<div className='report-form__task-header'>
|
||||
<p className='report-form__task-title--description'>
|
||||
Краткое описание задачи
|
||||
</p>
|
||||
<p className='report-form__task-title--hours'>Количество часов</p>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<div className='col-8'>
|
||||
<div className='report-form__task-header'>
|
||||
<p className='report-form__task-title--description'>
|
||||
Краткое описание задачи
|
||||
</p>
|
||||
<p className='report-form__task-title--hours'>Количество часов</p>
|
||||
</div>
|
||||
|
||||
{inputs.map((input, index) => {
|
||||
return (
|
||||
<form id={'input'} key={`input__${index}`} className='report-form__task-form'>
|
||||
<div className='report-form__task-number'>
|
||||
{index + 1}.
|
||||
</div>
|
||||
<div className='report-form__task-input report-form__task-input--description'>
|
||||
<input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
|
||||
return index === inputIndex
|
||||
? {
|
||||
...input,
|
||||
task: e.target.value
|
||||
}
|
||||
: input
|
||||
}))}/>
|
||||
</div>
|
||||
<div className='report-form__task-input report-form__task-input--hours'>
|
||||
<input name='number' type='number' min='1'
|
||||
onChange={e => setInputs(inputs.map((input, inputIndex) => {
|
||||
return index === inputIndex
|
||||
? {
|
||||
...input,
|
||||
hours_spent: Number(e.target.value)
|
||||
}
|
||||
: input
|
||||
}))}/>
|
||||
</div>
|
||||
<div className='report-form__task-remove'>
|
||||
<img onClick={() => deleteInput(index)} src={remove} alt=''/>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
})}
|
||||
{inputs.map((input, index) => {
|
||||
return (
|
||||
<form id={'input'} key={`input__${index}`} className='report-form__task-form'>
|
||||
<div className='report-form__task-number'>
|
||||
{index + 1}.
|
||||
</div>
|
||||
<div className='report-form__task-input report-form__task-input--description'>
|
||||
<input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
|
||||
return index === inputIndex
|
||||
? {
|
||||
...input,
|
||||
task: e.target.value
|
||||
}
|
||||
: input
|
||||
}))}/>
|
||||
</div>
|
||||
<div className='report-form__task-input report-form__task-input--hours'>
|
||||
<input name='number' type='number' min='1'
|
||||
onChange={e => setInputs(inputs.map((input, inputIndex) => {
|
||||
return index === inputIndex
|
||||
? {
|
||||
...input,
|
||||
hours_spent: Number(e.target.value)
|
||||
}
|
||||
: input
|
||||
}))}/>
|
||||
</div>
|
||||
<div className='report-form__task-remove'>
|
||||
<img onClick={() => deleteInput(index)} src={remove} alt=''/>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className='report-form__form-add'>
|
||||
<img onClick={addInput} src={addIcon} alt=''/>
|
||||
<span>Добавить еще </span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-4'></div>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='report-form__input-box'>
|
||||
<div className='report-form__troubles'>
|
||||
<img src={ellipse} alt=''/>
|
||||
<span>Какие сложности возникли?</span>
|
||||
<div className='report-form__form-add'>
|
||||
<img onClick={addInput} src={addIcon} alt=''/>
|
||||
<span>Добавить еще </span>
|
||||
</div>
|
||||
</div>
|
||||
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/>
|
||||
<div className='report-form__scheduled'>
|
||||
<img src={ellipse} alt=''/>
|
||||
<span>Что планируется сделать завтра?</span>
|
||||
<div className='col-4'></div>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='report-form__input-box'>
|
||||
<div className='report-form__troubles'>
|
||||
<img src={ellipse} alt=''/>
|
||||
<span>Какие сложности возникли?</span>
|
||||
</div>
|
||||
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/>
|
||||
<div className='report-form__scheduled'>
|
||||
<img src={ellipse} alt=''/>
|
||||
<span>Что планируется сделать завтра?</span>
|
||||
</div>
|
||||
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='report-form__footer'>
|
||||
<button className='report-form__footer-btn' onClick={() => {
|
||||
fetchPost({
|
||||
link: `${process.env.REACT_APP_API_URL}/api/reports/create`,
|
||||
history,
|
||||
role,
|
||||
body: {
|
||||
tasks: inputs,
|
||||
difficulties: troublesInputValue,
|
||||
tomorrow: scheduledInputValue,
|
||||
created_at: getCreatedDate(reportDate),
|
||||
status: 1,
|
||||
},
|
||||
logout: () => dispatch(auth(false))
|
||||
}).then((res) =>
|
||||
res.json().then((resJSON) => {
|
||||
if (res.status === 200) {
|
||||
setReportSuccess(true);
|
||||
setTimeout(() => setReportSuccess(false), 2000)
|
||||
}
|
||||
setInputs(() => []);
|
||||
setTroublesInputValue('');
|
||||
setScheduledInputValue('');
|
||||
setIsFetching(false);
|
||||
setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
|
||||
})
|
||||
)
|
||||
}}>
|
||||
{isFetching ? <Loader/> : 'Отправить'}
|
||||
</button>
|
||||
<p className='report-form__footer-text'>
|
||||
Всего за день : <span>{totalHours} часов</span>
|
||||
</p>
|
||||
{reportSuccess &&
|
||||
<p className='report-form__footer-done'>Отчет отправлен</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='report-form__footer'>
|
||||
<button className='report-form__footer-btn' onClick={() => {
|
||||
fetchPost({
|
||||
link: `${process.env.REACT_APP_API_URL}/api/reports/create`,
|
||||
history,
|
||||
role,
|
||||
body: {
|
||||
tasks: inputs,
|
||||
difficulties: troublesInputValue,
|
||||
tomorrow: scheduledInputValue,
|
||||
created_at: getCreatedDate(reportDate),
|
||||
status: 1,
|
||||
},
|
||||
logout: () => dispatch(auth(false))
|
||||
}).then((res) =>
|
||||
res.json().then((resJSON) => {
|
||||
if (res.status === 200) {
|
||||
setReportSuccess(true);
|
||||
setTimeout(() => setReportSuccess(false), 2000)
|
||||
}
|
||||
setInputs(() => []);
|
||||
setTroublesInputValue('');
|
||||
setScheduledInputValue('');
|
||||
setIsFetching(false);
|
||||
setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
|
||||
})
|
||||
)
|
||||
}}>
|
||||
{isFetching ? <Loader/> : 'Отправить'}
|
||||
</button>
|
||||
<p className='report-form__footer-text'>
|
||||
Всего за день : <span>{totalHours} часов</span>
|
||||
</p>
|
||||
{reportSuccess &&
|
||||
<p className='report-form__footer-done'>Отчет отправлен</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
@ -1,14 +1,33 @@
|
||||
.report-form {
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
margin-top: 23px;
|
||||
|
||||
@media (max-width: 570px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
margin: 25px 0 80px;
|
||||
padding: 50px 40px;
|
||||
}
|
||||
|
||||
.report__head {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__block-title {
|
||||
margin-top: 15px;
|
||||
|
||||
h2 {
|
||||
color: #282828;
|
||||
color: #52B709;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 3.3em;
|
||||
font-weight: 700;
|
||||
|
||||
Reference in New Issue
Block a user