Merge pull request #140 from apuc/tracker-mark

Tracker mark

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 (
     <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");
     });
   }