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

Fixed conflicts

Browse Source
This commit is contained in:
MaxOvs19
2023-05-23 17:15:12 +03:00
parent b10ce79a32 1e101b7f4c
commit 0b734c1a34
66 changed files with 2880 additions and 1689 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/pages/Article/Article.jsx Normal file
View File

@ -0,0 +1,138 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import { Footer } from "../../components/Footer/Footer";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import CardArticle from "../../components/UI/CardArticle/CardArticle";
import mockImgArticle from "../../images/mockImgArticle.png";
import rightArrow from "../../images/right-arrow.png";
import yandexZen from "../../images/yandexZen.svg";
import cardCalendar from "../../images/cardCalendar.svg";
import cardImg1 from "../../images/cardArticleItem.png";
import cardImg2 from "../../images/cardArticleItem2.png";
import cardImg3 from "../../images/cardArticleItem3.png";
import "./article.scss";
export const Article = ({}) => {
const [article] = useState([
{
image: cardImg1,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
{
image: cardImg2,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
{
image: cardImg3,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
]);
return (
<div className="article-blog">
<AuthHeader />
<SideBar />
<div className="container">
<div className="article-blog__breadCrumbs">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/auth" },
{ name: "Блог", link: "/blog" },
{
name: "Аутстаффинг джунов: почему это выгодно",
link: "/blog",
},
]}
/>
</div>
<div className="article-blog__title">
<h1>Аутстаффинг джунов: почему это выгодно</h1>
</div>
<div className="article-blog__return">
<Link to={"/blog"} className="article-blog__return-link">
<div className="article-blog__return-arrow">
<img src={rightArrow} />
</div>
<span>вернуться к списку статей</span>
</Link>
</div>
<div className="article-blog__body">
<div className="article-blog__body-text">
<p>
Нет, мы работаем только с юридическими лицами и индивидуальными
предпринимателями и тщательно проверяем своих партнеров.
Партнерами являются агентства, которые специализируются на
оказании услуг в формате аутстафф-модели и обладают глубокой
экспертизой в разработке и внедрении ИТ-проектов.
</p>
</div>
<img src={mockImgArticle} className="article-blog__body-img" />
<div className="article-blog__body-text">
<p>
С одной стороны, зарплаты в сфере разработки растут, с другой
стороны, появляется огромное количество новичков, которые хотят
легко и просто войти в ИТ-сферу на волне востребованности и
больших зарплат. Разумеется, это приводит к осторожному отношению
работодателя к выпускникам различных курсов. Нет такого курса,
который даст на 100% готового джуна, слишком многое завязано на
личной инициативе, обучаемости и желании.
</p>
<br />
<p>
В итоге получается, что взгляды работодателя и потенциального
сотрудника расходятся: работодатель не хочет открывать ящик
пандоры, на который нужно тратить время, а работник, только
прошедший курсы, испытывает эффект завышенных ожиданий и имеет
зачастую неадекватные запросы.
</p>
</div>
<div className="article-blog__body-footer">
<div className="yandex">
<img src={yandexZen} />
<div className="yandex__text">
<p>Читать на Дзен</p>
<span>dzen.ru</span>
</div>
</div>
<div className="publication-date">
<img src={cardCalendar} />
<p>1 марта, 2023</p>
</div>
</div>
<div className="more-articles">
<h1>Читайте также</h1>
<div className="more-articles__arrow">
<img src={rightArrow} />
</div>
</div>
<div className="blog__body">
{article.map((item, index) => {
return (
<CardArticle
images={item.image}
title={item.title}
data={item.data}
key={index}
id={index}
/>
);
})}
</div>
</div>
</div>
<Footer />
</div>
);
};
export default Article;

166
src/pages/Article/article.scss Normal file
View File

@ -0,0 +1,166 @@
.article-blog {
background: #f1f1f1;
&__breadCrumbs {
margin-top: 30px;
@media (max-width: 1375px) {
margin-top: 0;
padding-top: 110px;
}
@media (max-width: 600px) {
display: none;
}
}
&__title {
margin: 42px 0 44px 0;
h1 {
font-weight: 500;
font-size: 38px;
line-height: 32px;
}
@media (max-width: 600px) {
padding-top: 80px;
}
}
&__return {
display: flex;
align-items: center;
&-link {
display: flex;
align-items: center;
}
span {
font-weight: 400;
font-size: 12px;
line-height: 20px;
color: #6f6f6f;
margin-left: 19px;
}
&-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 44px;
background: #8dc63f78;
img {
width: 45%;
}
}
}
&__body {
display: flex;
flex-direction: column;
&-text {
margin-top: 30px;
padding: 33px;
background: #ffffff;
text-align: justify;
border-radius: 12px;
p {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
}
}
&-img {
margin-top: 16px;
}
&-footer {
margin: 30px 0 78px 25px;
display: flex;
.yandex {
display: flex;
align-items: center;
img {
margin: 0;
width: 39px;
height: 39px;
}
&__text {
margin-left: 18px;
p {
font-weight: 500;
font-size: 16px;
line-height: 32px;
}
}
}
.publication-date {
margin-left: 76px;
display: flex;
align-items: center;
p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
img {
margin: 0 16px 0 0;
}
}
@media (max-width: 600px) {
margin: 20px 0 20px 0;
flex-direction: column;
.publication-date {
margin: 0;
}
.yandex {
margin: 0 0 10px 0;
}
}
}
.more-articles {
display: flex;
align-items: center;
margin-bottom: 49px;
h1 {
font-weight: 500;
font-size: 33px;
line-height: 32px;
}
&__arrow {
margin: 0 0 0 21px;
display: flex;
justify-content: center;
align-items: center;
width: 27px;
height: 27px;
background: #80777770;
border-radius: 44px;
img {
width: 50%;
transform: rotate(180deg);
}
}
}
}
}

0
src/pages/AuthForCandidate/AuthForCandidate.js → src/pages/AuthForCandidate/AuthForCandidate.jsx
View File

0
src/pages/AuthForDevelopers/AuthForDevelopers.js → src/pages/AuthForDevelopers/AuthForDevelopers.jsx
View File

106
src/pages/Blog/Blog.jsx Normal file
View File

@ -0,0 +1,106 @@
import React, { useState } from "react";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import CardArticle from "../../components/UI/CardArticle/CardArticle";
// import arrowRight from "../../images/arrowRight.png";
import blogArrow from "../../images/blogArrow.svg";
import cardImg1 from "../../images/cardArticleItem.png";
import cardImg2 from "../../images/cardArticleItem2.png";
import cardImg3 from "../../images/cardArticleItem3.png";
import cardImg4 from "../../images/cardArticleItem4.png";
import cardImg5 from "../../images/cardArticleItem5.png";
import cardImg6 from "../../images/cardArticleItem6.png";
import "./blog.scss";
export const Blog = ({}) => {
const [article] = useState([
{
image: cardImg1,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
{
image: cardImg2,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
{
image: cardImg3,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
{
image: cardImg4,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
{
image: cardImg5,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
{
image: cardImg6,
title: "Аутстаффинг джунов: почему это выгодно",
data: "1 марта, 2023",
},
]);
return (
<div className="blog">
<AuthHeader />
<SideBar />
<div className="container">
<div className="blog__breadCrumbs">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/auth" },
{ name: "Блог", link: "/blog" },
]}
/>
</div>
<div className="blog__title">
<div>
<h1>Блог</h1>
<img src={blogArrow} className="blog__title-arrow" />
</div>
<h3>
Из первых уст рассказываем о себе пользователям, делимся полезными и
важными материалами, стремимся получать обратную связь
</h3>
</div>
<div className="blog__body">
{article.map((item, index) => {
return (
<CardArticle
images={item.image}
title={item.title}
data={item.data}
key={index}
id={index}
/>
);
})}
</div>
<div className="blog__load-more">
<button>Загрузить еще</button>
</div>
</div>
<Footer />
</div>
);
};
export default Blog;

77
src/pages/Blog/blog.scss Normal file
View File

@ -0,0 +1,77 @@
.blog {
background: #f1f1f1;
&__breadCrumbs {
margin-top: 30px;
@media (max-width: 1375px) {
margin-top: 0;
padding-top: 100px;
}
@media (max-width: 600px) {
display: none;
}
}
&__title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
h1 {
font-weight: 500;
font-size: 48px;
line-height: 32px;
}
h3 {
font-weight: 400;
font-size: 18px;
line-height: 28px;
text-align: justify;
}
div {
display: flex;
}
&-arrow {
margin: 0 27px 0 20px;
}
@media (max-width: 600px) {
padding-top: 110px;
flex-direction: column;
div {
margin: 0 0 15px 0;
}
}
}
&__body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
&__load-more {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 35px;
button {
background: #52b709;
border-radius: 44px;
width: 202px;
height: 50px;
color: white;
font-size: 16px;
line-height: 32px;
border: none;
}
}
}

21
src/pages/CodeSnippetPage.js
View File

@ -1,21 +0,0 @@
import { useEffect, useState } from "react";
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
export const CodeSnippetlighter = () => {
const [codeString, setCodeString] = useState(``)
//
// useEffect(()=>{
// fetch('/code.txt')
// .then((r) => r.text())
// .then(text => {
// setCodeString(text)
// })
// }, [])
return (
<SyntaxHighlighter language={"javascript"} style={a11yDark} wrapLongLines={false} customStyle={{fontSize:14}} showLineNumbers={true}>
{codeString}
</SyntaxHighlighter>
);
};

13
src/pages/ContractPage.js
View File

@ -1,13 +0,0 @@
import React from 'react';
import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete"
import { ContractContent } from "../components/features/bookkeeping/ContractContent/ContractContent"
export const ContractPage = () => {
return (
<div>
<BookkeepingTemplete showBreadcrumps nameBreeadcrumps="Создание договора">
<ContractContent />
</BookkeepingTemplete>
</div>
)
}

13
src/pages/MoneyPage.js
View File

@ -1,13 +0,0 @@
import React from 'react';
import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete"
import { MoneyContent } from "../components/features/Money/MoneyContent"
export const MoneyPage = () => {
return (
<div>
<BookkeepingTemplete>
<MoneyContent></MoneyContent>
</BookkeepingTemplete>
</div>
)
}

6
src/pages/PartnerBid/PartnerBid.js → src/pages/PartnerBid/PartnerBid.jsx
View File

@ -13,7 +13,7 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
import { Footer } from "../../components/Footer/Footer";
import { Navigation } from "../../components/Navigation/Navigation";
import { Loader } from "../../components/Loader/Loader";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
import ModalLayout from "../../components/UI/ModalLayout/ModalLayout";
import { apiRequest } from "../../api/request";
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
@ -76,7 +76,7 @@ export const PartnerBid = () => {
<div className="partnerBid">
<ProfileHeader />
<Navigation />
<ModalAdd active={modalDelete} setActive={setModalDelete}>
<ModalLayout active={modalDelete} setActive={setModalDelete}>
<div className="title-project modal-title-delete">
<h4>Подтверждение удаления</h4>
<p className="title-project__decs modal-decs">
@ -99,7 +99,7 @@ export const PartnerBid = () => {
</button>
</div>
</div>
</ModalAdd>
</ModalLayout>
<div className="container">
<ProfileBreadcrumbs

0
src/pages/PartnerSettings/PartnerSettings.js → src/pages/PartnerSettings/PartnerSettings.jsx
View File

395
src/pages/ProjectTracker/ProjectTracker.js Normal file
View File

@ -0,0 +1,395 @@
import React, { useEffect, useRef, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { Navigation } from "../../components/Navigation/Navigation";
import { Loader } from "../../components/Loader/Loader";
import { useDispatch, useSelector } from "react-redux";
import { apiRequest } from "../../api/request";
import {
getProjectBoard,
getBoarderLoader,
modalToggle,
moveProjectTask,
setProjectBoardFetch,
setToggleTab,
activeLoader,
setColumnName,
setColumnId,
} from "../../redux/projectsTrackerSlice";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
import project from "../../images/trackerProject.svg";
import tasks from "../../images/trackerTasks.svg";
import archive from "../../images/archiveTracker.svg";
import selectArrow from "../../images/select.svg";
import commentsBoard from "../../images/commentsBoard.svg";
import filesBoard from "../../images/filesBoard.svg";
import arrow from "../../images/arrowCalendar.png";
import del from "../../images/delete.svg";
import edit from "../../images/edit.svg";
export const ProjectTracker = () => {
const dispatch = useDispatch();
const projectId = useParams();
const [openColumnSelect, setOpenColumnSelect] = useState({});
const [selectedTab, setSelectedTab] = useState(0);
const [priorityTask, setPriorityTask] = useState(0);
const [wrapperHover, setWrapperHover] = useState({});
const [modalAdd, setModalAdd] = useState(false);
const [modalActiveTicket, setModalActiveTicket] = useState(false);
const [selectedTicket, setSelectedTicket] = useState({});
const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader);
useEffect(() => {
dispatch(activeLoader());
dispatch(setProjectBoardFetch(projectId.id));
}, []);
useEffect(() => {
if (Object.keys(projectBoard).length) {
projectBoard.columns.forEach((column) => {
setOpenColumnSelect((prevState) => ({
...prevState,
[column.id]: false,
}));
setWrapperHover((prevState) => ({ ...prevState, [column.id]: false }));
});
}
}, [projectBoard]);
// function toggleMoreTasks(columnId) {
// setTabTaskMok((prevArray) =>
// prevArray.map((elem, index) => {
// if (columnId === index) {
// return { ...elem, open: !elem.open };
// } else {
// return elem;
// }
// })
// );
// }
function dragStartHandler(e, task, columnId) {
startWrapperIndexTest.current = { task: task, index: columnId };
setTimeout(() => {
e.target.classList.add("tasks__board__item__hide");
}, 0);
}
function dragEndHandler(e) {
setWrapperHover((prevState) => ({
[prevState]: false,
}));
e.target.classList.remove("tasks__board__item__hide");
}
function dragOverHandler(e) {
e.preventDefault();
}
function dragEnterHandler(columnId) {
if (columnId === startWrapperIndexTest.current.index) {
return;
}
setWrapperHover((prevState) => ({
[prevState]: false,
[columnId]: true,
}));
}
function dragDropHandler(e, columnId) {
e.preventDefault();
if (startWrapperIndexTest.current.index === columnId) {
return;
}
setWrapperHover((prevState) => ({
[prevState]: false,
}));
if (columnId !== startWrapperIndexTest.current.index) {
dispatch(
moveProjectTask({
startWrapperIndex: startWrapperIndexTest.current,
columnId,
})
);
}
}
function selectedTabTask(columnId, length) {
setSelectedTab(columnId);
dispatch(modalToggle("createTiketProject"));
setModalAdd(true);
setPriorityTask(length + 1)
}
function openTicket(e, task) {
setSelectedTicket(task);
setModalActiveTicket(true);
}
function deleteColumn(id) {
apiRequest("/project-column/update-column", {
method: "PUT",
data: {
column_id: id,
project_id: projectBoard.id,
status: 0,
},
}).then((res) => {
dispatch(setProjectBoardFetch(projectBoard.id));
});
}
return (
<div className="tracker">
<ProfileHeader />
<Navigation />
<div className="container">
<div className="tracker__content">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Трекер", link: "/profile/tracker" },
]}
/>
<h2 className="tracker__title">Управление проектами с трекером</h2>
</div>
</div>
<div className="tracker__tabs">
<div className="tracker__tabs__head">
<Link
to="/profile/tracker"
className="tab active-tab tab"
onClick={() => dispatch(setToggleTab(1))}
>
<img src={project} alt="img" />
<p>Проекты </p>
</Link>
<Link
to="/profile/tracker"
className="tab"
onClick={() => dispatch(setToggleTab(2))}
>
<img src={tasks} alt="img" />
<p>Все мои задачи</p>
</Link>
<Link
to="/profile/tracker"
className="tab"
onClick={() => dispatch(setToggleTab(3))}
>
<img src={archive} alt="img" />
<p>Архив</p>
</Link>
</div>
<div className="tracker__tabs__content">
<TrackerModal
active={modalAdd}
setActive={setModalAdd}
selectedTab={selectedTab}
priorityTask={priorityTask}
/>
{loader && <Loader style="green" />}
{!loader && (
<div className="tracker__tabs__content__tasks tasks active__content">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4>
<div className="tasks__head__add">
<span
onClick={() => {
dispatch(modalToggle("createColumn"));
setModalAdd(true);
}}
>
+
</span>
<p>добавить колонку</p>
</div>
<div className="tasks__head__persons">
{/*<img src={avatarTest} alt="avatar" />*/}
{/*<img src={avatarTest} alt="avatar" />*/}
<span className="countPersons">{projectBoard.projectUsers?.length}</span>
<span
className="addPerson"
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAdd(true);
}}
>
+
</span>
<p>добавить участника</p>
</div>
<div className="tasks__head__select">
<span>Участвую</span>
<img src={selectArrow} alt="arrow" />
</div>
<div className="tasks__head__select">
<span>Мои</span>
<img src={selectArrow} alt="arrow" />
</div>
<Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
</Link>
</div>
</div>
{Boolean(modalActiveTicket) && <ModalTicket
active={modalActiveTicket}
setActive={setModalActiveTicket}
task={selectedTicket}
projectId={projectBoard.id}
projectName={projectBoard.name}
/>}
<div className="tasks__container">
{Boolean(projectBoard?.columns) &&
Boolean(projectBoard.columns.length) &&
projectBoard.columns.map((column) => {
return (
<div
key={column.id}
onDragOver={(e) => dragOverHandler(e)}
onDragEnter={(e) => dragEnterHandler(column.id)}
onDrop={(e) => dragDropHandler(e, column.id)}
className={`tasks__board ${
column.tasks.length >= 3 ? "tasks__board__more" : ""
} ${
wrapperHover[column.id] ? "tasks__board__hover" : ""
}`}
>
<div className="board__head">
{/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
<span>{column.title}</span>
<div>
<span
className="add"
onClick={() => selectedTabTask(column.id, column.tasks.length)}
>
+
</span>
<span
onClick={() => {
setOpenColumnSelect((prevState) => ({
...prevState,
[column.id]: true,
}));
}}
className="more"
>
...
</span>
</div>
</div>
{openColumnSelect[column.id] && (
<div className="column__select">
<div
className="column__select__item"
onClick={() => {
setOpenColumnSelect((prevState) => ({
...prevState,
[column.id]: false,
}));
dispatch(modalToggle("editColumn"));
dispatch(setColumnName(column.title))
dispatch(setColumnId(column.id))
setModalAdd(true);
}}
>
<img src={edit} alt="edit" />
<span>Изменить</span>
</div>
<div
className="column__select__item"
onClick={() => deleteColumn(column.id)}
>
<img src={del} alt="delete" />
<span>Удалить</span>
</div>
</div>
)}
{column.tasks.map((task, index) => {
// if (index > 2) {
// if (!column.open) {
// return;
// }
// }
return (
<div
key={task.id}
className="tasks__board__item"
draggable={true}
onDragStart={(e) =>
dragStartHandler(e, task, column.id)
}
onDragEnd={(e) => dragEndHandler(e)}
onClick={(e) => openTicket(e, task)}
>
<div className="tasks__board__item__title">
<p>{task.title}</p>
</div>
<p className="tasks__board__item__description">
{task.description}
</p>
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />
<span>{task.comment_count} коментариев</span>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<span>{task.files} файлов</span>
</div>
{/*<div className="tasks__board__item__info__avatars">*/}
{/* <img src={task.avatarCreated} alt="avatar" />*/}
{/* <img src={task.avatarDo} alt="avatar" />*/}
{/*</div>*/}
</div>
</div>
);
})}
{/*{column.tasks.length > 3 && (*/}
{/* <span*/}
{/* className={*/}
{/* column.open*/}
{/* ? "lessItems openItems"*/}
{/* : "moreItems openItems"*/}
{/* }*/}
{/* // onClick={() => toggleMoreTasks(column.id)}*/}
{/* >*/}
{/* {column.open ? "-" : "+"}*/}
{/* </span>*/}
{/*)}*/}
</div>
);
})}
{Boolean(projectBoard?.columns) &&
!Boolean(projectBoard.columns.length) && (
<div className="tasks__board__noItems">
В проекте нет задач.
</div>
)}
</div>
</div>
)}
</div>
</div>
<Footer />
</div>
);
};

11
src/pages/TaxPage.js
View File

@ -1,11 +0,0 @@
import React from 'react';
import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete"
import { TaxContent } from "../components/features/Taxes/TaxContent/TaxContent"
export const TaxPage = () => {
return (
<BookkeepingTemplete>
<TaxContent></TaxContent>
</BookkeepingTemplete>
)
}

921
src/pages/Tracker/Tracker.js
View File

File diff suppressed because it is too large Load Diff

46
src/pages/Tracker/tracker.scss
View File

@ -53,6 +53,7 @@
padding: 12px 40px 15px 19px;
cursor: pointer;
align-items: center;
color: black;
@media (max-width: 490px) {
padding: 8px 20px 8px 14px;
@ -250,6 +251,8 @@
font-size: 14px;
line-height: 17px;
max-width: 120px;
display: flex;
align-items: center;
}
}
@ -286,7 +289,7 @@
color: #252c32;
border: 1px solid #dde2e4;
background: white;
left: -25px;
left: -18px;
z-index: 2;
}
@ -294,8 +297,8 @@
background: #00c5a8;
color: white;
font-size: 14px;
left: -35px;
z-index: 1;
left: -30px;
z-index: 2;
}
p {
@ -326,6 +329,7 @@
cursor: pointer;
display: flex;
align-items: center;
color: black;
p {
font-weight: 400;
@ -395,6 +399,9 @@
border-radius: 6px;
background: #ffffff;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
&__hide {
opacity: 0;
@ -446,6 +453,8 @@
&__more {
cursor: pointer;
display: flex;
align-items: center;
span {
font-weight: 500;
font-size: 12px;
@ -494,6 +503,37 @@
&__more {
padding-bottom: 50px;
}
.column__select {
position: absolute;
padding: 15px;
background: #e1fccf;
border-radius: 12px;
right: -20px;
top: 5px;
z-index: 7;
row-gap: 10px;
display: flex;
flex-direction: column;
&__item {
cursor: pointer;
display: flex;
align-content: center;
img {
margin-right: 5px;
}
span {
font-size: 14px;
}
}
}
&__noItems {
font-weight: 500;
font-size: 25px;
}
}
.board {

175
src/pages/ViewReport/ViewReport.js
View File

@ -1,175 +0,0 @@
import React, {useEffect, useState} from 'react'
import {Link, Navigate} from "react-router-dom";
import {useSelector} from "react-redux";
import {getReportDate} from "../../redux/reportSlice";
import {Loader} from "../../components/Loader/Loader"
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from "../../components/Footer/Footer";
import {apiRequest} from "../../api/request";
import {getCorrectDate, getCreatedDate, hourOfNum} from '../../components/Calendar/calendarHelper'
import arrow from "../../images/right-arrow.png";
import arrowSwitchDate from "../../images/arrowViewReport.png";
import './viewReport.scss'
import { Navigation } from '../../components/Navigation/Navigation';
export const ViewReport = () => {
if(localStorage.getItem('role_status') === '18') {
return <Navigate to="/profile" replace/>
}
const reportDate = useSelector(getReportDate);
const [taskText, setTaskText] = useState([]);
const [difficulties, setDifficulties] = useState([]);
const [tomorrowTask, setTomorrowTask] = useState([]);
const [totalHours, setTotalHours] = useState(0);
const [reportDay] = useState(new Date (getCreatedDate(reportDate)));
const [currentDay] = useState(new Date ());
const [loader, setLoader] = useState(false);
function getReportFromDate(day) {
setLoader(true);
setTaskText([]);
setDifficulties([]);
setTomorrowTask([]);
apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`)
.then(res => {
let spendTime = 0;
for (const item of res) {
if(item.difficulties) {
setDifficulties(prevArray => [...prevArray, item.difficulties])
}
if(item.tomorrow) {
setTomorrowTask(prevArray => [...prevArray, item.tomorrow])
}
item.task.map((task) => {
const taskInfo = {
hours: task.hours_spent,
task: task.task,
id: task.id
};
if(task.hours_spent) {
spendTime += Number(task.hours_spent)
}
setTaskText(prevArray => [...prevArray, taskInfo])
})
}
setTotalHours(spendTime);
setLoader(false)
})
}
function nextDay() {
reportDay.setDate(reportDay.getDate() + 1);
getReportFromDate(getCreatedDate(reportDay))
}
function previousDay() {
reportDay.setDate(reportDay.getDate() - 1);
getReportFromDate(getCreatedDate(reportDay))
}
useEffect(() => {
getReportFromDate(getCreatedDate(reportDate))
}, []);
return (
<div className='viewReport'>
<ProfileHeader/>
<Navigation />
<div className='container'>
<div className='viewReport__info'>
<ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
{name: 'Ваша отчетность', link: '/profile/calendar'},
{name: 'Просмотр отчета за день', link: '/profile/view'}]}
/>
<h2 className='viewReport__title'>Ваши отчеты - <span>просмотр отчета за день</span></h2>
<Link className='viewReport__back' to={`/profile/calendar`}>
<img src={arrow} alt='arrow'/><p>Вернуться</p>
</Link>
<div className='viewReport__bar'>
<h3 className='viewReport__bar__date'>{getCorrectDate(reportDay)}</h3>
<p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} {hourOfNum(totalHours)}</span></p>
{/*<div className='viewReport__bar__progressBar'>*/}
{/* <span></span>*/}
{/*</div>*/}
{/*<p className='viewReport__bar__total'>122 часа из 160</p>*/}
</div>
</div>
<div className='viewReport__switchDate'>
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
<img src={arrowSwitchDate} alt='arrow'/>
</div>
<p>{getCorrectDate(reportDay)}</p>
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
<img src={arrowSwitchDate} alt='arrow'/>
</div>
</div>
{loader &&
<Loader width={75} height={75}/>
}
{Boolean(taskText.length) &&
<div className='viewReport__content'>
<div className='table__container'>
<table className='viewReport__done'>
<thead>
<tr>
<th><p>Какие задачи были выполнены?</p></th>
<th><p>Время</p></th>
</tr>
</thead>
<tbody>
{taskText.length && taskText.map((task, index) => {
return <tr key={task.id}>
<td>
<p>{index + 1}. {task.task}</p>
</td>
<td>
<div className='viewReport__done__hours__item'>
<span>{task.hours}</span>
<p className='hours'>{hourOfNum(task.hours)} на задачу</p>
</div>
</td>
</tr>
})}
<tr>
<td></td>
<td><span>Всего: {totalHours} {hourOfNum(totalHours)}</span></td>
</tr>
</tbody>
</table>
</div>
{Boolean(difficulties.length) &&
<div className='viewReport__item'>
<h3>Какие сложности возникли?</h3>
{difficulties.map((item, index) => {
return <p key={index}>{item}</p>
}
)}
</div>
}
{Boolean(tomorrowTask.length) &&
<div className='viewReport__item'>
<h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>
}
)}
</div>
}
</div>
}
{!Boolean(taskText.length) && !loader &&
<div className='viewReport__noTask'>
<p>В этот день вы <span>не заполняли</span> отчет</p>
</div>
}
<Footer />
</div>
</div>
)
};

225
src/pages/ViewReport/ViewReport.jsx Normal file
View File

@ -0,0 +1,225 @@
import React, { useEffect, useState } from "react";
import { Link, Navigate, useParams } from "react-router-dom";
import { Loader } from "../../components/Loader/Loader";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { Navigation } from "../../components/Navigation/Navigation";
import { apiRequest } from "../../api/request";
import {
getCorrectDate,
getCreatedDate,
hourOfNum,
} from "../../components/Calendar/calendarHelper";
import arrow from "../../images/right-arrow.png";
import arrowSwitchDate from "../../images/arrowViewReport.png";
import "./viewReport.scss";
export const ViewReport = () => {
if (localStorage.getItem("role_status") === "18") {
return <Navigate to="/profile" replace />;
}
const dateReport = useParams();
const [previousReportDay] = useState(new Date(dateReport.id));
const [nextReportDay] = useState(new Date(dateReport.id));
const [taskText, setTaskText] = useState([]);
const [difficulties, setDifficulties] = useState([]);
const [tomorrowTask, setTomorrowTask] = useState([]);
const [totalHours, setTotalHours] = useState(0);
const [currentDay] = useState(new Date());
const [loader, setLoader] = useState(false);
function getReportFromDate(day) {
setLoader(true);
setTaskText([]);
setDifficulties([]);
setTomorrowTask([]);
apiRequest(
`reports/find-by-date?user_card_id=${localStorage.getItem(
"cardId"
)}&date=${day}`
).then((res) => {
let spendTime = 0;
for (const item of res) {
if (item.difficulties) {
setDifficulties((prevArray) => [...prevArray, item.difficulties]);
}
if (item.tomorrow) {
setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
}
item.task.map((task) => {
const taskInfo = {
hours: task.hours_spent,
task: task.task,
id: task.id,
};
if (task.hours_spent) {
spendTime += Number(task.hours_spent);
}
setTaskText((prevArray) => [...prevArray, taskInfo]);
});
}
setTotalHours(spendTime);
setLoader(false);
});
previousReportDay.setDate(previousReportDay.getDate() - 1);
nextReportDay.setDate(nextReportDay.getDate() + 1);
}
function nextDay() {
getReportFromDate(getCreatedDate(nextReportDay));
previousReportDay.setDate(previousReportDay.getDate() + 2);
}
function previousDay() {
getReportFromDate(getCreatedDate(previousReportDay));
nextReportDay.setDate(nextReportDay.getDate() - 2);
}
useEffect(() => {
getReportFromDate(dateReport.id);
}, []);
return (
<div className="viewReport">
<ProfileHeader />
<Navigation />
<div className="container">
<div className="viewReport__info">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Ваша отчетность", link: "/profile/calendar" },
{ name: "Просмотр отчета за день", link: "/profile/view" },
]}
/>
<h2 className="viewReport__title">
Ваши отчеты - <span>просмотр отчета за день</span>
</h2>
<Link className="viewReport__back" to={`/profile/calendar`}>
<img src={arrow} alt="arrow" />
<p>Вернуться</p>
</Link>
<div className="viewReport__bar">
<h3 className="viewReport__bar__date">
{getCorrectDate(dateReport.id)}
</h3>
<p className="viewReport__bar__hours">
Вами потрачено на работу :{" "}
<span>
{totalHours} {hourOfNum(totalHours)}
</span>
</p>
</div>
</div>
<div className="viewReport__switchDate">
<div
onClick={() => {
previousDay();
}}
>
<Link to={`../view/${getCreatedDate(previousReportDay)}`}>
<div className="viewReport__switchDate__prev switchDate">
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
</div>
<p>{getCorrectDate(dateReport.id)}</p>
<div
onClick={() => nextDay()}
className={`${
getCreatedDate(currentDay) === dateReport.id ? "disable" : ""
}`}
>
<Link to={`../view/${getCreatedDate(nextReportDay)}`}>
<div className={`viewReport__switchDate__next switchDate`}>
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
</div>
</div>
{loader && <Loader width={75} height={75} />}
{Boolean(taskText.length) && (
<div className="viewReport__content">
<div className="table__container">
<table className="viewReport__done">
<thead>
<tr>
<th>
<p>Какие задачи были выполнены?</p>
</th>
<th>
<p>Время</p>
</th>
</tr>
</thead>
<tbody>
{taskText.length &&
taskText.map((task, index) => {
return (
<tr key={task.id}>
<td>
<p>
{index + 1}. {task.task}
</p>
</td>
<td>
<div className="viewReport__done__hours__item">
<span>{task.hours}</span>
<p className="hours">
{hourOfNum(task.hours)} на задачу
</p>
</div>
</td>
</tr>
);
})}
<tr>
<td></td>
<td>
<span>
Всего: {totalHours} {hourOfNum(totalHours)}
</span>
</td>
</tr>
</tbody>
</table>
</div>
{Boolean(difficulties.length) && (
<div className="viewReport__item">
<h3>Какие сложности возникли?</h3>
{difficulties.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</div>
)}
{Boolean(tomorrowTask.length) && (
<div className="viewReport__item">
<h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</div>
)}
</div>
)}
{!Boolean(taskText.length) && !loader && (
<div className="viewReport__noTask">
<p>
В этот день вы <span>не заполняли</span> отчет
</p>
</div>
)}
<Footer />
</div>
</div>
);
};

1
src/pages/code.txt
View File

@ -1 +0,0 @@
Hellow