From 6dd8ac76044a6c8f99b7eb992b9361b4984c737c Mon Sep 17 00:00:00 2001 From: Mikola Date: Sat, 28 Oct 2023 17:57:32 +0300 Subject: [PATCH 1/2] outClick --- .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 57 +++++++++++++++- .../Tracker/ModalTicket/modalTicket.scss | 5 ++ .../TicketFullScreen/TicketFullScreen.jsx | 64 +++++++++++++++++- src/pages/ProjectTracker/ProjectTracker.js | 67 +++++++++++++++++++ 4 files changed, 189 insertions(+), 4 deletions(-) diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 1ad5296f..6c042713 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -94,6 +94,7 @@ export const ModalTiсket = ({ const [acceptModalOpen, setAcceptModalOpen] = useState(false); const [selectTagsOpen, setSelectTagsOpen] = useState(false); const { showNotification } = useNotification(); + const [commentSendDisable, setCommentSendDisable] = useState(false) function deleteTask() { apiRequest("/task/update-task", { @@ -144,6 +145,8 @@ export const ModalTiсket = ({ } function createComment() { + if (!inputsValue.comment) return + setCommentSendDisable(true) apiRequest("/comment/create", { method: "POST", data: { @@ -153,6 +156,7 @@ export const ModalTiсket = ({ }, }).then((res) => { let newComment = res; + setCommentSendDisable(false) newComment.created_at = new Date(); newComment.subComments = []; setInputsValue((prevValue) => ({ ...prevValue, comment: "" })); @@ -285,6 +289,7 @@ export const ModalTiсket = ({ } useEffect(() => { + initListeners() apiRequest( `/comment/get-by-entity?entity_type=2&entity_id=${task.id}` ).then((res) => { @@ -502,14 +507,60 @@ export const ModalTiсket = ({ setAcceptModalOpen(false); } + const initListeners = () => { + document.addEventListener("click", closeByClickingOut); + }; + + const closeByClickingOut = (event) => { + const path = event.path || (event.composedPath && event.composedPath()); + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("button-add-worker") || + div.classList.contains("dropdownList")) + ) + ) { + setDropListOpen(false); + setDropListMembersOpen(false) + } + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("deadLine") || + div.classList.contains("react-datepicker-popper")) + ) + ) { + setDatePickerOpen(false) + } + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("tags") || + div.classList.contains("tags__dropDown")) + ) + ) { + setSelectTagsOpen(false) + } + } + return (
setActive(false)} + onClick={(e) => { + if(e.target.className.includes('modal-tiket')) setActive(false) + }} >
e.stopPropagation()} >

@@ -646,7 +697,7 @@ export const ModalTiсket = ({ })); }} /> - +

{comments.map((comment) => { diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 1fcbc308..810b9e16 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -584,6 +584,11 @@ margin-right: 18px; } + .disable { + pointer-events: none; + opacity: 0.5; + } + //&:focus-within { // border: 1px solid #0000004d; //} diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 7c24717b..04aed23c 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -93,8 +93,10 @@ export const TicketFullScreen = () => { const [selectTagsOpen, setSelectTagsOpen] = useState(false); const [correctProjectTags, setCorrectProjectTags] = useState([]); const { showNotification } = useNotification(); + const [commentSendDisable, setCommentSendDisable] = useState(false) useEffect(() => { + initListeners() apiRequest(`/task/get-task?task_id=${ticketId.id}&expand=mark`).then( (taskInfo) => { setTaskInfo(taskInfo); @@ -217,6 +219,8 @@ export const TicketFullScreen = () => { } function createComment() { + if (!inputsValue.comment) return + setCommentSendDisable(true) apiRequest("/comment/create", { method: "POST", data: { @@ -226,6 +230,7 @@ export const TicketFullScreen = () => { }, }).then((res) => { let newComment = res; + setCommentSendDisable(false) newComment.created_at = new Date(); newComment.subComments = []; setInputsValue((prevValue) => ({ ...prevValue, comment: "" })); @@ -525,6 +530,63 @@ export const TicketFullScreen = () => { }); } + const initListeners = () => { + document.addEventListener("click", closeByClickingOut); + }; + + const closeByClickingOut = (event) => { + const path = event.path || (event.composedPath && event.composedPath()); + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("button-add-worker") || + div.classList.contains("dropdownList")) + ) + ) { + setDropListOpen(false); + setDropListMembersOpen(false) + } + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("deadLine") || + div.classList.contains("react-datepicker-popper")) + ) + ) { + setDatePickerOpen(false) + } + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("tags") || + div.classList.contains("tags__dropDown")) + ) + ) { + setSelectTagsOpen(false) + } + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("addPerson") || + div.classList.contains("persons__list")) + ) + ) { + setPersonListOpen(false) + } + } + return (
@@ -820,7 +882,7 @@ export const TicketFullScreen = () => { })); }} /> - send + send
{comments.map((comment) => { diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 651ff383..1afa5725 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -90,6 +90,7 @@ export const ProjectTracker = () => { useEffect(() => { dispatch(activeLoader()); dispatch(setProjectBoardFetch(projectId.id)); + initListeners() }, []); useEffect(() => { @@ -353,6 +354,72 @@ export const ProjectTracker = () => { }); } + const initListeners = () => { + document.addEventListener("click", closeByClickingOut); + }; + + const closeByClickingOut = (event) => { + const path = event.path || (event.composedPath && event.composedPath()); + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("addPerson") || + div.classList.contains("persons__list")) + ) + ) { + setPersonListOpen(false); + } + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("tasks__head__executor") || + div.classList.contains("tasks__head__executorDropdown")) + ) + ) { + setSelectedExecutorOpen(false); + } + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("tasks__head__tags") || + div.classList.contains("tags__list")) + ) + ) { + setTags({ + open: false, + add: false, + edit: false, + }); + } + + if ( + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("board__head__more") || + div.classList.contains("column__select")) + ) + ) { + setOpenColumnSelect((prevState) => { + const newState = {} + for (const key in prevState) { + newState[key] = false; + } + return newState; + }) + } + }; + return (
From 7fb04005bb3ab4f4930ab8270fde6710ac81bf21 Mon Sep 17 00:00:00 2001 From: Mikola Date: Sat, 28 Oct 2023 17:57:58 +0300 Subject: [PATCH 2/2] outClick --- .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 72 ++++++++-------- .../TicketFullScreen/TicketFullScreen.jsx | 83 ++++++++++--------- src/pages/ProjectTracker/ProjectTracker.js | 62 +++++++------- 3 files changed, 112 insertions(+), 105 deletions(-) diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 6c042713..c5055a9f 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -94,7 +94,7 @@ export const ModalTiсket = ({ const [acceptModalOpen, setAcceptModalOpen] = useState(false); const [selectTagsOpen, setSelectTagsOpen] = useState(false); const { showNotification } = useNotification(); - const [commentSendDisable, setCommentSendDisable] = useState(false) + const [commentSendDisable, setCommentSendDisable] = useState(false); function deleteTask() { apiRequest("/task/update-task", { @@ -145,8 +145,8 @@ export const ModalTiсket = ({ } function createComment() { - if (!inputsValue.comment) return - setCommentSendDisable(true) + if (!inputsValue.comment) return; + setCommentSendDisable(true); apiRequest("/comment/create", { method: "POST", data: { @@ -156,7 +156,7 @@ export const ModalTiсket = ({ }, }).then((res) => { let newComment = res; - setCommentSendDisable(false) + setCommentSendDisable(false); newComment.created_at = new Date(); newComment.subComments = []; setInputsValue((prevValue) => ({ ...prevValue, comment: "" })); @@ -289,7 +289,7 @@ export const ModalTiсket = ({ } useEffect(() => { - initListeners() + initListeners(); apiRequest( `/comment/get-by-entity?entity_type=2&entity_id=${task.id}` ).then((res) => { @@ -515,53 +515,51 @@ export const ModalTiсket = ({ const path = event.path || (event.composedPath && event.composedPath()); if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("button-add-worker") || - div.classList.contains("dropdownList")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("button-add-worker") || + div.classList.contains("dropdownList")) + ) ) { setDropListOpen(false); - setDropListMembersOpen(false) + setDropListMembersOpen(false); } if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("deadLine") || - div.classList.contains("react-datepicker-popper")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("deadLine") || + div.classList.contains("react-datepicker-popper")) + ) ) { - setDatePickerOpen(false) + setDatePickerOpen(false); } if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("tags") || - div.classList.contains("tags__dropDown")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("tags") || + div.classList.contains("tags__dropDown")) + ) ) { - setSelectTagsOpen(false) + setSelectTagsOpen(false); } - } + }; return (
{ - if(e.target.className.includes('modal-tiket')) setActive(false) + if (e.target.className.includes("modal-tiket")) setActive(false); }} > -
+

@@ -697,7 +695,11 @@ export const ModalTiсket = ({ })); }} /> - +

{comments.map((comment) => { diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 04aed23c..f3a90041 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -93,10 +93,10 @@ export const TicketFullScreen = () => { const [selectTagsOpen, setSelectTagsOpen] = useState(false); const [correctProjectTags, setCorrectProjectTags] = useState([]); const { showNotification } = useNotification(); - const [commentSendDisable, setCommentSendDisable] = useState(false) + const [commentSendDisable, setCommentSendDisable] = useState(false); useEffect(() => { - initListeners() + initListeners(); apiRequest(`/task/get-task?task_id=${ticketId.id}&expand=mark`).then( (taskInfo) => { setTaskInfo(taskInfo); @@ -219,8 +219,8 @@ export const TicketFullScreen = () => { } function createComment() { - if (!inputsValue.comment) return - setCommentSendDisable(true) + if (!inputsValue.comment) return; + setCommentSendDisable(true); apiRequest("/comment/create", { method: "POST", data: { @@ -230,7 +230,7 @@ export const TicketFullScreen = () => { }, }).then((res) => { let newComment = res; - setCommentSendDisable(false) + setCommentSendDisable(false); newComment.created_at = new Date(); newComment.subComments = []; setInputsValue((prevValue) => ({ ...prevValue, comment: "" })); @@ -538,54 +538,54 @@ export const TicketFullScreen = () => { const path = event.path || (event.composedPath && event.composedPath()); if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("button-add-worker") || - div.classList.contains("dropdownList")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("button-add-worker") || + div.classList.contains("dropdownList")) + ) ) { setDropListOpen(false); - setDropListMembersOpen(false) + setDropListMembersOpen(false); } if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("deadLine") || - div.classList.contains("react-datepicker-popper")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("deadLine") || + div.classList.contains("react-datepicker-popper")) + ) ) { - setDatePickerOpen(false) + setDatePickerOpen(false); } if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("tags") || - div.classList.contains("tags__dropDown")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("tags") || + div.classList.contains("tags__dropDown")) + ) ) { - setSelectTagsOpen(false) + setSelectTagsOpen(false); } if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("addPerson") || - div.classList.contains("persons__list")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("addPerson") || + div.classList.contains("persons__list")) + ) ) { - setPersonListOpen(false) + setPersonListOpen(false); } - } + }; return (
@@ -882,7 +882,12 @@ export const TicketFullScreen = () => { })); }} /> - send + send
{comments.map((comment) => { diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 1afa5725..20b13c89 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -90,7 +90,7 @@ export const ProjectTracker = () => { useEffect(() => { dispatch(activeLoader()); dispatch(setProjectBoardFetch(projectId.id)); - initListeners() + initListeners(); }, []); useEffect(() => { @@ -362,37 +362,37 @@ export const ProjectTracker = () => { const path = event.path || (event.composedPath && event.composedPath()); if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("addPerson") || - div.classList.contains("persons__list")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("addPerson") || + div.classList.contains("persons__list")) + ) ) { setPersonListOpen(false); } if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("tasks__head__executor") || - div.classList.contains("tasks__head__executorDropdown")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("tasks__head__executor") || + div.classList.contains("tasks__head__executorDropdown")) + ) ) { setSelectedExecutorOpen(false); } if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("tasks__head__tags") || - div.classList.contains("tags__list")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("tasks__head__tags") || + div.classList.contains("tags__list")) + ) ) { setTags({ open: false, @@ -402,21 +402,21 @@ export const ProjectTracker = () => { } if ( - event && - !path.find( - (div) => - div.classList && - (div.classList.contains("board__head__more") || - div.classList.contains("column__select")) - ) + event && + !path.find( + (div) => + div.classList && + (div.classList.contains("board__head__more") || + div.classList.contains("column__select")) + ) ) { setOpenColumnSelect((prevState) => { - const newState = {} + const newState = {}; for (const key in prevState) { newState[key] = false; } return newState; - }) + }); } };