Merge branch 'main' of https://github.com/apuc/outstaffing-react into fixed-pages
This commit is contained in:
commit
04d3f68da8
@ -94,6 +94,7 @@ export const ModalTiсket = ({
|
|||||||
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
|
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
|
||||||
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
|
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
|
||||||
const { showNotification } = useNotification();
|
const { showNotification } = useNotification();
|
||||||
|
const [commentSendDisable, setCommentSendDisable] = useState(false);
|
||||||
|
|
||||||
function deleteTask() {
|
function deleteTask() {
|
||||||
apiRequest("/task/update-task", {
|
apiRequest("/task/update-task", {
|
||||||
@ -144,6 +145,8 @@ export const ModalTiсket = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function createComment() {
|
function createComment() {
|
||||||
|
if (!inputsValue.comment) return;
|
||||||
|
setCommentSendDisable(true);
|
||||||
apiRequest("/comment/create", {
|
apiRequest("/comment/create", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
data: {
|
data: {
|
||||||
@ -153,6 +156,7 @@ export const ModalTiсket = ({
|
|||||||
},
|
},
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
let newComment = res;
|
let newComment = res;
|
||||||
|
setCommentSendDisable(false);
|
||||||
newComment.created_at = new Date();
|
newComment.created_at = new Date();
|
||||||
newComment.subComments = [];
|
newComment.subComments = [];
|
||||||
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
||||||
@ -285,6 +289,7 @@ export const ModalTiсket = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
initListeners();
|
||||||
apiRequest(
|
apiRequest(
|
||||||
`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
|
`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
|
||||||
).then((res) => {
|
).then((res) => {
|
||||||
@ -502,15 +507,59 @@ export const ModalTiсket = ({
|
|||||||
setAcceptModalOpen(false);
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className={active ? "modal-tiket active" : "modal-tiket"}
|
className={active ? "modal-tiket active" : "modal-tiket"}
|
||||||
onClick={() => setActive(false)}
|
onClick={(e) => {
|
||||||
|
if (e.target.className.includes("modal-tiket")) setActive(false);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div className="modal-tiket__content">
|
||||||
className="modal-tiket__content"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<h3 className="title-project">
|
<h3 className="title-project">
|
||||||
<img src={category} className="title-project__category"></img>
|
<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>
|
||||||
<div className="comments__list">
|
<div className="comments__list">
|
||||||
{comments.map((comment) => {
|
{comments.map((comment) => {
|
||||||
@ -880,7 +933,7 @@ export const ModalTiсket = ({
|
|||||||
className="tags__select"
|
className="tags__select"
|
||||||
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
||||||
>
|
>
|
||||||
<span>Выберите тег</span>
|
<span>Выберете тег</span>
|
||||||
<img
|
<img
|
||||||
className={selectTagsOpen ? "open" : ""}
|
className={selectTagsOpen ? "open" : ""}
|
||||||
src={arrowDown}
|
src={arrowDown}
|
||||||
|
@ -584,6 +584,11 @@
|
|||||||
margin-right: 18px;
|
margin-right: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.disable {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
//&:focus-within {
|
//&:focus-within {
|
||||||
// border: 1px solid #0000004d;
|
// border: 1px solid #0000004d;
|
||||||
//}
|
//}
|
||||||
|
@ -93,8 +93,10 @@ export const TicketFullScreen = () => {
|
|||||||
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
|
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
|
||||||
const [correctProjectTags, setCorrectProjectTags] = useState([]);
|
const [correctProjectTags, setCorrectProjectTags] = useState([]);
|
||||||
const { showNotification } = useNotification();
|
const { showNotification } = useNotification();
|
||||||
|
const [commentSendDisable, setCommentSendDisable] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
initListeners();
|
||||||
apiRequest(`/task/get-task?task_id=${ticketId.id}&expand=mark`).then(
|
apiRequest(`/task/get-task?task_id=${ticketId.id}&expand=mark`).then(
|
||||||
(taskInfo) => {
|
(taskInfo) => {
|
||||||
setTaskInfo(taskInfo);
|
setTaskInfo(taskInfo);
|
||||||
@ -217,6 +219,8 @@ export const TicketFullScreen = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function createComment() {
|
function createComment() {
|
||||||
|
if (!inputsValue.comment) return;
|
||||||
|
setCommentSendDisable(true);
|
||||||
apiRequest("/comment/create", {
|
apiRequest("/comment/create", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
data: {
|
data: {
|
||||||
@ -226,6 +230,7 @@ export const TicketFullScreen = () => {
|
|||||||
},
|
},
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
let newComment = res;
|
let newComment = res;
|
||||||
|
setCommentSendDisable(false);
|
||||||
newComment.created_at = new Date();
|
newComment.created_at = new Date();
|
||||||
newComment.subComments = [];
|
newComment.subComments = [];
|
||||||
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
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 (
|
return (
|
||||||
<section className="ticket-full-screen">
|
<section className="ticket-full-screen">
|
||||||
<ProfileHeader />
|
<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>
|
||||||
<div className="comments__list">
|
<div className="comments__list">
|
||||||
{comments.map((comment) => {
|
{comments.map((comment) => {
|
||||||
@ -1059,7 +1126,7 @@ export const TicketFullScreen = () => {
|
|||||||
className="tags__select"
|
className="tags__select"
|
||||||
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
||||||
>
|
>
|
||||||
<span>Выберите тег</span>
|
<span>Выберете тег</span>
|
||||||
<img
|
<img
|
||||||
className={selectTagsOpen ? "open" : ""}
|
className={selectTagsOpen ? "open" : ""}
|
||||||
src={arrowDown}
|
src={arrowDown}
|
||||||
|
@ -35,6 +35,7 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
|||||||
import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg";
|
import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg";
|
||||||
import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
|
import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
|
||||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||||
|
import close from "assets/icons/close.png";
|
||||||
import calendarImg from "assets/icons/createTaskCalendar.svg";
|
import calendarImg from "assets/icons/createTaskCalendar.svg";
|
||||||
import avatarMok from "assets/images/avatarMok.png";
|
import avatarMok from "assets/images/avatarMok.png";
|
||||||
|
|
||||||
@ -51,6 +52,7 @@ export const TrackerModal = ({
|
|||||||
projectId,
|
projectId,
|
||||||
priorityTask,
|
priorityTask,
|
||||||
projectUsers,
|
projectUsers,
|
||||||
|
projectMarks,
|
||||||
}) => {
|
}) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const projectBoard = useSelector(getProjectBoard);
|
const projectBoard = useSelector(getProjectBoard);
|
||||||
@ -76,6 +78,9 @@ export const TrackerModal = ({
|
|||||||
);
|
);
|
||||||
const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
|
const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
|
||||||
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
|
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
|
||||||
|
const [correctProjectTags, setCorrectProjectTags] = useState([]);
|
||||||
|
const [taskTags, setTaskTags] = useState([]);
|
||||||
|
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
|
||||||
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
|
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
|
||||||
useState(false);
|
useState(false);
|
||||||
const { showNotification } = useNotification();
|
const { showNotification } = useNotification();
|
||||||
@ -135,6 +140,18 @@ export const TrackerModal = ({
|
|||||||
type: "error",
|
type: "error",
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
for (let i = 0; i < taskTags.length; i++) {
|
||||||
|
apiRequest("/mark/attach", {
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
mark_id: taskTags[i].id,
|
||||||
|
entity_type: 2,
|
||||||
|
entity_id: res.id,
|
||||||
|
},
|
||||||
|
}).then(() => {
|
||||||
|
setTaskTags([]);
|
||||||
|
});
|
||||||
|
}
|
||||||
if (selectedExecutorTask.user_id) {
|
if (selectedExecutorTask.user_id) {
|
||||||
apiRequest("/task/update-task", {
|
apiRequest("/task/update-task", {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
@ -306,6 +323,18 @@ export const TrackerModal = ({
|
|||||||
}
|
}
|
||||||
}, [active]);
|
}, [active]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let tagIds = taskTags.map((tag) => tag.id);
|
||||||
|
if (projectMarks) {
|
||||||
|
setCorrectProjectTags(
|
||||||
|
projectMarks.reduce((acc, cur) => {
|
||||||
|
if (!tagIds.includes(cur.id)) acc.push(cur);
|
||||||
|
return acc;
|
||||||
|
}, [])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [taskTags, projectMarks]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalLayout
|
<ModalLayout
|
||||||
active={active}
|
active={active}
|
||||||
@ -404,11 +433,22 @@ export const TrackerModal = ({
|
|||||||
<>
|
<>
|
||||||
<div className="title-project">
|
<div className="title-project">
|
||||||
<div className="createTaskHead">
|
<div className="createTaskHead">
|
||||||
<span>Этап</span>
|
<div className="createTaskBody__right__owner">
|
||||||
<div className="createTaskHead__selectColumn">
|
<p>Создатель : {profileInfo?.fio}</p>
|
||||||
<span>Backlog</span>
|
<img
|
||||||
<img src={arrowCreateTask} alt="arrow" />
|
src={
|
||||||
|
profileInfo.photo
|
||||||
|
? urlForLocal(profileInfo.photo)
|
||||||
|
: avatarMok
|
||||||
|
}
|
||||||
|
alt="avatar"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{/*<span>Этап</span>*/}
|
||||||
|
{/*<div className="createTaskHead__selectColumn">*/}
|
||||||
|
{/* <span>Backlog</span>*/}
|
||||||
|
{/* <img src={arrowCreateTask} alt="arrow" />*/}
|
||||||
|
{/*</div>*/}
|
||||||
</div>
|
</div>
|
||||||
<div className="createTaskBody">
|
<div className="createTaskBody">
|
||||||
<div className="createTaskBody__left">
|
<div className="createTaskBody__left">
|
||||||
@ -445,16 +485,73 @@ export const TrackerModal = ({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="createTaskBody__right">
|
<div className="createTaskBody__right">
|
||||||
<div className="createTaskBody__right__owner">
|
<div className="createTaskBody__right__tags">
|
||||||
<p>Создатель : {profileInfo?.fio}</p>
|
<div className="tags__selected">
|
||||||
<img
|
<div className="tags__selected__items">
|
||||||
src={
|
{taskTags.map((tag) => {
|
||||||
profileInfo.photo
|
return (
|
||||||
? urlForLocal(profileInfo.photo)
|
<div
|
||||||
: avatarMok
|
className="selectedTag"
|
||||||
}
|
key={tag.id}
|
||||||
alt="avatar"
|
style={{ background: tag.color }}
|
||||||
/>
|
>
|
||||||
|
<p>{tag.slug}</p>
|
||||||
|
<img
|
||||||
|
src={close}
|
||||||
|
className="delete"
|
||||||
|
alt="delete"
|
||||||
|
onClick={() =>
|
||||||
|
setTaskTags((prevState) =>
|
||||||
|
prevState.filter(
|
||||||
|
(prevTag) => prevTag.id !== tag.id
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="tags__selected__name"
|
||||||
|
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
||||||
|
>
|
||||||
|
Выберете тег
|
||||||
|
<img
|
||||||
|
className={
|
||||||
|
selectTagsOpen ? "arrow arrow--open" : "arrow"
|
||||||
|
}
|
||||||
|
src={arrowDown}
|
||||||
|
alt="arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{selectTagsOpen && (
|
||||||
|
<div className="tags__dropDown">
|
||||||
|
<img
|
||||||
|
src={close}
|
||||||
|
className="close"
|
||||||
|
onClick={() => setSelectTagsOpen(false)}
|
||||||
|
/>
|
||||||
|
{correctProjectTags.map((tag) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="tag__item"
|
||||||
|
key={tag.id}
|
||||||
|
onClick={() =>
|
||||||
|
setTaskTags((prevState) => [...prevState, tag])
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<p>{tag.slug}</p>
|
||||||
|
<span style={{ background: tag.color }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{Boolean(!correctProjectTags.length) && (
|
||||||
|
<p className="noTags">Нет тегов</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
|
@ -357,7 +357,6 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: 9.5px;
|
column-gap: 9.5px;
|
||||||
margin-bottom: 30px;
|
|
||||||
p {
|
p {
|
||||||
color: #2D4A17;
|
color: #2D4A17;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -371,6 +370,127 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__tags {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
&__selected {
|
||||||
|
width: 393px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 18px;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 17.5px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 8px;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e4e4e4;
|
||||||
|
|
||||||
|
img {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow--open {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__items {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
gap: 8px;
|
||||||
|
max-width: 393px;
|
||||||
|
|
||||||
|
.selectedTag {
|
||||||
|
display: flex;
|
||||||
|
padding: 3px 5px 3px 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 8px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 15px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropDown {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e4e4e4;
|
||||||
|
top: 90%;
|
||||||
|
z-index: 101;
|
||||||
|
padding: 20px 10px 10px;
|
||||||
|
background: white;
|
||||||
|
row-gap: 8px;
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
right: 5px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag__item {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
column-gap: 8px;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #ececec;
|
||||||
|
border-radius: 8px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.noTags {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.select__executor {
|
.select__executor {
|
||||||
background: #F1F1F1;
|
background: #F1F1F1;
|
||||||
width: 393px;
|
width: 393px;
|
||||||
|
@ -90,6 +90,7 @@ export const ProjectTracker = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(activeLoader());
|
dispatch(activeLoader());
|
||||||
dispatch(setProjectBoardFetch(projectId.id));
|
dispatch(setProjectBoardFetch(projectId.id));
|
||||||
|
initListeners();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
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 (
|
return (
|
||||||
<div className="tracker">
|
<div className="tracker">
|
||||||
<ProfileHeader />
|
<ProfileHeader />
|
||||||
@ -402,6 +469,7 @@ export const ProjectTracker = () => {
|
|||||||
selectedTab={selectedTab}
|
selectedTab={selectedTab}
|
||||||
priorityTask={priorityTask}
|
priorityTask={priorityTask}
|
||||||
projectUsers={projectBoard.projectUsers}
|
projectUsers={projectBoard.projectUsers}
|
||||||
|
projectMarks={projectBoard.mark}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{loader && <Loader style="green" />}
|
{loader && <Loader style="green" />}
|
||||||
|
Loading…
Reference in New Issue
Block a user