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

Фикс отправки отчета, проверка на массив в 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

View File

@ -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

View File

@ -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;
}
}
}