From c2c57e3791c5b3dd49022021573ef3ac596394bc Mon Sep 17 00:00:00 2001 From: Mikola Date: Mon, 30 Oct 2023 01:35:06 +0300 Subject: [PATCH 1/2] 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 && } From 512a8c61212582e4f9a4802b5b54ff177c3749b6 Mon Sep 17 00:00:00 2001 From: Mikola Date: Mon, 30 Oct 2023 01:35:28 +0300 Subject: [PATCH 2/2] create task with tags --- .../Tracker/TrackerModal/TrackerModal.jsx | 107 ++++++++++++------ 1 file changed, 70 insertions(+), 37 deletions(-) diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 160f104d..0b893a2f 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -35,11 +35,11 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg"; import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg"; import arrowDown from "assets/icons/arrows/selectArrow.png"; +import close from "assets/icons/close.png"; import calendarImg from "assets/icons/createTaskCalendar.svg"; import avatarMok from "assets/images/avatarMok.png"; import "./trackerModal.scss"; -import close from "assets/icons/close.png"; registerLocale("ru", ru); @@ -52,7 +52,7 @@ export const TrackerModal = ({ projectId, priorityTask, projectUsers, - projectMarks + projectMarks, }) => { const dispatch = useDispatch(); const projectBoard = useSelector(getProjectBoard); @@ -80,7 +80,7 @@ export const TrackerModal = ({ const [correctProjectUsers, setCorrectProjectUsers] = useState([]); const [correctProjectTags, setCorrectProjectTags] = useState([]); const [taskTags, setTaskTags] = useState([]); - const [selectTagsOpen, setSelectTagsOpen] = useState(false) + const [selectTagsOpen, setSelectTagsOpen] = useState(false); const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = useState(false); const { showNotification } = useNotification(); @@ -146,10 +146,10 @@ export const TrackerModal = ({ data: { mark_id: taskTags[i].id, entity_type: 2, - entity_id: res.id + entity_id: res.id, }, }).then(() => { - setTaskTags([]) + setTaskTags([]); }); } if (selectedExecutorTask.user_id) { @@ -327,10 +327,10 @@ export const TrackerModal = ({ let tagIds = taskTags.map((tag) => tag.id); if (projectMarks) { setCorrectProjectTags( - projectMarks.reduce((acc, cur) => { - if (!tagIds.includes(cur.id)) acc.push(cur); - return acc; - }, []) + projectMarks.reduce((acc, cur) => { + if (!tagIds.includes(cur.id)) acc.push(cur); + return acc; + }, []) ); } }, [taskTags, projectMarks]); @@ -436,12 +436,12 @@ export const TrackerModal = ({

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

avatar
{/*Этап*/} @@ -486,39 +486,72 @@ export const TrackerModal = ({
-
-
+
+
{taskTags.map((tag) => { - return
-

{tag.slug}

- +

{tag.slug}

+ delete setTaskTags((prevState) => prevState.filter((prevTag) => prevTag.id !== tag.id))} - /> -
- }) - } + onClick={() => + setTaskTags((prevState) => + prevState.filter( + (prevTag) => prevTag.id !== tag.id + ) + ) + } + /> +
+ ); + })}
-
setSelectTagsOpen(!selectTagsOpen)}> +
setSelectTagsOpen(!selectTagsOpen)} + > Выберете тег - arrow + arrow
- {selectTagsOpen && -
- setSelectTagsOpen(false)}/> - {correctProjectTags.map((tag) => { - return
setTaskTags((prevState) => ([...prevState, tag]))}> + {selectTagsOpen && ( +
+ setSelectTagsOpen(false)} + /> + {correctProjectTags.map((tag) => { + return ( +
+ setTaskTags((prevState) => [...prevState, tag]) + } + >

{tag.slug}

- }) - } - {Boolean(!correctProjectTags.length) &&

Нет тегов

} -
- } + ); + })} + {Boolean(!correctProjectTags.length) && ( +

Нет тегов

+ )} +
+ )}