diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 8950a8bc..7c24717b 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -38,6 +38,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrowStart from "assets/icons/arrows/arrowStart.png"; +import arrowDown from "assets/icons/arrows/selectArrow.png"; import calendarIcon from "assets/icons/calendar.svg"; import close from "assets/icons/close.png"; import fileDelete from "assets/icons/closeProjectPersons.svg"; @@ -88,6 +89,9 @@ export const TicketFullScreen = () => { const [uploadedFile, setUploadedFile] = useState(null); const [taskFiles, setTaskFiles] = useState([]); const [acceptModalOpen, setAcceptModalOpen] = useState(false); + const [taskTags, setTaskTags] = useState([]); + const [selectTagsOpen, setSelectTagsOpen] = useState(false); + const [correctProjectTags, setCorrectProjectTags] = useState([]); const { showNotification } = useNotification(); useEffect(() => { @@ -103,6 +107,7 @@ export const TicketFullScreen = () => { description: taskInfo.description, comment: "", }); + setTaskTags(taskInfo.mark); apiRequest( `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}` ).then((res) => { @@ -148,7 +153,7 @@ export const TicketFullScreen = () => { }); }); apiRequest( - `/project/get-project?project_id=${taskInfo.project_id}&expand=columns` + `/project/get-project?project_id=${taskInfo.project_id}&expand=columns,mark` ).then((res) => { setProjectInfo(res); setCorrectProjectUsers(res.projectUsers); @@ -158,6 +163,18 @@ export const TicketFullScreen = () => { ); }, []); + useEffect(() => { + let tagIds = taskTags.map((tag) => tag.id); + if (projectInfo.mark) { + setCorrectProjectTags( + projectInfo.mark.reduce((acc, cur) => { + if (!tagIds.includes(cur.id)) acc.push(cur); + return acc; + }, []) + ); + } + }, [taskTags, projectInfo]); + function deleteTask() { apiRequest("/task/update-task", { method: "PUT", @@ -481,6 +498,33 @@ export const TicketFullScreen = () => { setAcceptModalOpen(false); } + function deleteTagFromTask(tagId) { + apiRequest("/mark/detach", { + method: "DELETE", + data: { + mark_id: tagId, + entity_type: 2, + entity_id: taskInfo.id, + }, + }).then(() => { + setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId)); + }); + } + + function addTagToTask(tagId) { + apiRequest("/mark/attach", { + method: "POST", + data: { + mark_id: tagId, + entity_type: 2, + entity_id: taskInfo.id, + }, + }).then((data) => { + setSelectTagsOpen(false); + setTaskTags((prevValue) => [...prevValue, data.mark]); + }); + } + return (
@@ -991,6 +1035,63 @@ export const TicketFullScreen = () => {
+
+
+ {taskTags.map((tag) => { + return ( +
+

{tag.slug}

+ delete deleteTagFromTask(tag.id)} + /> +
+ ); + })} +
+
setSelectTagsOpen(!selectTagsOpen)} + > + Выберите тег + arrow +
+ {selectTagsOpen && ( +
+ setSelectTagsOpen(false)} + className="tags__dropDown__close" + src={close} + alt="close" + /> + {correctProjectTags.map((tag) => { + return ( +
addTagToTask(tag.id)} + > +

{tag.slug}

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

Нет тегов

+ )} +
+ )} +
{ diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index b26786f3..651ff383 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -335,6 +335,8 @@ export const ProjectTracker = () => { ...prevState, edit: false, })); + setTagInfo({ description: "", name: "" }); + setColor("#aabbcc"); }); }