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] 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={() =>