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

Merge pull request #141 from apuc/out-click-modals

Browse Source 
Out click modals
This commit is contained in:
NikoM1k 2023-10-28 17:58:42 +03:00 committed by GitHub
commit 8d83fcacf8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 199 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
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,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 (
<div
className={active ? "modal-tiket active" : "modal-tiket"}
onClick={() => setActive(false)}
>
<div
className="modal-tiket__content"
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
if (e.target.className.includes("modal-tiket")) setActive(false);
}}
>
<div className="modal-tiket__content">
<div className="content">
<h3 className="title-project">
<img src={category} className="title-project__category"></img>
@ -646,7 +695,11 @@ 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;
//}

69
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,12 @@ 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 />