From c155462ab4d40491d5e56b94b8a78a0a1b665828 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 2 Oct 2023 18:10:40 +0300 Subject: [PATCH 1/5] Fixed project cart --- src/assets/icons/addProjectImg.svg | 10 +++ src/components/ProjectTiket/ProjectTiket.jsx | 9 ++- src/components/ProjectTiket/projectTiket.scss | 34 +++++++--- src/pages/Tracker/Tracker.js | 25 ++++---- src/pages/Tracker/tracker.scss | 64 +++++++------------ 5 files changed, 81 insertions(+), 61 deletions(-) create mode 100644 src/assets/icons/addProjectImg.svg diff --git a/src/assets/icons/addProjectImg.svg b/src/assets/icons/addProjectImg.svg new file mode 100644 index 00000000..140d57b8 --- /dev/null +++ b/src/assets/icons/addProjectImg.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx index 7b2f4f59..87c2fc58 100644 --- a/src/components/ProjectTiket/ProjectTiket.jsx +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -16,6 +16,7 @@ import archiveSet from "assets/icons/archive.svg"; import del from "assets/icons/delete.svg"; import edit from "assets/icons/edit.svg"; import link from "assets/icons/link.svg"; +import avatarProject from "assets/images/avatarMok.png"; import "./projectTiket.scss"; @@ -74,7 +75,9 @@ export const ProjectTiket = ({ project, index }) => { return (
- {project.name} + + {project.name} +

Открытые задачи

@@ -84,10 +87,14 @@ export const ProjectTiket = ({ project, index }) => { 0 )} + # setModalSelect(true)}> ...
+ + Просмотреть статистику + { setModalCreateProject(true); }} > - +Создать проект + # +

+ Ставьте задачи, следите за прогрессом, ведите учёт + рабочего времени +

-

- Ставьте задачи, следите за прогрессом, ведите учёт рабочего - времени -

)} {Boolean(projects.length) && !loader && ( -
+ <> { @@ -223,13 +224,13 @@ export const Tracker = () => { setModalCreateProject(true); }} > - +Создать проект + # +

+ Ставьте задачи, следите за прогрессом, ведите учёт рабочего + времени +

-

- Ставьте задачи, следите за прогрессом, ведите учёт рабочего - времени -

-
+ )}
Date: Mon, 2 Oct 2023 21:26:06 +0300 Subject: [PATCH 2/5] Added new page statistics --- src/App.js | 3 + src/components/ProjectTiket/ProjectTiket.jsx | 5 +- src/pages/Statistics/Statistics.jsx | 90 ++++++++++++++++++++ src/pages/Statistics/statistics.scss | 19 +++++ 4 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 src/pages/Statistics/Statistics.jsx create mode 100644 src/pages/Statistics/statistics.scss diff --git a/src/App.js b/src/App.js index 4c774b32..6c0d0e6b 100644 --- a/src/App.js +++ b/src/App.js @@ -43,6 +43,7 @@ import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/Regis import { ProfileCandidate } from "./pages/ProfileCandidate/ProfileCandidate"; import { PassingTests } from "./pages/quiz/PassingTests"; import Blog from "./pages/Blog/Blog"; +import Statistics from "@pages/Statistics/Statistics"; import { ProjectTracker } from "./pages/ProjectTracker/ProjectTracker"; import { FrequentlyAskedQuestions } from "./pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions"; import { FrequentlyAskedQuestion } from "./pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion"; @@ -53,6 +54,7 @@ import "./assets/global.scss"; import "./assets/fonts/stylesheet.css"; import "bootstrap/dist/css/bootstrap.min.css"; + const App = () => { const notification = useSelector(getNotification) return ( @@ -118,6 +120,7 @@ const App = () => { } /> } /> } /> + }/> } /> } /> } /> diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx index 87c2fc58..9d1c5b48 100644 --- a/src/components/ProjectTiket/ProjectTiket.jsx +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -92,7 +92,10 @@ export const ProjectTiket = ({ project, index }) => { ...
- + Просмотреть статистику diff --git a/src/pages/Statistics/Statistics.jsx b/src/pages/Statistics/Statistics.jsx new file mode 100644 index 00000000..abf907a9 --- /dev/null +++ b/src/pages/Statistics/Statistics.jsx @@ -0,0 +1,90 @@ +import React from "react"; +import { useDispatch } from "react-redux"; +import { Link } from "react-router-dom"; + +import { setToggleTab } from "@redux/projectsTrackerSlice"; + +import { Navigation } from "@components/Navigation/Navigation"; +import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; +import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; + +import arrow from "assets/icons/arrows/arrowCalendar.png"; +import link from "assets/icons/link.svg"; +import project from "assets/icons/trackerProject.svg"; +import tasks from "assets/icons/trackerTasks.svg"; +import archive from "assets/images/archiveIcon.png"; + +import "./statistics.scss"; + +const Statistics = () => { + const dispatch = useDispatch(); + + const toggleTabs = (index) => { + dispatch(setToggleTab(index)); + }; + return ( +
+ + +
+
+ +

Управление проектами с трекером

+
+
+
+
+ toggleTabs(1)} + > + img +

Проекты

+ + toggleTabs(2)} + > + img +

Все мои задачи

+ + toggleTabs(3)} + > + img +

Архив

+ +
+
+
+
+
+

Статистика проекта

+ # + ссылка на проект +
+ +
+ # + вернуться на все проекты +
+
+
+
+
+
+
+
+ ); +}; + +export default Statistics; diff --git a/src/pages/Statistics/statistics.scss b/src/pages/Statistics/statistics.scss new file mode 100644 index 00000000..69744434 --- /dev/null +++ b/src/pages/Statistics/statistics.scss @@ -0,0 +1,19 @@ +.statistics { + background: #f1f1f1; + height: 100%; + min-height: 100vh; + font-family: "LabGrotesque", sans-serif; + position: relative; + + &-header { + display: flex; + + &__return { + img { + width: 19px; + height: 19px; + transform: rotate(-180deg); + } + } + } +} From 986c0833f7a17aba0787dd418b655e5fd192a47e Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 3 Oct 2023 18:03:32 +0300 Subject: [PATCH 3/5] Finish page statistics --- src/assets/icons/emailStatistics.svg | 3 + src/pages/Statistics/Statistics.jsx | 119 +++++++++++++- src/pages/Statistics/statistics.scss | 224 +++++++++++++++++++++++++++ 3 files changed, 342 insertions(+), 4 deletions(-) create mode 100644 src/assets/icons/emailStatistics.svg diff --git a/src/assets/icons/emailStatistics.svg b/src/assets/icons/emailStatistics.svg new file mode 100644 index 00000000..685b4607 --- /dev/null +++ b/src/assets/icons/emailStatistics.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Statistics/Statistics.jsx b/src/pages/Statistics/Statistics.jsx index abf907a9..71ef9770 100644 --- a/src/pages/Statistics/Statistics.jsx +++ b/src/pages/Statistics/Statistics.jsx @@ -9,16 +9,49 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import arrow from "assets/icons/arrows/arrowCalendar.png"; +import emailImg from "assets/icons/emailStatistics.svg"; import link from "assets/icons/link.svg"; import project from "assets/icons/trackerProject.svg"; import tasks from "assets/icons/trackerTasks.svg"; import archive from "assets/images/archiveIcon.png"; +import mockAvatar from "assets/images/mock/AvatarTest .png"; import "./statistics.scss"; const Statistics = () => { const dispatch = useDispatch(); + const teams = [ + { + avatar: mockAvatar, + name: "Дмитрий Рогов", + email: "dmitryi.zavadskyi@yandex.ru", + role: "Программист", + status: true, + }, + { + avatar: mockAvatar, + name: "Марина Орехова", + email: "dmitryi.zavadskyi@yandex.ru", + role: "Менеджер", + status: true, + }, + { + avatar: mockAvatar, + name: "Тамара Доценко", + email: "dmitryi.zavadskyi@yandex.ru51515188151", + role: "Тестировщик", + status: false, + }, + { + avatar: mockAvatar, + name: "Кек Лолов", + email: "dm4124gmail.com", + role: "PM", + status: false, + }, + ]; + const toggleTabs = (index) => { dispatch(setToggleTab(index)); }; @@ -70,16 +103,94 @@ const Statistics = () => {

Статистика проекта

# - ссылка на проект + ссылка на проект
# - вернуться на все проекты + + + вернуться на все проекты + +
+ +
+
+

Проект:

+

{"Разработка трекера"}

+
+
+
+
+ Создатель проекта: +
+

{"Василий Тарасов"}

{" "} + # +
+
+
+
+

Открытые задачи

+ {4} +
+
+

Задач в работе

+ {5} +
+
+

Закрыто задач

+ {434} +
+
+
+
+
+ Участники проекта: +
+
+

Имя

+

Почта

+

Роль

+

Статус

+
+
+ {teams.map((item) => { + return ( + <> +
+
+ # +

{item.name}

+
+
+ # +

{item.email}

+
+ +

{item.role}

+ {/* */} + + + {item.status ? "Активно" : "Не активно"} + +
+ + ); + })} +
+
+
+ + +

Добавить участников

+
-
-
diff --git a/src/pages/Statistics/statistics.scss b/src/pages/Statistics/statistics.scss index 69744434..6bd4fb83 100644 --- a/src/pages/Statistics/statistics.scss +++ b/src/pages/Statistics/statistics.scss @@ -7,13 +7,237 @@ &-header { display: flex; + justify-content: space-between; + margin: 15px 0 0 0; &__return { img { width: 19px; height: 19px; transform: rotate(-180deg); + margin-right: 22px; + } + } + + &__menu { + display: flex; + align-items: center; + + h1 { + color: #678eda; + margin: 0 158px 0 0; + font-size: 23px; + font-weight: 700; + line-height: 17px; + } + + span { + margin-left: 17px; } } } + + &-info { + margin-top: 35px; + + &__head { + display: flex; + align-items: center; + height: 56px; + border-radius: 12px; + background: #f1f1f1; + padding-left: 31px; + + p { + color: #5b6871; + font-size: 14px; + } + + h1 { + color: #111112; + font-size: 22px; + margin: 0 0 0 21px; + } + } + + &__team { + .project-info { + display: flex; + justify-content: space-between; + padding: 30px; + + &__creator { + display: flex; + flex-direction: column; + + div { + display: flex; + align-items: center; + + p { + color: #2d4a17; + font-size: 18px; + font-weight: 500; + line-height: 32px; + margin-right: 19px; + } + } + } + + &__tasks { + display: flex; + gap: 37px; + + .task-quantity { + display: flex; + align-items: center; + + height: 53px; + gap: 8px; + + p { + color: #6f6f6f; + width: 61px; + font-size: 12px; + font-weight: 500; + line-height: 17px; + } + + span { + height: 53px; + display: flex; + align-items: center; + padding: 0 12px 0 12px; + border-radius: 4px; + color: #6f6f6f; + font-size: 33px; + font-weight: 500; + } + + &_open { + background: #ddd; + } + + &_work { + background: #e1fccf; + } + + &_closed { + color: #fff !important; + background: #6e7c87; + } + } + } + } + + .list-team { + padding: 0 30px; + + &__title { + padding: 0 0 10px 0; + border-bottom: 2px solid #f1f1f1; + margin-bottom: 23px; + } + &__head { + display: flex; + justify-content: space-between; + margin-right: 123px; + + p { + color: #5b6871; + font-size: 12px; + } + } + + &__item { + margin-right: 55px; + display: flex; + align-items: center; + justify-content: space-between; + color: #000; + font-size: 15px; + padding: 23px 0; + + .person { + &-name { + display: flex; + align-items: center; + width: 202px; + img { + margin-right: 10px; + } + } + + &-email { + width: 235px; + align-items: center; + display: flex; + + img { + margin-right: 20px; + } + + p { + word-break: break-all; + } + } + + &-type { + width: 168px; + } + } + + .status { + border-radius: 34px; + font-size: 15px; + width: 152px; + height: 34px; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + + &-active { + background: #52b709; + } + + &-none { + background: #6e7c87; + } + } + } + } + + .add-person { + padding: 20px 30px 70px 30px; + display: flex; + align-items: center; + width: fit-content; + + &__button { + cursor: pointer; + background: #8bcc60; + width: 33.5px; + height: 36px; + color: white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 55px; + } + + p { + margin-left: 24px; + color: #000; + font-size: 16px; + font-weight: 700; + } + } + } + } + + .return-text { + color: #5b6871; + font-size: 14px; + } } From aba12694bf3502ad026e547c0f6e9667a89bdc7c Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 3 Oct 2023 18:26:07 +0300 Subject: [PATCH 4/5] Fixed statistics page --- src/components/ProjectTiket/ProjectTiket.jsx | 10 +++------- src/pages/Statistics/Statistics.jsx | 6 +++++- src/pages/Statistics/statistics.scss | 17 +++++++++++++++++ src/utils/helper.js | 6 ++++++ 4 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx index 9d1c5b48..497677ef 100644 --- a/src/components/ProjectTiket/ProjectTiket.jsx +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -4,6 +4,8 @@ import { Link } from "react-router-dom"; import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice"; +import { copyProjectLink } from "@utils/helper"; + import { apiRequest } from "@api/request"; import { useNotification } from "@hooks/useNotification"; @@ -63,12 +65,6 @@ export const ProjectTiket = ({ project, index }) => { }); } - function copyProjectLink() { - navigator.clipboard.writeText( - `https://itguild.info/tracker/project/${project.id}` - ); - } - function closeAcceptModal() { setAcceptModalOpen(false); } @@ -120,7 +116,7 @@ export const ProjectTiket = ({ project, index }) => {
-

ссылка на проект

+

ссылка на проект

{ diff --git a/src/pages/Statistics/Statistics.jsx b/src/pages/Statistics/Statistics.jsx index 71ef9770..8f9e67d8 100644 --- a/src/pages/Statistics/Statistics.jsx +++ b/src/pages/Statistics/Statistics.jsx @@ -4,6 +4,8 @@ import { Link } from "react-router-dom"; import { setToggleTab } from "@redux/projectsTrackerSlice"; +import { copyProjectLink } from "@utils/helper"; + import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; @@ -103,7 +105,9 @@ const Statistics = () => {

Статистика проекта

# - ссылка на проект + + ссылка на проект +
diff --git a/src/pages/Statistics/statistics.scss b/src/pages/Statistics/statistics.scss index 6bd4fb83..35c4b0ce 100644 --- a/src/pages/Statistics/statistics.scss +++ b/src/pages/Statistics/statistics.scss @@ -17,6 +17,16 @@ transform: rotate(-180deg); margin-right: 22px; } + + a { + cursor: pointer; + transition: 0.4s; + + &:hover { + text-decoration: underline !important; + transition: 0.4s; + } + } } &__menu { @@ -33,6 +43,13 @@ span { margin-left: 17px; + cursor: pointer; + transition: 0.4s; + + &:hover { + text-decoration: underline; + transition: 0.4s; + } } } } diff --git a/src/utils/helper.js b/src/utils/helper.js index d530919e..c4547a65 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -79,3 +79,9 @@ export function caseOfNum(number, type) { : cases[number % 10 < 5 ? number % 10 : 5] ]; } + +export function copyProjectLink(projectId) { + navigator.clipboard.writeText( + `https://itguild.info/tracker/project/${projectId}` + ); +} From a604824f84630764858a69208454aa1d9dd04d3c Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 5 Oct 2023 18:49:16 +0300 Subject: [PATCH 5/5] Mobile adaptation --- src/pages/Statistics/statistics.scss | 141 +++++++++++++++++++++++++++ src/pages/Tracker/tracker.scss | 1 + 2 files changed, 142 insertions(+) diff --git a/src/pages/Statistics/statistics.scss b/src/pages/Statistics/statistics.scss index 35c4b0ce..23ca8752 100644 --- a/src/pages/Statistics/statistics.scss +++ b/src/pages/Statistics/statistics.scss @@ -27,6 +27,19 @@ transition: 0.4s; } } + + @media (max-width: 850px) { + display: flex; + align-items: center; + + img { + margin-right: 10px; + } + } + + @media (max-width: 425px) { + display: none; + } } &__menu { @@ -51,6 +64,29 @@ transition: 0.4s; } } + + @media (max-width: 850px) { + h1 { + margin: 0 15px 0 5px; + } + + span { + margin-left: 10px; + } + } + + @media (max-width: 425px) { + padding: 0 20px; + + h1 { + margin: 0; + line-height: 22px; + } + + span { + margin: 10px; + } + } } } @@ -75,6 +111,10 @@ font-size: 22px; margin: 0 0 0 21px; } + + @media (max-width: 425px) { + padding: 0 15px; + } } &__team { @@ -144,6 +184,33 @@ background: #6e7c87; } } + + @media (max-width: 850px) { + justify-content: space-around; + } + + @media (max-width: 650px) { + margin-top: 10px; + padding: 0; + gap: 20px; + } + + @media (max-width: 425px) { + margin-top: 25px; + flex-direction: column; + flex-wrap: wrap; + align-items: center; + gap: 15px; + } + } + + @media (max-width: 850px) { + flex-direction: column; + padding: 15px; + } + + @media (max-width: 425px) { + flex-direction: column; } } @@ -154,7 +221,16 @@ padding: 0 0 10px 0; border-bottom: 2px solid #f1f1f1; margin-bottom: 23px; + + @media (max-width: 650px) { + border-bottom: 2px solid #b5b5b5a8; + } + + @media (max-width: 425px) { + margin: 0; + } } + &__head { display: flex; justify-content: space-between; @@ -164,6 +240,15 @@ color: #5b6871; font-size: 12px; } + + @media (max-width: 850px) { + padding: 0px 80px 0 80px; + margin: 0; + } + + @media (max-width: 650px) { + display: none; + } } &__item { @@ -202,6 +287,26 @@ &-type { width: 168px; } + + @media (max-width: 850px) { + &-name { + width: 115px; + } + + &-type { + width: 100px; + } + } + + @media (max-width: 650px) { + &-name { + width: auto; + } + + &-type { + width: auto; + } + } } .status { @@ -221,6 +326,38 @@ &-none { background: #6e7c87; } + + @media (max-width: 850px) { + width: 120px; + } + } + + @media (max-width: 850px) { + margin: 0; + gap: 10px; + } + + @media (max-width: 650px) { + margin: 0; + flex-direction: column; + justify-content: center; + gap: 10px; + } + } + + &__body { + @media (max-width: 850px) { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + } + + @media (max-width: 650px) { + padding: 0px 15px; + + &__body { + gap: 25px; } } } @@ -251,6 +388,10 @@ } } } + + @media (max-width: 850px) { + padding: 0 15px; + } } .return-text { diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 572f2b40..7ba44dba 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -205,6 +205,7 @@ @media (max-width: 650px) { height: 40px; font-size: 12px; + height: 166px; } } }