marks

2023-10-25 16:33:26 +03:00
parent fc9d18a380
commit 1fc6cc3f73
3 changed files with 131 additions and 91 deletions
--- 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" : ""}
--- 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>
--- 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);