marks

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -53,6 +53,7 @@ import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
 
 import "./ticketFullScreen.scss";
+import arrowDown from "assets/icons/arrows/selectArrow.png";
 
 registerLocale("ru", ru);
 
@@ -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 (
     <section className="ticket-full-screen">
       <ProfileHeader />
@@ -991,6 +1035,63 @@ export const TicketFullScreen = () => {
                 </div>
 
                 <div className="workers_box-bottom">
+                  <div className="tags">
+                    <div className="tags__selected">
+                      {taskTags.map((tag) => {
+                        return (
+                            <div
+                                className="tags__selected__item"
+                                key={tag.id}
+                                style={{ background: tag.color }}
+                            >
+                              <p>{tag.slug}</p>
+                              <img
+                                  src={close}
+                                  className="delete"
+                                  alt="delete"
+                                  onClick={() => deleteTagFromTask(tag.id)}
+                              />
+                            </div>
+                        );
+                      })}
+                    </div>
+                    <div
+                        className="tags__select"
+                        onClick={() => setSelectTagsOpen(!selectTagsOpen)}
+                    >
+                      <span>Выберите тег</span>
+                      <img
+                          className={selectTagsOpen ? "open" : ""}
+                          src={arrowDown}
+                          alt="arrow"
+                      />
+                    </div>
+                    {selectTagsOpen && (
+                        <div className="tags__dropDown">
+                          <img
+                              onClick={() => setSelectTagsOpen(false)}
+                              className="tags__dropDown__close"
+                              src={close}
+                              alt="close"
+                          />
+                          {correctProjectTags.map((tag) => {
+                            return (
+                                <div
+                                    className="tagItem"
+                                    key={tag.id}
+                                    onClick={() => addTagToTask(tag.id)}
+                                >
+                                  <p>{tag.slug}</p>
+                                  <span style={{ background: tag.color }} />
+                                </div>
+                            );
+                          })}
+                          {!Boolean(correctProjectTags.length) && (
+                              <p className="tags__dropDown__noItem">Нет тегов</p>
+                          )}
+                        </div>
+                    )}
+                  </div>
                   <div
                     className={editOpen ? "edit" : ""}
                     onClick={() => {

src/pages/ProjectTracker/ProjectTracker.js

@@ -335,6 +335,8 @@ export const ProjectTracker = () => {
         ...prevState,
         edit: false,
       }));
+      setTagInfo({description: "", name: ""})
+      setColor("#aabbcc")
     });
   }