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 = ({
-
-
+
+
{taskTags.map((tag) => { - return
-

- {tag.slug} -

- delete deleteTagFromTask(tag.id)} /> -
- }) - } + return ( +
+

{tag.slug}

+ delete deleteTagFromTask(tag.id)} + /> +
+ ); + })}
-
setSelectTagsOpen(!selectTagsOpen)}> +
setSelectTagsOpen(!selectTagsOpen)} + > Выберите тег arrow
- {selectTagsOpen && -
- setSelectTagsOpen(false)} className='tags__dropDown__close' src={close} alt="close" /> - {correctProjectTags.map((tag) => { - return
addTagToTask(tag.id)}> + {selectTagsOpen && ( +
+ setSelectTagsOpen(false)} + className="tags__dropDown__close" + src={close} + alt="close" + /> + {correctProjectTags.map((tag) => { + return ( +
addTagToTask(tag.id)} + >

{tag.slug}

- +
- }) - } - {!Boolean(correctProjectTags.length) && -

Нет тегов

- } -
- } + ); + })} + {!Boolean(correctProjectTags.length) && ( +

Нет тегов

+ )} +
+ )}
{ 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 }} />
-
- edit { - setTags((prevState) => ({ - ...prevState, - edit: true, - })) - setTagInfo({ - description: tag.title, - name: tag.slug, - editMarkId: tag.id - }) - setColor(tag.color) - }} /> - deleteTag(tag.id)} className='delete' src={close} alt='delete' /> +
+ edit { + setTags((prevState) => ({ + ...prevState, + edit: true, + })); + setTagInfo({ + description: tag.title, + name: tag.slug, + editMarkId: tag.id, + }); + setColor(tag.color); + }} + /> + deleteTag(tag.id)} + className="delete" + src={close} + alt="delete" + />
); @@ -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"); }} /> {
)} @@ -891,14 +899,21 @@ export const ProjectTracker = () => { /> )}
- {Boolean(task.mark.length) && -
+ {Boolean(task.mark.length) && ( +
{task.mark.map((tag) => { - return

{tag.slug}

- }) - } + return ( +
+

{tag.slug}

+
+ ); + })}
- } + )} {task.dead_line && (

Срок исполнения:

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);