diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 1ad5296f..c5055a9f 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,15 +507,59 @@ 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 +695,11 @@ 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..f3a90041 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,12 @@ export const TicketFullScreen = () => { })); }} /> - send + send
{comments.map((comment) => { diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 651ff383..20b13c89 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 (