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

Merge branch 'profileCalendar' into profilePage

Browse Source 
# Conflicts:
#	src/App.js
#	src/components/ProfileCalendar/ProfileCalendar.js
#	src/components/ReportForm/ReportForm.js
#	src/pages/Profile.js
This commit is contained in:
Дмитрий Савенко
2023-01-16 19:20:49 +03:00
parent 5608722a28 087a3a2eb8
commit 794a5fa44e
14 changed files with 316 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/ReportForm/ReportForm.js
View File

@ -8,6 +8,9 @@ import ellipse from '../../images/ellipse.png'
import remove from '../../images/remove.png'
import addIcon from '../../images/addIcon.png'
import {currentMonthAndDay} from '../Calendar/calendarHelper'
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";
import {useRequest} from "../../hooks/useRequest";
@ -72,14 +75,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`}>
<img src={arrow} alt=''/><p>Вернуться</p>
</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'>
@ -96,60 +106,58 @@ 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 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>
)
})}
<div className='report-form__form-add'>
<img onClick={addInput} src={addIcon} alt=''/>
<span>Добавить еще </span>
</div>
</div>
<div className='col-4'></div>
</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>
)
})}
<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'>
@ -180,7 +188,10 @@ const ReportForm = () => {
}
</div>
</div>
</div>
</div>
</div>
<Footer/>
</section>
)
};

41
src/components/ReportForm/reportForm.scss
View File

@ -1,14 +1,51 @@
.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;
a {
display: flex;
align-items: center;
grid-column-gap: 30px;
column-gap: 30px;
margin-top: 20px;
cursor: pointer;
text-decoration: none;
p {
margin-bottom: 0;
font-size: 14px;
line-height: 32px;
font-weight: 500;
color: black;
}
}
}
&__block-title {
margin-top: 15px;
h2 {
color: #282828;
color: #52B709;
font-family: 'GT Eesti Pro Display';
font-size: 3.3em;
font-weight: 700;