create task with tags

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}

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}

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="createTaskBody__right__owner">
-              <div className="createTaskHead__selectColumn">
+                <p>Создатель : {profileInfo?.fio}</p>
-                <span>Backlog</span>
+                <img
-                <img src={arrowCreateTask} alt="arrow" />
+                    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,17 +485,41 @@ export const TrackerModal = ({
                 />
               </div>
               <div className="createTaskBody__right">
-                <div className="createTaskBody__right__owner">
+                <div className="createTaskBody__right__tags">
-                  <p>Создатель : {profileInfo?.fio}</p>
+                  <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={
+                              src={close}
-                      profileInfo.photo
+                              className="delete"
-                        ? urlForLocal(profileInfo.photo)
+                              alt="delete"
-                        : avatarMok
+                              onClick={() => setTaskTags((prevState) => prevState.filter((prevTag) => prevTag.id !== tag.id))}
-                    }
-                    alt="avatar"
                           />
                         </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={() =>
                     setSelectExecutorTaskOpen(!selectExecutorTaskOpen)

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;

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" />}