-
Создатель : {profileInfo?.fio}
-
+
+
+
+ {taskTags.map((tag) => {
+ return
+
{tag.slug}
+
setTaskTags((prevState) => prevState.filter((prevTag) => prevTag.id !== tag.id))}
+ />
+
+ })
+ }
+
+
setSelectTagsOpen(!selectTagsOpen)}>
+ Выберете тег
+
+
+
+ {selectTagsOpen &&
+
+
setSelectTagsOpen(false)}/>
+ {correctProjectTags.map((tag) => {
+ return
setTaskTags((prevState) => ([...prevState, tag]))}>
+
{tag.slug}
+
+
+ })
+ }
+ {Boolean(!correctProjectTags.length) &&
Нет тегов
}
+
+ }
diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
index 76e26246..2f7bd14e 100644
--- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
@@ -357,7 +357,6 @@
display: flex;
align-items: center;
column-gap: 9.5px;
- margin-bottom: 30px;
p {
color: #2D4A17;
font-size: 14px;
@@ -371,6 +370,127 @@
}
}
+ &__tags {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+
+ .tags {
+ &__selected {
+ width: 393px;
+ font-weight: 300;
+ line-height: 18px;
+ font-size: 15px;
+ margin-bottom: 17.5px;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+
+ &__name {
+ cursor: pointer;
+ display: flex;
+ justify-content: space-between;
+ padding: 5px;
+ border-radius: 8px;
+ border: 1px solid #e4e4e4;
+
+ img {
+ transition: all 0.3s ease;
+ }
+
+ .arrow--open {
+ transform: rotate(180deg);
+ }
+ }
+
+ &__items {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0;
+ width: 100%;
+ gap: 8px;
+ max-width: 393px;
+
+ .selectedTag {
+ display: flex;
+ padding: 3px 5px 3px 8px;
+ border-radius: 8px;
+ align-items: center;
+ column-gap: 8px;
+
+ p {
+ font-weight: 600;
+ font-size: 15px;
+ margin: 0;
+ line-height: 15px;
+ color: white;
+ }
+
+ .delete {
+ cursor: pointer;
+ width: 12px;
+ height: 12px;
+ }
+ }
+ }
+ }
+
+ &__dropDown {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ position: absolute;
+ border-radius: 8px;
+ border: 1px solid #e4e4e4;
+ top: 90%;
+ z-index: 101;
+ padding: 20px 10px 10px;
+ background: white;
+ row-gap: 8px;
+
+ .close {
+ position: absolute;
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ right: 5px;
+ top: 0;
+ }
+
+ .tag__item {
+ display: flex;
+ width: 100%;
+ cursor: pointer;
+ column-gap: 8px;
+ padding: 5px;
+ border: 1px solid #ececec;
+ border-radius: 8px;
+ justify-content: space-between;
+
+ p {
+ font-size: 18px;
+ font-weight: 500;
+ margin: 0;
+ line-height: 20px;
+ text-decoration: none;
+ }
+
+ span {
+ width: 18px;
+ height: 18px;
+ border-radius: 50px;
+ }
+ }
+
+ .noTags {
+ text-align: center;
+ font-size: 18px;
+ }
+ }
+ }
+ }
+
.select__executor {
background: #F1F1F1;
width: 393px;
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 20b13c89..25d95d23 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -469,6 +469,7 @@ export const ProjectTracker = () => {
selectedTab={selectedTab}
priorityTask={priorityTask}
projectUsers={projectBoard.projectUsers}
+ projectMarks={projectBoard.mark}
/>
{loader && }