Переписываю спорные решения

Фикс отправки отчета, проверка на массив в map в Description.js
This commit is contained in:
2023-01-17 22:14:05 +03:00
parent 42e2d0e181
commit 6b0b5e991c
21 changed files with 220 additions and 231 deletions
@@ -0,0 +1,114 @@
import React from 'react'
import { WithLogout } from '../../hoc/withLogout'
import arrowLeft from '../../images/right-arrow.png'
import SVG from 'react-inlinesvg'
import dateArrowIcon from '../../images/dateArrow.svg'
import calendarIcon from '../../images/calendar.svg'
import { TaskItem } from '../../components/TaskItem/TaskItem'
import './singleReportPage.scss'
import {useNavigate} from "react-router";
import {LogoutButton} from "../../components/LogoutButton/LogoutButton";
const tasks = [
{
index: 1,
text: 'Задача «67 – Навигационная система – Главное меню – Обновить иконки» заблокирована из-за отсутствия новых иконок',
hours: 3
},
{
index: 2,
text: 'Задача «83 – Навигационная система – Поиск по почтовому индексу – Добавить экран поиска по почтовому индексу» не может быть завершена, т.к. работа над задачей «82 – Навигационная система – Разработать модуль поиска по почтовому индексу» ещё не начата',
hours: 3
}
];
const SingleReportPage = () => {
const navigate= useNavigate();
return (
<div className='single-report-page'>
<div onClick={()=> {navigate(-1)}} className='single-report-page__back'>
<div className='single-report-page__back-arrow'>
<img src={arrowLeft} alt='arrowLeft'/>
</div>
<div className='single-report-page__back-text'>
Вернуться к списку
</div>
</div>
<div className='single-report-page__title'>
<div className='single-report-page__title-text'>Отчет за день</div>
<div className='single-report-page__title-date'>
<div className='single-report-page__title-date--prev'>
<button>
<SVG src={dateArrowIcon} />
</button>
</div>
<div className='single-report-page__title-date--actual'>
<SVG src={calendarIcon} />
<p>15 июня</p>
</div>
<div className='single-report-page__title-date--next single-report-page__title-date--enabled'>
<button>
<SVG src={dateArrowIcon} />
</button>
</div>
</div>
</div>
<div className='single-report-page__tasks'>
<div className='single-report-page__tasks-title'>
<div className='single-report-page__marker'></div>
<h3>Какие задачи были выполнены?</h3>
</div>
{tasks.map((task) => {
return (
<div className='single-report-page__tasks-item'>
<TaskItem {...task} />
</div>
)
})}
</div>
<div className='single-report-page__troubles'>
<div className='single-report-page__troubles-title'>
<div className='single-report-page__marker'></div>
<h3>Какие сложности возникли?</h3>
</div>
<div className='single-report-page__troubles-item'>
91 Навигационная система Поиск адреса Разобраться, почему
находятся несколько пересечений Невского пр. и Казанской ул.
</div>
</div>
<div className='single-report-page__scheduled'>
<div className='single-report-page__scheduled-title'>
<div className='single-report-page__marker'></div>
<h3>Что планируется сделать завтра?</h3>
</div>
<div className='single-report-page__scheduled-item'>
91 Навигационная система Поиск адреса Разобраться, почему
находятся несколько пересечений Невского пр. и Казанской ул.
</div>
</div>
<div className='single-report-page__footer'>
<div className='single-report-page__footer-rectangle'></div>
<div className='single-report-page__hours'>
<div className='single-report-page__hours-value'></div>
<div className='single-report-page__hours-text'></div>
</div>
</div>
<LogoutButton />
</div>
)
};
export default SingleReportPage
@@ -0,0 +1,122 @@
.single-report-page {
padding: 4.6rem 20px 0;
font-family: 'GT Eesti Pro Display', sans-serif;
&__back {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
&-text {
margin-left: 3.1rem;
color: #000000;
font-size: 18px;
font-weight: 300;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
}
&__title {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 3rem;
&-text {
color: #282828;
font-size: 33px;
font-weight: 700;
line-height: 48.74px;
text-align: left;
letter-spacing: 0.56px;
}
&-date {
margin-top: 0.2rem;
margin-left: 3rem;
display: flex;
justify-content: flex-start;
align-items: center;
&--prev {
transform: rotateZ(180deg);
}
&--actual {
width: 125px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #f0f7e0;
display: flex;
justify-content: center;
align-items: center;
margin: 0 65px;
p {
margin-left: 10px;
margin-bottom: 0;
color: #000000;
font-size: 13px;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
}
}
button {
border: none;
outline: none;
width: 31px;
height: 31px;
background-color: #54b611;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
}
&__marker {
width: 6px;
height: 6px;
background-color: #18586e;
border-radius: 50%;
margin-right: 0.8rem;
}
&__tasks,
&__troubles,
&__scheduled {
margin-top: 3.7rem;
&-title {
display: flex;
justify-content: flex-start;
align-items: center;
h3 {
color: #18586e;
font-size: 20px;
font-weight: 500;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
}
&-item {
margin-top: 2.4rem;
width: 580px;
color: #000000;
font-size: 15px;
font-weight: 400;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
}
}