apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

outClick

Browse Source
This commit is contained in:
Mikola 2023-10-28 17:57:32 +03:00
parent 5e69e922f5
commit 6dd8ac7604
4 changed files with 189 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -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 (
<div
className={active ? "modal-tiket active" : "modal-tiket"}
onClick={() => setActive(false)}
onClick={(e) => {
if(e.target.className.includes('modal-tiket')) setActive(false)
}}
>
<div
className="modal-tiket__content"
onClick={(e) => e.stopPropagation()}
>
<div className="content">
<h3 className="title-project">
@ -646,7 +697,7 @@ export const ModalTiсket = ({
}));
}}
/>
<img src={send} onClick={createComment}></img>
<img className={commentSendDisable ? 'disable' : ''} src={send} onClick={createComment}></img>
</div>
<div className="comments__list">
{comments.map((comment) => {

5
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -584,6 +584,11 @@
margin-right: 18px;
}
.disable {
pointer-events: none;
opacity: 0.5;
}
//&:focus-within {
// border: 1px solid #0000004d;
//}

64
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -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 (
<section className="ticket-full-screen">
<ProfileHeader />
@ -820,7 +882,7 @@ export const TicketFullScreen = () => {
}));
}}
/>
<img src={send} onClick={createComment} alt="send"></img>
<img className={commentSendDisable ? 'disable' : ''} src={send} onClick={createComment} alt="send"></img>
</div>
<div className="comments__list">
{comments.map((comment) => {

67
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -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 (
<div className="tracker">
<ProfileHeader />