From c2c57e3791c5b3dd49022021573ef3ac596394bc Mon Sep 17 00:00:00 2001 From: Mikola Date: Mon, 30 Oct 2023 01:35:06 +0300 Subject: [PATCH] create task with tags --- .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 2 +- .../TicketFullScreen/TicketFullScreen.jsx | 2 +- .../Tracker/TrackerModal/TrackerModal.jsx | 92 +++++++++++-- .../Tracker/TrackerModal/trackerModal.scss | 122 +++++++++++++++++- src/pages/ProjectTracker/ProjectTracker.js | 1 + 5 files changed, 202 insertions(+), 17 deletions(-) diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index c5055a9f..c962ad91 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -933,7 +933,7 @@ export const ModalTiсket = ({ className="tags__select" onClick={() => setSelectTagsOpen(!selectTagsOpen)} > - Выберите тег + Выберете тег { className="tags__select" onClick={() => setSelectTagsOpen(!selectTagsOpen)} > - Выберите тег + Выберете тег { const dispatch = useDispatch(); const projectBoard = useSelector(getProjectBoard); @@ -76,6 +78,9 @@ export const TrackerModal = ({ ); const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false); const [correctProjectUsers, setCorrectProjectUsers] = useState([]); + const [correctProjectTags, setCorrectProjectTags] = useState([]); + const [taskTags, setTaskTags] = useState([]); + const [selectTagsOpen, setSelectTagsOpen] = useState(false) const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = useState(false); const { showNotification } = useNotification(); @@ -135,6 +140,18 @@ export const TrackerModal = ({ type: "error", }); } else { + for (let i = 0; i < taskTags.length; i++) { + apiRequest("/mark/attach", { + method: "POST", + data: { + mark_id: taskTags[i].id, + entity_type: 2, + entity_id: res.id + }, + }).then(() => { + setTaskTags([]) + }); + } if (selectedExecutorTask.user_id) { apiRequest("/task/update-task", { method: "PUT", @@ -306,6 +323,18 @@ export const TrackerModal = ({ } }, [active]); + useEffect(() => { + let tagIds = taskTags.map((tag) => tag.id); + if (projectMarks) { + setCorrectProjectTags( + projectMarks.reduce((acc, cur) => { + if (!tagIds.includes(cur.id)) acc.push(cur); + return acc; + }, []) + ); + } + }, [taskTags, projectMarks]); + return (
- Этап -
- Backlog - arrow +
+

Создатель : {profileInfo?.fio}

+ avatar
+ {/*Этап*/} + {/*
*/} + {/* Backlog*/} + {/* arrow*/} + {/*
*/}
@@ -445,16 +485,40 @@ export const TrackerModal = ({ />
-
-

Создатель : {profileInfo?.fio}

- avatar +
+
+
+ {taskTags.map((tag) => { + return
+

{tag.slug}

+ delete setTaskTags((prevState) => prevState.filter((prevTag) => prevTag.id !== tag.id))} + /> +
+ }) + } +
+
setSelectTagsOpen(!selectTagsOpen)}> + Выберете тег + arrow +
+
+ {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 && }