refactor & debug burger-menu, add participant
add column and deploying a task
This commit is contained in:
parent
9b01381af1
commit
0df30c74c9
@ -5,19 +5,25 @@ import "./modalLayout.scss";
|
||||
export const ModalLayout = ({
|
||||
active,
|
||||
setActive,
|
||||
onClose,
|
||||
children,
|
||||
styles,
|
||||
type,
|
||||
...props
|
||||
}) => {
|
||||
const handleClose = (event) => {
|
||||
if (event.target.className === "modal-layout active") {
|
||||
setActive(false);
|
||||
if (onClose) {
|
||||
onClose(); // Вызов колбэк-функции при закрытии модального окна
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={active ? `modal-layout active` : "modal-layout"}
|
||||
onClick={(event) => {
|
||||
if (event.target.className === "modal-layout active") {
|
||||
setActive(false);
|
||||
}
|
||||
}}
|
||||
onClick={handleClose}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
&__input {
|
||||
margin: 0;
|
||||
margin: 10px 0 10px 0;
|
||||
min-width: 240px;
|
||||
height: 42px;
|
||||
|
||||
@ -79,6 +79,9 @@
|
||||
max-width: 190px;
|
||||
width: 100%;
|
||||
}
|
||||
.email-error-message {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 805px) {
|
||||
|
||||
@ -99,6 +99,18 @@ export const ModalTiсket = ({
|
||||
const { showNotification } = useNotification();
|
||||
const [commentSendDisable, setCommentSendDisable] = useState(false);
|
||||
|
||||
const closeModal = () => {
|
||||
setActive(false);
|
||||
// Восстанавливаем скролл при закрытии модального окна
|
||||
document.body.style.overflow = "auto";
|
||||
};
|
||||
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
const toggleModalSize = () => {
|
||||
setIsExpanded((prevState) => !prevState);
|
||||
};
|
||||
|
||||
function deleteTask() {
|
||||
apiRequest("/task/update-task", {
|
||||
method: "PUT",
|
||||
@ -107,7 +119,7 @@ export const ModalTiсket = ({
|
||||
status: 0
|
||||
}
|
||||
}).then(() => {
|
||||
setActive(false);
|
||||
closeModal();
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
showNotification({
|
||||
show: true,
|
||||
@ -594,20 +606,20 @@ export const ModalTiсket = ({
|
||||
<div
|
||||
className={active ? "modal-ticket active" : "modal-ticket"}
|
||||
onClick={(e) => {
|
||||
if (e.target.className.includes("modal-ticket")) setActive(false);
|
||||
if (e.target.className.includes("modal-ticket")) closeModal();
|
||||
}}
|
||||
>
|
||||
<div className="modal-ticket__content">
|
||||
<div className={`modal-ticket__content ${isExpanded ? "expanded" : ""}`}>
|
||||
<div className="content">
|
||||
<h3 className="title-project">
|
||||
<img src={category} className="title-project__category"></img>
|
||||
{projectName}
|
||||
<Link
|
||||
to={`/tracker/task/${task.id}`}
|
||||
<img
|
||||
src={fullScreen}
|
||||
alt="Full screen"
|
||||
onClick={toggleModalSize}
|
||||
className="title-project__full"
|
||||
>
|
||||
<img src={fullScreen}></img>
|
||||
</Link>
|
||||
/>
|
||||
</h3>
|
||||
<div className="content__task">
|
||||
{editOpen ? (
|
||||
@ -757,7 +769,7 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
<div className="workers">
|
||||
<div className="workers_box task__info">
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
<span className="exit" onClick={() => closeModal()}></span>
|
||||
<h5>Создатель: </h5>
|
||||
<p className="workers__creator">{task.user?.fio}</p>
|
||||
{executor ? (
|
||||
|
||||
@ -15,13 +15,20 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-ticket__content.expanded {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.modal-ticket__content {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-height: 700px;
|
||||
// overflow-y: auto;
|
||||
max-width: 915px;
|
||||
|
||||
@media (max-width: 990px) {
|
||||
width: 96%;
|
||||
@ -52,7 +59,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 630px;
|
||||
width: 68%;
|
||||
margin: 26px 0 0 21px;
|
||||
|
||||
.title-project {
|
||||
@ -160,7 +167,6 @@
|
||||
|
||||
.comments__list {
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
height: 190px;
|
||||
flex-direction: column;
|
||||
|
||||
@ -364,7 +370,6 @@
|
||||
column-gap: 25px;
|
||||
row-gap: 20px;
|
||||
margin-top: 33px;
|
||||
overflow-y: auto;
|
||||
|
||||
.task-file {
|
||||
cursor: pointer;
|
||||
@ -607,6 +612,7 @@
|
||||
.workers {
|
||||
position: relative;
|
||||
border-left: 1px solid #f1f1f1;
|
||||
width: 32%;
|
||||
|
||||
.exit {
|
||||
cursor: pointer;
|
||||
|
||||
@ -72,6 +72,7 @@ export const TrackerModal = ({
|
||||
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
|
||||
const [selectedWorker, setSelectedWorker] = useState(null);
|
||||
const [emailWorker, setEmailWorker] = useState("");
|
||||
const [emailError, setEmailError] = useState("");
|
||||
const [selectColumnPriority, setSelectColumnPriority] = useState(
|
||||
"Выберите приоритет колонки"
|
||||
);
|
||||
@ -114,6 +115,19 @@ export const TrackerModal = ({
|
||||
return;
|
||||
}
|
||||
|
||||
const existingColumn = projectBoard.columns.find(
|
||||
(column) => column.title === valueColumn
|
||||
);
|
||||
|
||||
if (existingColumn) {
|
||||
showNotification({
|
||||
show: true,
|
||||
text: "Колонка с таким названием уже существует",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
apiRequest("/project-column/create-column", {
|
||||
method: "POST",
|
||||
data: {
|
||||
@ -325,10 +339,23 @@ export const TrackerModal = ({
|
||||
setActive(false);
|
||||
setSelectedWorker("");
|
||||
setSelectWorkersOpen(false);
|
||||
showNotification({
|
||||
show: true,
|
||||
text: "Приглашение отправлено",
|
||||
type: "success"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function inviteUserByEmail() {
|
||||
const validateEmail = (email) => {
|
||||
// Простая валидация адреса электронной почты
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailPattern.test(email);
|
||||
};
|
||||
|
||||
const inviteUserByEmail = () => {
|
||||
if (validateEmail(emailWorker)) {
|
||||
setEmailError("");
|
||||
apiRequest("/project/add-user-by-email", {
|
||||
method: "POST",
|
||||
data: {
|
||||
@ -344,7 +371,10 @@ export const TrackerModal = ({
|
||||
type: "success"
|
||||
});
|
||||
});
|
||||
} else {
|
||||
setEmailError("Некорректный e-mail адрес");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
modalType === "add-worker"
|
||||
@ -426,8 +456,18 @@ export const TrackerModal = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalClose = () => {
|
||||
setEmailError("");
|
||||
setEmailWorker("");
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalLayout active={active} setActive={setActive} type={modalType}>
|
||||
<ModalLayout
|
||||
active={active}
|
||||
setActive={setActive}
|
||||
onClose={handleModalClose}
|
||||
type={modalType}
|
||||
>
|
||||
{modalType === "add-worker" && (
|
||||
<>
|
||||
<div className="select__person">
|
||||
@ -498,6 +538,7 @@ export const TrackerModal = ({
|
||||
value={emailWorker}
|
||||
onChange={(e) => setEmailWorker(e.target.value)}
|
||||
/>
|
||||
<div className="email-error-message">{emailError}</div>
|
||||
</div>
|
||||
<BaseButton
|
||||
styles={"button-add add-person-btn"}
|
||||
@ -864,7 +905,14 @@ export const TrackerModal = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
<span
|
||||
className="exit"
|
||||
onClick={() => {
|
||||
setActive(false);
|
||||
setEmailError("");
|
||||
setEmailWorker("");
|
||||
}}
|
||||
></span>
|
||||
</ModalLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@ -227,6 +227,7 @@
|
||||
min-width: 240px;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
margin: 10px 0 10px 0;
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
|
||||
@ -110,6 +110,10 @@ export const ProfileHeader = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const closeMenu = () => {
|
||||
setActive(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="profile-header">
|
||||
<div className="auth-title">
|
||||
@ -179,6 +183,7 @@ export const ProfileHeader = () => {
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
{active && <div className="backdrop" onClick={closeMenu}></div>}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
max-width: 1160px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
@ -36,6 +35,7 @@
|
||||
|
||||
@media (max-width: 414px) {
|
||||
display: block;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
&__line {
|
||||
@ -64,9 +64,19 @@
|
||||
background: white;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
.auth-body {
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
z-index: 8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -99,7 +109,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
padding: 10px 0 0 0;
|
||||
padding: 15px 0 0 10px;
|
||||
}
|
||||
|
||||
a,
|
||||
@ -134,7 +144,7 @@
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
width: calc(100vw / 3);
|
||||
width: calc(100vw / 2.5);
|
||||
transition: width 0.3s;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
@ -188,6 +198,7 @@
|
||||
&__logout-burger {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 15px 0 0 0;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
|
||||
@ -224,11 +224,9 @@ export const ProjectTracker = () => {
|
||||
}
|
||||
|
||||
function openTicket(e, task) {
|
||||
if (window.innerWidth < 985) {
|
||||
return;
|
||||
}
|
||||
setSelectedTicket(task);
|
||||
setModalActiveTicket(true);
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function deleteColumn(column) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user