From 1fc6cc3f73f4a65ced290533dc295a3e9dde12c5 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Wed, 25 Oct 2023 16:33:26 +0300
Subject: [PATCH] marks

---
 .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 117 +++++++++++-------
 src/pages/ProjectTracker/ProjectTracker.js    | 101 ++++++++-------
 src/redux/projectsTrackerSlice.js             |   4 +-
 3 files changed, 131 insertions(+), 91 deletions(-)

diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
index a3ee7408..1ad5296f 100644
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -30,6 +30,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
 import archive from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowStart.png";
 import fullScreen from "assets/icons/arrows/inFullScreen.svg";
+import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
 import category from "assets/icons/category.svg";
 import close from "assets/icons/closeProjectPersons.svg";
@@ -39,7 +40,6 @@ import file from "assets/icons/fileModal.svg";
 import link from "assets/icons/link.svg";
 import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";
-import arrowDown from "assets/icons/arrows/selectArrow.png";
 import avatarMok from "assets/images/avatarMok.png";
 
 import { getCorrectDate } from "../../../Calendar/calendarHelper";
@@ -55,7 +55,7 @@ export const ModalTiсket = ({
   projectName,
   projectUsers,
   projectOwnerId,
-  projectMarks
+  projectMarks,
 }) => {
   const dispatch = useDispatch();
   const [addSubtask, setAddSubtask] = useState(false);
@@ -75,7 +75,7 @@ export const ModalTiсket = ({
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [executor, setExecutor] = useState(task.executor);
   const [members, setMembers] = useState(task.taskUsers);
-  const [taskTags, setTaskTags] = useState(task.mark)
+  const [taskTags, setTaskTags] = useState(task.mark);
   const [users, setUsers] = useState([]);
   const [timerStart, setTimerStart] = useState(false);
   const [timerInfo, setTimerInfo] = useState({});
@@ -88,11 +88,11 @@ export const ModalTiсket = ({
   const [timerId, setTimerId] = useState(null);
   const [taskFiles, setTaskFiles] = useState([]);
   const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
-  const [correctProjectTags, setCorrectProjectTags] = useState([])
+  const [correctProjectTags, setCorrectProjectTags] = useState([]);
   const [executorId, setExecutorId] = useState(task.executor_id);
   const profileInfo = useSelector(getProfileInfo);
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
-  const [selectTagsOpen, setSelectTagsOpen] = useState(false)
+  const [selectTagsOpen, setSelectTagsOpen] = useState(false);
   const { showNotification } = useNotification();
 
   function deleteTask() {
@@ -353,12 +353,14 @@ export const ModalTiсket = ({
   }, []);
 
   useEffect(() => {
-    let tagIds = taskTags.map((tag) => tag.id)
-    setCorrectProjectTags(projectMarks.reduce((acc, cur) => {
-      if (!tagIds.includes(cur.id)) acc.push(cur)
-      return acc
-    }, []))
-    }, [taskTags])
+    let tagIds = taskTags.map((tag) => tag.id);
+    setCorrectProjectTags(
+      projectMarks.reduce((acc, cur) => {
+        if (!tagIds.includes(cur.id)) acc.push(cur);
+        return acc;
+      }, [])
+    );
+  }, [taskTags]);
 
   async function handleUpload(event) {
     const formData = new FormData();
@@ -473,13 +475,13 @@ export const ModalTiсket = ({
       data: {
         mark_id: tagId,
         entity_type: 2,
-        entity_id: task.id
-      }
+        entity_id: task.id,
+      },
     }).then((data) => {
-      setSelectTagsOpen(false)
-      setTaskTags((prevValue) => [...prevValue, data.mark])
+      setSelectTagsOpen(false);
+      setTaskTags((prevValue) => [...prevValue, data.mark]);
       dispatch(setProjectBoardFetch(projectId));
-    })
+    });
   }
 
   function deleteTagFromTask(tagId) {
@@ -488,12 +490,12 @@ export const ModalTiсket = ({
       data: {
         mark_id: tagId,
         entity_type: 2,
-        entity_id: task.id
-      }
+        entity_id: task.id,
+      },
     }).then(() => {
-      setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId))
+      setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId));
       dispatch(setProjectBoardFetch(projectId));
-    })
+    });
   }
 
   function closeAcceptModal() {
@@ -854,41 +856,62 @@ export const ModalTiсket = ({
           </div>
 
           <div className="workers_box-bottom">
-            <div className='tags'>
-              <div className='tags__selected'>
+            <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>
-                })
-                }
+                  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)}>
+              <div
+                className="tags__select"
+                onClick={() => setSelectTagsOpen(!selectTagsOpen)}
+              >
                 <span>Выберите тег</span>
                 <img
-                    className={selectTagsOpen ? "open" : ""}
-                    src={arrowDown}
-                    alt="arrow"
+                  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)}>
+              {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}} />
+                        <span style={{ background: tag.color }} />
                       </div>
-                    })
-                    }
-                    {!Boolean(correctProjectTags.length) &&
-                      <p className='tags__dropDown__noItem'>Нет тегов</p>
-                    }
-                  </div>
-              }
+                    );
+                  })}
+                  {!Boolean(correctProjectTags.length) && (
+                    <p className="tags__dropDown__noItem">Нет тегов</p>
+                  )}
+                </div>
+              )}
             </div>
             <div
               className={editOpen ? "edit" : ""}
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 2ddebac6..b26786f3 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -7,12 +7,12 @@ import {
   activeLoader,
   addNewTagToProject,
   deletePersonOnProject,
+  deleteTagProject,
   filterCreatedByMe,
   filteredExecutorTasks,
   filteredParticipateTasks,
   getBoarderLoader,
   getProjectBoard,
-  deleteTagProject,
   modalToggle,
   movePositionProjectTask,
   moveProjectTask,
@@ -72,7 +72,7 @@ export const ProjectTracker = () => {
   const [tags, setTags] = useState({
     open: false,
     add: false,
-    edit: false
+    edit: false,
   });
   const [color, setColor] = useState("#aabbcc");
   const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
@@ -327,15 +327,15 @@ export const ProjectTracker = () => {
         mark_id: tagInfo.editMarkId,
         title: tagInfo.description,
         slug: tagInfo.name,
-        color: color
-      }
+        color: color,
+      },
     }).then(() => {
-      dispatch(setProjectBoardFetch(projectId.id))
+      dispatch(setProjectBoardFetch(projectId.id));
       setTags((prevState) => ({
         ...prevState,
         edit: false,
       }));
-    })
+    });
   }
 
   function deleteTag(tagId) {
@@ -345,10 +345,10 @@ export const ProjectTracker = () => {
         mark_id: tagId,
         entity_type: 1,
         entity_id: projectId.id,
-      }
+      },
     }).then(() => {
-      dispatch(deleteTagProject(tagId))
-    })
+      dispatch(deleteTagProject(tagId));
+    });
   }
 
   return (
@@ -622,13 +622,13 @@ export const ProjectTracker = () => {
                             setTags({
                               open: false,
                               add: false,
-                              edit: false
+                              edit: false,
                             });
                             setTagInfo({
-                              description: '',
-                              name: ''
-                            })
-                            setColor("#aabbcc")
+                              description: "",
+                              name: "",
+                            });
+                            setColor("#aabbcc");
                           }}
                         />
                         {!tags.add && !tags.edit && (
@@ -648,20 +648,29 @@ export const ProjectTracker = () => {
                                       style={{ background: tag.color }}
                                     />
                                   </div>
-                                  <div className='tagItem__images'>
-                                    <img src={edit} alt='edit' onClick={() => {
-                                      setTags((prevState) => ({
-                                        ...prevState,
-                                        edit: true,
-                                      }))
-                                      setTagInfo({
-                                        description: tag.title,
-                                        name: tag.slug,
-                                        editMarkId: tag.id
-                                      })
-                                      setColor(tag.color)
-                                    }} />
-                                    <img onClick={() => deleteTag(tag.id)} className='delete' src={close} alt='delete' />
+                                  <div className="tagItem__images">
+                                    <img
+                                      src={edit}
+                                      alt="edit"
+                                      onClick={() => {
+                                        setTags((prevState) => ({
+                                          ...prevState,
+                                          edit: true,
+                                        }));
+                                        setTagInfo({
+                                          description: tag.title,
+                                          name: tag.slug,
+                                          editMarkId: tag.id,
+                                        });
+                                        setColor(tag.color);
+                                      }}
+                                    />
+                                    <img
+                                      onClick={() => deleteTag(tag.id)}
+                                      className="delete"
+                                      src={close}
+                                      alt="delete"
+                                    />
                                   </div>
                                 </div>
                               );
@@ -690,13 +699,13 @@ export const ProjectTracker = () => {
                                 setTags((prevState) => ({
                                   ...prevState,
                                   add: false,
-                                  edit: false
+                                  edit: false,
                                 }));
                                 setTagInfo({
-                                  description: '',
-                                  name: ''
-                                })
-                                setColor("#aabbcc")
+                                  description: "",
+                                  name: "",
+                                });
+                                setColor("#aabbcc");
                               }}
                             />
                             <input
@@ -726,16 +735,15 @@ export const ProjectTracker = () => {
                             <HexColorPicker color={color} onChange={setColor} />
                             <button
                               onClick={() => {
-                                tags.add ? addNewTag() : editTag()
-                              }
-                            }
+                                tags.add ? addNewTag() : editTag();
+                              }}
                               className={
                                 tagInfo.name && tagInfo.description
                                   ? "formTag__btn"
                                   : "formTag__btn disable"
                               }
                             >
-                              {tags.add ? 'Добавить' : 'Изменить'}
+                              {tags.add ? "Добавить" : "Изменить"}
                             </button>
                           </div>
                         )}
@@ -891,14 +899,21 @@ export const ProjectTracker = () => {
                                     />
                                   )}
                                 </div>
-                                {Boolean(task.mark.length) &&
-                                  <div className='tasks__board__item__tags'>
+                                {Boolean(task.mark.length) && (
+                                  <div className="tasks__board__item__tags">
                                     {task.mark.map((tag) => {
-                                      return <div className='tagItem' key={tag.id} style={{background: tag.color}}><p>{tag.slug}</p></div>
-                                    })
-                                    }
+                                      return (
+                                        <div
+                                          className="tagItem"
+                                          key={tag.id}
+                                          style={{ background: tag.color }}
+                                        >
+                                          <p>{tag.slug}</p>
+                                        </div>
+                                      );
+                                    })}
                                   </div>
-                                }
+                                )}
                                 {task.dead_line && (
                                   <div className="tasks__board__item__deadLine">
                                     <p>Срок исполнения:</p>
diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js
index 22771f4b..6ec215c0 100644
--- a/src/redux/projectsTrackerSlice.js
+++ b/src/redux/projectsTrackerSlice.js
@@ -43,7 +43,9 @@ export const projectsTrackerSlice = createSlice({
       );
     },
     deleteTagProject: (state, action) => {
-      state.projectBoard.mark = state.projectBoard.mark.filter((tag) => tag.id !== action.payload)
+      state.projectBoard.mark = state.projectBoard.mark.filter(
+        (tag) => tag.id !== action.payload
+      );
     },
     addPersonToProject: (state, action) => {
       state.projectBoard.projectUsers.push(action.payload);