From 8b170fe43dec469988ab36b019080ab9a0d06e3d Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 20 Oct 2023 19:15:04 +0300 Subject: [PATCH 1/3] new design tasks --- src/assets/icons/filterIcon.svg | 3 + src/pages/Tracker/Tracker.jsx | 82 ++++++++++++++++- src/pages/Tracker/tracker.scss | 152 +++++++++++++++++++++++++++++++- 3 files changed, 234 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/filterIcon.svg diff --git a/src/assets/icons/filterIcon.svg b/src/assets/icons/filterIcon.svg new file mode 100644 index 00000000..5df49a34 --- /dev/null +++ b/src/assets/icons/filterIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index 4075fcfd..db011d83 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -26,6 +26,7 @@ import ProjectTiket from "@components/ProjectTiket/ProjectTiket"; import addProjectImg from "assets/icons/addProjectImg.svg"; import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg"; import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg"; +import filterIcon from "assets/icons/filterIcon.svg"; import search from "assets/icons/serchIcon.png"; import project from "assets/icons/trackerProject.svg"; import tasks from "assets/icons/trackerTasks.svg"; @@ -246,7 +247,25 @@ export const Tracker = () => { } >
-

Список всех задач

+
+
+

+ {25} - {35} +

+

Сентября,

+

2023

+
+ +
+ + +
+
+
search { onChange={(event) => filterAllTask(event)} />
+ +
+ + # +

Фильтр

+ + +

Очистить фильтр

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗадачаСтатусПотраченное времяДата началаДедлайн
+
+ Разработка трекера # +
+
+

Проект:

+

Туман

+
+ 		+
In Progress
+ 		14ч 25 мин13.09.202020.09.2020
+
+ Разработка трекера # +
+
+

Проект:

+

Туман

+
+ 		+
In Progress
+ 		14ч 25 мин13.09.202020.09.2020
+ {loader && } {!loader && (
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index f1312308..cdbc777b 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -1184,7 +1184,7 @@ } &__search { - margin-left: auto; + // margin-left: auto; padding: 6px 12px; display: flex; align-items: center; @@ -1192,7 +1192,7 @@ border: 1px solid #dde2e4; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 6px; - max-width: 450px; + max-width: 300px; width: 100%; &:focus-within { @@ -1224,6 +1224,154 @@ } } + &__tasks-period { + display: flex; + align-items: center; + gap: 25px; + + .buttons-month { + display: flex; + gap: 34px; + + button { + width: 30px; + height: 30px; + background-color: #8dc63f; + border-radius: 15px; + border: none; + + img { + width: 14px; + height: 14px; + } + + &:first-child { + transform: rotate(-180deg); + } + } + } + + .month-period { + display: flex; + flex-direction: row; + align-items: center; + + p { + color: #1458dd; + font-size: 33px; + font-style: normal; + font-weight: 700; + line-height: 32px; + margin-right: 50px; + } + + h3 { + color: #252c32; + font-size: 18px; + font-weight: 700; + margin-left: 5px; + } + } + } + + &__filters { + display: flex; + gap: 10px; + font-size: 12px; + + &-filter { + width: 116px; + height: 40px; + + img { + margin-right: 14px; + } + } + + &-clear { + width: 151px; + height: 40px; + background: #b0babf; + } + } + + &__table { + margin-top: 20px; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 32px; + + thead { + height: 65px; + background: #f1f1f1; + color: #5b6871; + + th { + &:first-child { + padding-left: 10px; + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + } + &:last-child { + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; + } + } + } + + tbody { + color: #000; + td { + height: 65px; + border-bottom: 1px solid rgba(241, 241, 241, 1); + + &:first-child { + max-width: 275px; + + color: #111112; + font-size: 17px; + font-weight: 700; + } + } + + .task-status { + width: 130px; + border: 1px solid #52b709; + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; + color: #000; + font-size: 14px; + font-weight: 400; + } + } + + &__title-task { + } + + &__name-project { + display: none; + flex-direction: column; + + h4 { + margin: 0; + color: #807777; + font-size: 10px; + font-weight: 500; + line-height: 24px; + } + + p { + color: #000; + font-size: 14px; + font-weight: 400; + line-height: 32px; + } + } + } + &__wrapper { margin-top: 10px; display: flex; From 66f815f4f02ddf33921e878458e4dc46f47ab653 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 23 Oct 2023 16:42:12 +0300 Subject: [PATCH 2/3] Update my task --- src/assets/images/downloadExel.svg | 12 ++ src/assets/images/statusTimeTask.svg | 12 ++ src/pages/Tracker/Tracker.jsx | 164 ++++++++++++++++----------- src/pages/Tracker/tracker.scss | 138 +++++++++++++++++++++- 4 files changed, 255 insertions(+), 71 deletions(-) create mode 100644 src/assets/images/downloadExel.svg create mode 100644 src/assets/images/statusTimeTask.svg diff --git a/src/assets/images/downloadExel.svg b/src/assets/images/downloadExel.svg new file mode 100644 index 00000000..e2b10ca2 --- /dev/null +++ b/src/assets/images/downloadExel.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/statusTimeTask.svg b/src/assets/images/statusTimeTask.svg new file mode 100644 index 00000000..34d66a32 --- /dev/null +++ b/src/assets/images/statusTimeTask.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index db011d83..fb615197 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -27,13 +27,15 @@ import addProjectImg from "assets/icons/addProjectImg.svg"; import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg"; import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg"; import filterIcon from "assets/icons/filterIcon.svg"; +import plus from "assets/icons/plus.svg"; import search from "assets/icons/serchIcon.png"; 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/avatarMok.png"; -import avatarMok from "assets/images/avatarMok.png"; +import downloadExel from "assets/images/downloadExel.svg"; import noProjects from "assets/images/noProjects.png"; +import statusTimeTask from "assets/images/statusTimeTask.svg"; import "./tracker.scss"; @@ -123,6 +125,14 @@ export const Tracker = () => { ); } + function toggleDescTask(e) { + e.target.closest("img").classList.toggle("open-desc-item"); + e.target + .closest("td") + .querySelector(".taskList__table__name-project") + .classList.toggle("hide-desc"); + } + return (
@@ -286,6 +296,7 @@ export const Tracker = () => {
+ {loader && } @@ -298,78 +309,93 @@ export const Tracker = () => { - - - - - - - - - - - - - - - + {!loader && ( + <> + {Boolean(filteredAllTasks.length) && + filteredAllTasks.map((task, index) => { + return ( + + + + + + + + ); + })} + + )}
-
- Разработка трекера # -
-
-

Проект:

-

Туман

-
- 		-
In Progress
- 		14ч 25 мин13.09.202020.09.2020
-
- Разработка трекера # -
-
-

Проект:

-

Туман

-
- 		-
In Progress
- 		14ч 25 мин13.09.202020.09.2020
+
+ {task.title} +
{ + toggleDescTask(e); + }} + > + # +
+
+
+

Проект:

+

+ {projects.map((project) => { + if (project.id == task.project_id) { + return project.name; + } + })} +

+
+ 		+
+ {task.status == 1 ? "Active" : "Close"} +
+ 		+ {task.timers.map((item) => { + let time = new Date(item.deltaSeconds * 1000) + .toISOString() + .slice(11, 19); + return `${time}`; + })} + + {new Date(task.created_at).toLocaleDateString()} + + {new Date(task.dead_line).toLocaleDateString()} +
- {loader && } - {!loader && ( -
- {Boolean(filteredAllTasks.length) && - filteredAllTasks.map((task) => { - return ( -
-
-
{task.title}
-

-

-
- avatar -
-

{task.user.fio}

- {getCorrectDate(task.created_at)} -
-
-
- ); - })} +
+
+

Учет моего рабочего времени за день

+

+ Задач выполнено:

{2}

+

- )} +
+

Общее время:

+

{"4 ч 34 мин"}

+
+
+
+ # +

Сверка пройдена

+
+
+ # +

Скачать Exel отчет

+
+
+
+ +
+ + Закрыть сегоднящний день + +

+ Нажимая кнопку - “Закрыть сегодняшний день” - вы отправляете + потрачеенное время на сверку +

+
Date: Mon, 23 Oct 2023 17:26:47 +0300 Subject: [PATCH 3/3] Fixed archive --- src/pages/Tracker/Tracker.jsx | 109 ++++++++++++++++++--------------- src/pages/Tracker/tracker.scss | 70 +++++++++++++++------ 2 files changed, 108 insertions(+), 71 deletions(-) diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index fb615197..3020d102 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -436,58 +436,65 @@ export const Tracker = () => {
-
-

Задача

-

Потраченное время

-

Дата окончания

-
+ {loader && } + + + + + + + + -
- {loader && } - {!loader && ( - <> - {Boolean(filterCompleteTasks.length) ? ( - filterCompleteTasks.map((task, index) => { - return ( -
-
-

- {task.title} -

-

-

-
-

- {task.timers.map((item) => { - let time = new Date(item.deltaSeconds * 1000) - .toISOString() - .slice(11, 19); - return `${time}`; - })} -

-
-
-
- {/*Проект*/} -

{getCorrectDate(task.updated_at)}

-
-
-
- ); - }) - ) : ( -
-

В данном месяце у вас не было задач

-
- )} - - )} -
+ + {!loader && ( + <> + {Boolean(filterCompleteTasks.length) ? ( + filterCompleteTasks.map((task, index) => { + return ( + + + + + + ); + }) + ) : ( +
+

В данном месяце у вас не было задач

+
+ )} + + )} + +
ЗадачаПотраченное времяДата окончания
+

+ {task.title} +

+

+

+

+ {task.timers.length == 0 + ? "-" + : task.timers.map((item) => { + let time = new Date( + item.deltaSeconds * 1000 + ) + .toISOString() + .slice(11, 19); + return `${time}`; + })} +

+ 		+
+

{getCorrectDate(task.updated_at)}

+
+
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 0dab2fa3..e55484fe 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -1672,21 +1672,58 @@ @media (max-width: 450px) { flex-wrap: wrap; } + } - &-table { - margin: 29px 0 0 0; - height: 67px; - display: flex; - align-items: center; - justify-content: space-between; + &__table { + margin: 29px 0 0 0; + height: 67px; + width: 100%; + font-size: 14px; + font-weight: 400; + + thead { background: #f1f1f1; color: #5b6871; - font-size: 14px; - font-weight: 400; border-radius: 12px; - padding-left: 15px; - padding-right: 15px; - margin-right: -6px; + height: 65px; + background: #f1f1f1; + color: #5b6871; + + th { + &:first-child { + padding-left: 10px; + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + } + &:last-child { + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; + } + } + } + + tbody { + color: #000; + tr { + background-color: white; + + &:nth-child(2n) { + background-color: rgba(241, 241, 241, 0.23); + } + } + + td { + height: 65px; + border-bottom: 1px solid rgba(241, 241, 241, 1); + + &:first-child { + max-width: 275px; + padding-left: 10px; + color: #111112; + font-size: 17px; + font-weight: 700; + } + } } } @@ -1727,17 +1764,10 @@ justify-content: space-between; align-items: center; cursor: pointer; - transition: all 0.3s ease; background: #f1f1f1; border-radius: 12px; padding: 12px 15px 7px 16px; - &:hover { - transform: scale(0.99); - box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11); - transition: 0.4s; - } - p { max-width: 420px; overflow: hidden; @@ -1819,8 +1849,8 @@ } &__description { - width: 70px; - max-width: 70px; + width: 270px; + max-width: 270px; font-size: 14px; font-weight: 500;