From 6dd8ac76044a6c8f99b7eb992b9361b4984c737c Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Sat, 28 Oct 2023 17:57:32 +0300
Subject: [PATCH 1/4] outClick

---
 .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 57 +++++++++++++++-
 .../Tracker/ModalTicket/modalTicket.scss      |  5 ++
 .../TicketFullScreen/TicketFullScreen.jsx     | 64 +++++++++++++++++-
 src/pages/ProjectTracker/ProjectTracker.js    | 67 +++++++++++++++++++
 4 files changed, 189 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
index 1ad5296f..6c042713 100644
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -94,6 +94,7 @@ export const ModalTiсket = ({
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
   const [selectTagsOpen, setSelectTagsOpen] = useState(false);
   const { showNotification } = useNotification();
+  const [commentSendDisable, setCommentSendDisable] = useState(false)
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -144,6 +145,8 @@ export const ModalTiсket = ({
   }
 
   function createComment() {
+    if (!inputsValue.comment) return
+    setCommentSendDisable(true)
     apiRequest("/comment/create", {
       method: "POST",
       data: {
@@ -153,6 +156,7 @@ export const ModalTiсket = ({
       },
     }).then((res) => {
       let newComment = res;
+      setCommentSendDisable(false)
       newComment.created_at = new Date();
       newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
@@ -285,6 +289,7 @@ export const ModalTiсket = ({
   }
 
   useEffect(() => {
+    initListeners()
     apiRequest(
       `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
     ).then((res) => {
@@ -502,14 +507,60 @@ export const ModalTiсket = ({
     setAcceptModalOpen(false);
   }
 
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("button-add-worker") ||
+                    div.classList.contains("dropdownList"))
+        )
+    ) {
+      setDropListOpen(false);
+      setDropListMembersOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("deadLine") ||
+                    div.classList.contains("react-datepicker-popper"))
+        )
+    ) {
+      setDatePickerOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("tags") ||
+                    div.classList.contains("tags__dropDown"))
+        )
+    ) {
+      setSelectTagsOpen(false)
+    }
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
-      onClick={() => setActive(false)}
+      onClick={(e) => {
+        if(e.target.className.includes('modal-tiket')) setActive(false)
+      }}
     >
       <div
         className="modal-tiket__content"
-        onClick={(e) => e.stopPropagation()}
       >
         <div className="content">
           <h3 className="title-project">
@@ -646,7 +697,7 @@ export const ModalTiсket = ({
                   }));
                 }}
               />
-              <img src={send} onClick={createComment}></img>
+              <img className={commentSendDisable ? 'disable' : ''} src={send} onClick={createComment}></img>
             </div>
             <div className="comments__list">
               {comments.map((comment) => {
diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index 1fcbc308..810b9e16 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -584,6 +584,11 @@
         margin-right: 18px;
       }
 
+      .disable {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
       //&:focus-within {
       //  border: 1px solid #0000004d;
       //}
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index 7c24717b..04aed23c 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -93,8 +93,10 @@ export const TicketFullScreen = () => {
   const [selectTagsOpen, setSelectTagsOpen] = useState(false);
   const [correctProjectTags, setCorrectProjectTags] = useState([]);
   const { showNotification } = useNotification();
+  const [commentSendDisable, setCommentSendDisable] = useState(false)
 
   useEffect(() => {
+    initListeners()
     apiRequest(`/task/get-task?task_id=${ticketId.id}&expand=mark`).then(
       (taskInfo) => {
         setTaskInfo(taskInfo);
@@ -217,6 +219,8 @@ export const TicketFullScreen = () => {
   }
 
   function createComment() {
+    if (!inputsValue.comment) return
+    setCommentSendDisable(true)
     apiRequest("/comment/create", {
       method: "POST",
       data: {
@@ -226,6 +230,7 @@ export const TicketFullScreen = () => {
       },
     }).then((res) => {
       let newComment = res;
+      setCommentSendDisable(false)
       newComment.created_at = new Date();
       newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
@@ -525,6 +530,63 @@ export const TicketFullScreen = () => {
     });
   }
 
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("button-add-worker") ||
+                    div.classList.contains("dropdownList"))
+        )
+    ) {
+      setDropListOpen(false);
+      setDropListMembersOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("deadLine") ||
+                    div.classList.contains("react-datepicker-popper"))
+        )
+    ) {
+      setDatePickerOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("tags") ||
+                    div.classList.contains("tags__dropDown"))
+        )
+    ) {
+      setSelectTagsOpen(false)
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("addPerson") ||
+                    div.classList.contains("persons__list"))
+        )
+    ) {
+      setPersonListOpen(false)
+    }
+  }
+
   return (
     <section className="ticket-full-screen">
       <ProfileHeader />
@@ -820,7 +882,7 @@ export const TicketFullScreen = () => {
                         }));
                       }}
                     />
-                    <img src={send} onClick={createComment} alt="send"></img>
+                    <img className={commentSendDisable ? 'disable' : ''} src={send} onClick={createComment} alt="send"></img>
                   </div>
                   <div className="comments__list">
                     {comments.map((comment) => {
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 651ff383..1afa5725 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -90,6 +90,7 @@ export const ProjectTracker = () => {
   useEffect(() => {
     dispatch(activeLoader());
     dispatch(setProjectBoardFetch(projectId.id));
+    initListeners()
   }, []);
 
   useEffect(() => {
@@ -353,6 +354,72 @@ export const ProjectTracker = () => {
     });
   }
 
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("addPerson") ||
+                    div.classList.contains("persons__list"))
+        )
+    ) {
+      setPersonListOpen(false);
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("tasks__head__executor") ||
+                    div.classList.contains("tasks__head__executorDropdown"))
+        )
+    ) {
+      setSelectedExecutorOpen(false);
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("tasks__head__tags") ||
+                    div.classList.contains("tags__list"))
+        )
+    ) {
+      setTags({
+        open: false,
+        add: false,
+        edit: false,
+      });
+    }
+
+    if (
+        event &&
+        !path.find(
+            (div) =>
+                div.classList &&
+                (div.classList.contains("board__head__more") ||
+                    div.classList.contains("column__select"))
+        )
+    ) {
+      setOpenColumnSelect((prevState) => {
+        const newState = {}
+        for (const key in prevState) {
+          newState[key] = false;
+        }
+        return newState;
+      })
+    }
+  };
+
   return (
     <div className="tracker">
       <ProfileHeader />

From 7fb04005bb3ab4f4930ab8270fde6710ac81bf21 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Sat, 28 Oct 2023 17:57:58 +0300
Subject: [PATCH 2/4] outClick

---
 .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 72 ++++++++--------
 .../TicketFullScreen/TicketFullScreen.jsx     | 83 ++++++++++---------
 src/pages/ProjectTracker/ProjectTracker.js    | 62 +++++++-------
 3 files changed, 112 insertions(+), 105 deletions(-)

diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
index 6c042713..c5055a9f 100644
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -94,7 +94,7 @@ export const ModalTiсket = ({
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
   const [selectTagsOpen, setSelectTagsOpen] = useState(false);
   const { showNotification } = useNotification();
-  const [commentSendDisable, setCommentSendDisable] = useState(false)
+  const [commentSendDisable, setCommentSendDisable] = useState(false);
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -145,8 +145,8 @@ export const ModalTiсket = ({
   }
 
   function createComment() {
-    if (!inputsValue.comment) return
-    setCommentSendDisable(true)
+    if (!inputsValue.comment) return;
+    setCommentSendDisable(true);
     apiRequest("/comment/create", {
       method: "POST",
       data: {
@@ -156,7 +156,7 @@ export const ModalTiсket = ({
       },
     }).then((res) => {
       let newComment = res;
-      setCommentSendDisable(false)
+      setCommentSendDisable(false);
       newComment.created_at = new Date();
       newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
@@ -289,7 +289,7 @@ export const ModalTiсket = ({
   }
 
   useEffect(() => {
-    initListeners()
+    initListeners();
     apiRequest(
       `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
     ).then((res) => {
@@ -515,53 +515,51 @@ export const ModalTiсket = ({
     const path = event.path || (event.composedPath && event.composedPath());
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("button-add-worker") ||
-                    div.classList.contains("dropdownList"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("button-add-worker") ||
+            div.classList.contains("dropdownList"))
+      )
     ) {
       setDropListOpen(false);
-      setDropListMembersOpen(false)
+      setDropListMembersOpen(false);
     }
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("deadLine") ||
-                    div.classList.contains("react-datepicker-popper"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("deadLine") ||
+            div.classList.contains("react-datepicker-popper"))
+      )
     ) {
-      setDatePickerOpen(false)
+      setDatePickerOpen(false);
     }
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("tags") ||
-                    div.classList.contains("tags__dropDown"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("tags") ||
+            div.classList.contains("tags__dropDown"))
+      )
     ) {
-      setSelectTagsOpen(false)
+      setSelectTagsOpen(false);
     }
-  }
+  };
 
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
       onClick={(e) => {
-        if(e.target.className.includes('modal-tiket')) setActive(false)
+        if (e.target.className.includes("modal-tiket")) setActive(false);
       }}
     >
-      <div
-        className="modal-tiket__content"
-      >
+      <div className="modal-tiket__content">
         <div className="content">
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
@@ -697,7 +695,11 @@ export const ModalTiсket = ({
                   }));
                 }}
               />
-              <img className={commentSendDisable ? 'disable' : ''} src={send} onClick={createComment}></img>
+              <img
+                className={commentSendDisable ? "disable" : ""}
+                src={send}
+                onClick={createComment}
+              ></img>
             </div>
             <div className="comments__list">
               {comments.map((comment) => {
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index 04aed23c..f3a90041 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -93,10 +93,10 @@ export const TicketFullScreen = () => {
   const [selectTagsOpen, setSelectTagsOpen] = useState(false);
   const [correctProjectTags, setCorrectProjectTags] = useState([]);
   const { showNotification } = useNotification();
-  const [commentSendDisable, setCommentSendDisable] = useState(false)
+  const [commentSendDisable, setCommentSendDisable] = useState(false);
 
   useEffect(() => {
-    initListeners()
+    initListeners();
     apiRequest(`/task/get-task?task_id=${ticketId.id}&expand=mark`).then(
       (taskInfo) => {
         setTaskInfo(taskInfo);
@@ -219,8 +219,8 @@ export const TicketFullScreen = () => {
   }
 
   function createComment() {
-    if (!inputsValue.comment) return
-    setCommentSendDisable(true)
+    if (!inputsValue.comment) return;
+    setCommentSendDisable(true);
     apiRequest("/comment/create", {
       method: "POST",
       data: {
@@ -230,7 +230,7 @@ export const TicketFullScreen = () => {
       },
     }).then((res) => {
       let newComment = res;
-      setCommentSendDisable(false)
+      setCommentSendDisable(false);
       newComment.created_at = new Date();
       newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
@@ -538,54 +538,54 @@ export const TicketFullScreen = () => {
     const path = event.path || (event.composedPath && event.composedPath());
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("button-add-worker") ||
-                    div.classList.contains("dropdownList"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("button-add-worker") ||
+            div.classList.contains("dropdownList"))
+      )
     ) {
       setDropListOpen(false);
-      setDropListMembersOpen(false)
+      setDropListMembersOpen(false);
     }
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("deadLine") ||
-                    div.classList.contains("react-datepicker-popper"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("deadLine") ||
+            div.classList.contains("react-datepicker-popper"))
+      )
     ) {
-      setDatePickerOpen(false)
+      setDatePickerOpen(false);
     }
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("tags") ||
-                    div.classList.contains("tags__dropDown"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("tags") ||
+            div.classList.contains("tags__dropDown"))
+      )
     ) {
-      setSelectTagsOpen(false)
+      setSelectTagsOpen(false);
     }
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("addPerson") ||
-                    div.classList.contains("persons__list"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("addPerson") ||
+            div.classList.contains("persons__list"))
+      )
     ) {
-      setPersonListOpen(false)
+      setPersonListOpen(false);
     }
-  }
+  };
 
   return (
     <section className="ticket-full-screen">
@@ -882,7 +882,12 @@ export const TicketFullScreen = () => {
                         }));
                       }}
                     />
-                    <img className={commentSendDisable ? 'disable' : ''} src={send} onClick={createComment} alt="send"></img>
+                    <img
+                      className={commentSendDisable ? "disable" : ""}
+                      src={send}
+                      onClick={createComment}
+                      alt="send"
+                    ></img>
                   </div>
                   <div className="comments__list">
                     {comments.map((comment) => {
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 1afa5725..20b13c89 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -90,7 +90,7 @@ export const ProjectTracker = () => {
   useEffect(() => {
     dispatch(activeLoader());
     dispatch(setProjectBoardFetch(projectId.id));
-    initListeners()
+    initListeners();
   }, []);
 
   useEffect(() => {
@@ -362,37 +362,37 @@ export const ProjectTracker = () => {
     const path = event.path || (event.composedPath && event.composedPath());
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("addPerson") ||
-                    div.classList.contains("persons__list"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("addPerson") ||
+            div.classList.contains("persons__list"))
+      )
     ) {
       setPersonListOpen(false);
     }
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("tasks__head__executor") ||
-                    div.classList.contains("tasks__head__executorDropdown"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("tasks__head__executor") ||
+            div.classList.contains("tasks__head__executorDropdown"))
+      )
     ) {
       setSelectedExecutorOpen(false);
     }
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("tasks__head__tags") ||
-                    div.classList.contains("tags__list"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("tasks__head__tags") ||
+            div.classList.contains("tags__list"))
+      )
     ) {
       setTags({
         open: false,
@@ -402,21 +402,21 @@ export const ProjectTracker = () => {
     }
 
     if (
-        event &&
-        !path.find(
-            (div) =>
-                div.classList &&
-                (div.classList.contains("board__head__more") ||
-                    div.classList.contains("column__select"))
-        )
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("board__head__more") ||
+            div.classList.contains("column__select"))
+      )
     ) {
       setOpenColumnSelect((prevState) => {
-        const newState = {}
+        const newState = {};
         for (const key in prevState) {
           newState[key] = false;
         }
         return newState;
-      })
+      });
     }
   };
 

From c2c57e3791c5b3dd49022021573ef3ac596394bc Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Mon, 30 Oct 2023 01:35:06 +0300
Subject: [PATCH 3/4] 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)}
               >
-                <span>Выберите тег</span>
+                <span>Выберете тег</span>
                 <img
                   className={selectTagsOpen ? "open" : ""}
                   src={arrowDown}
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index f3a90041..89539414 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -1126,7 +1126,7 @@ export const TicketFullScreen = () => {
                       className="tags__select"
                       onClick={() => setSelectTagsOpen(!selectTagsOpen)}
                     >
-                      <span>Выберите тег</span>
+                      <span>Выберете тег</span>
                       <img
                         className={selectTagsOpen ? "open" : ""}
                         src={arrowDown}
diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
index efddad92..160f104d 100644
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
@@ -39,6 +39,7 @@ 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);
 
@@ -51,6 +52,7 @@ export const TrackerModal = ({
   projectId,
   priorityTask,
   projectUsers,
+  projectMarks
 }) => {
   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 (
     <ModalLayout
       active={active}
@@ -404,11 +433,22 @@ export const TrackerModal = ({
         <>
           <div className="title-project">
             <div className="createTaskHead">
-              <span>Этап</span>
-              <div className="createTaskHead__selectColumn">
-                <span>Backlog</span>
-                <img src={arrowCreateTask} alt="arrow" />
+              <div className="createTaskBody__right__owner">
+                <p>Создатель : {profileInfo?.fio}</p>
+                <img
+                    src={
+                      profileInfo.photo
+                          ? urlForLocal(profileInfo.photo)
+                          : avatarMok
+                    }
+                    alt="avatar"
+                />
               </div>
+              {/*<span>Этап</span>*/}
+              {/*<div className="createTaskHead__selectColumn">*/}
+              {/*  <span>Backlog</span>*/}
+              {/*  <img src={arrowCreateTask} alt="arrow" />*/}
+              {/*</div>*/}
             </div>
             <div className="createTaskBody">
               <div className="createTaskBody__left">
@@ -445,16 +485,40 @@ export const TrackerModal = ({
                 />
               </div>
               <div className="createTaskBody__right">
-                <div className="createTaskBody__right__owner">
-                  <p>Создатель : {profileInfo?.fio}</p>
-                  <img
-                    src={
-                      profileInfo.photo
-                        ? urlForLocal(profileInfo.photo)
-                        : avatarMok
-                    }
-                    alt="avatar"
-                  />
+                <div className="createTaskBody__right__tags">
+                  <div className='tags__selected'>
+                    <div className='tags__selected__items'>
+                      {taskTags.map((tag) => {
+                        return <div className='selectedTag' key={tag.id} style={{ background: tag.color }}>
+                          <p>{tag.slug}</p>
+                          <img
+                              src={close}
+                              className="delete"
+                              alt="delete"
+                              onClick={() => setTaskTags((prevState) => prevState.filter((prevTag) => prevTag.id !== tag.id))}
+                          />
+                        </div>
+                      })
+                      }
+                    </div>
+                    <div className='tags__selected__name' onClick={() => setSelectTagsOpen(!selectTagsOpen)}>
+                      Выберете тег
+                      <img className={selectTagsOpen ? 'arrow arrow--open' : 'arrow'} src={arrowDown} alt="arrow" />
+                    </div>
+                  </div>
+                  {selectTagsOpen &&
+                      <div className='tags__dropDown'>
+                        <img src={close}  className='close'  onClick={() => setSelectTagsOpen(false)}/>
+                        {correctProjectTags.map((tag) => {
+                          return <div className='tag__item' key={tag.id} onClick={() => setTaskTags((prevState) => ([...prevState, tag]))}>
+                            <p>{tag.slug}</p>
+                            <span style={{ background: tag.color }} />
+                          </div>
+                        })
+                        }
+                        {Boolean(!correctProjectTags.length) && <p className='noTags'>Нет тегов</p>}
+                      </div>
+                  }
                 </div>
                 <div
                   onClick={() =>
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 && <Loader style="green" />}

From 512a8c61212582e4f9a4802b5b54ff177c3749b6 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Mon, 30 Oct 2023 01:35:28 +0300
Subject: [PATCH 4/4] 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 = ({
               <div className="createTaskBody__right__owner">
                 <p>Создатель : {profileInfo?.fio}</p>
                 <img
-                    src={
-                      profileInfo.photo
-                          ? urlForLocal(profileInfo.photo)
-                          : avatarMok
-                    }
-                    alt="avatar"
+                  src={
+                    profileInfo.photo
+                      ? urlForLocal(profileInfo.photo)
+                      : avatarMok
+                  }
+                  alt="avatar"
                 />
               </div>
               {/*<span>Этап</span>*/}
@@ -486,39 +486,72 @@ export const TrackerModal = ({
               </div>
               <div className="createTaskBody__right">
                 <div className="createTaskBody__right__tags">
-                  <div className='tags__selected'>
-                    <div className='tags__selected__items'>
+                  <div className="tags__selected">
+                    <div className="tags__selected__items">
                       {taskTags.map((tag) => {
-                        return <div className='selectedTag' key={tag.id} style={{ background: tag.color }}>
-                          <p>{tag.slug}</p>
-                          <img
+                        return (
+                          <div
+                            className="selectedTag"
+                            key={tag.id}
+                            style={{ background: tag.color }}
+                          >
+                            <p>{tag.slug}</p>
+                            <img
                               src={close}
                               className="delete"
                               alt="delete"
-                              onClick={() => setTaskTags((prevState) => prevState.filter((prevTag) => prevTag.id !== tag.id))}
-                          />
-                        </div>
-                      })
-                      }
+                              onClick={() =>
+                                setTaskTags((prevState) =>
+                                  prevState.filter(
+                                    (prevTag) => prevTag.id !== tag.id
+                                  )
+                                )
+                              }
+                            />
+                          </div>
+                        );
+                      })}
                     </div>
-                    <div className='tags__selected__name' onClick={() => setSelectTagsOpen(!selectTagsOpen)}>
+                    <div
+                      className="tags__selected__name"
+                      onClick={() => setSelectTagsOpen(!selectTagsOpen)}
+                    >
                       Выберете тег
-                      <img className={selectTagsOpen ? 'arrow arrow--open' : 'arrow'} src={arrowDown} alt="arrow" />
+                      <img
+                        className={
+                          selectTagsOpen ? "arrow arrow--open" : "arrow"
+                        }
+                        src={arrowDown}
+                        alt="arrow"
+                      />
                     </div>
                   </div>
-                  {selectTagsOpen &&
-                      <div className='tags__dropDown'>
-                        <img src={close}  className='close'  onClick={() => setSelectTagsOpen(false)}/>
-                        {correctProjectTags.map((tag) => {
-                          return <div className='tag__item' key={tag.id} onClick={() => setTaskTags((prevState) => ([...prevState, tag]))}>
+                  {selectTagsOpen && (
+                    <div className="tags__dropDown">
+                      <img
+                        src={close}
+                        className="close"
+                        onClick={() => setSelectTagsOpen(false)}
+                      />
+                      {correctProjectTags.map((tag) => {
+                        return (
+                          <div
+                            className="tag__item"
+                            key={tag.id}
+                            onClick={() =>
+                              setTaskTags((prevState) => [...prevState, tag])
+                            }
+                          >
                             <p>{tag.slug}</p>
                             <span style={{ background: tag.color }} />
                           </div>
-                        })
-                        }
-                        {Boolean(!correctProjectTags.length) && <p className='noTags'>Нет тегов</p>}
-                      </div>
-                  }
+                        );
+                      })}
+                      {Boolean(!correctProjectTags.length) && (
+                        <p className="noTags">Нет тегов</p>
+                      )}
+                    </div>
+                  )}
                 </div>
                 <div
                   onClick={() =>