Compare commits

..

No commits in common. "2889569238012923a2fe486562304601bcbc388f" and "c972df0656717d4d1ea0c2f07a11b8382d7a3f3c" have entirely different histories.

17 changed files with 88 additions and 221 deletions

View File

@ -5,25 +5,19 @@ 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={handleClose}
onClick={(event) => {
if (event.target.className === "modal-layout active") {
setActive(false);
}
}}
{...props}
>
<div

View File

@ -61,7 +61,7 @@
align-items: center;
row-gap: 5px;
&__input {
margin: 10px 0 10px 0;
margin: 0;
min-width: 240px;
height: 42px;
@ -79,9 +79,6 @@
max-width: 190px;
width: 100%;
}
.email-error-message {
color: red;
}
}
@media (max-width: 805px) {

View File

@ -6,7 +6,7 @@ import {
modalToggle
} from "@redux/projectsTrackerSlice";
import { caseOfNum, removeLast, urlForLocal } from "@utils/helper";
import { caseOfNum, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
@ -67,7 +67,7 @@ const ListEmployees = ({
}
alt="avatar"
/>
<span>{removeLast(person.user.fio)}</span>
<span>{person.user.fio}</span>
<img
className="delete"
src={close}

View File

@ -11,10 +11,10 @@ import { getProfileInfo } from "@redux/outstaffingSlice";
import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
import {
backendImg,
caseOfNum,
getCorrectRequestDate,
getToken,
removeLast,
urlForLocal
} from "@utils/helper";
@ -99,18 +99,6 @@ 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",
@ -119,7 +107,7 @@ export const ModalTiсket = ({
status: 0
}
}).then(() => {
closeModal();
setActive(false);
dispatch(setProjectBoardFetch(projectId));
showNotification({
show: true,
@ -606,20 +594,20 @@ export const ModalTiсket = ({
<div
className={active ? "modal-ticket active" : "modal-ticket"}
onClick={(e) => {
if (e.target.className.includes("modal-ticket")) closeModal();
if (e.target.className.includes("modal-ticket")) setActive(false);
}}
>
<div className={`modal-ticket__content ${isExpanded ? "expanded" : ""}`}>
<div className="modal-ticket__content">
<div className="content">
<h3 className="title-project">
<img src={category} className="title-project__category"></img>
{projectName}
<img
src={fullScreen}
alt="Full screen"
onClick={toggleModalSize}
<Link
to={`/tracker/task/${task.id}`}
className="title-project__full"
/>
>
<img src={fullScreen}></img>
</Link>
</h3>
<div className="content__task">
{editOpen ? (
@ -769,14 +757,14 @@ export const ModalTiсket = ({
</div>
<div className="workers">
<div className="workers_box task__info">
<span className="exit" onClick={() => closeModal()}></span>
<span className="exit" onClick={() => setActive(false)}></span>
<h5>Создатель: </h5>
<p className="workers__creator">{removeLast(task.user?.fio)}</p>
<p className="workers__creator">{task.user?.fio}</p>
{executor ? (
<>
<h5>Исполнитель: </h5>
<div className="executor">
<p>{removeLast(executor.fio)}</p>
<p>{executor.fio}</p>
<img
src={
executor?.avatar
@ -815,7 +803,7 @@ export const ModalTiсket = ({
key={person.user_id}
onClick={() => taskExecutor(person)}
>
<span>{removeLast(person.user.fio)}</span>
<span>{person.user.fio}</span>
<img
src={
person.user?.avatar
@ -838,7 +826,7 @@ export const ModalTiсket = ({
{members.map((member) => {
return (
<div className="worker" key={member.user_id}>
<p>{removeLast(member.fio)}</p>
<p>{member.fio}</p>
<img
src={
member?.avatar
@ -881,7 +869,7 @@ export const ModalTiсket = ({
key={person.user_id}
onClick={() => addMember(person)}
>
<span>{removeLast(person.user.fio)}</span>
<span>{person.user.fio}</span>
<img
src={
person.user?.avatar
@ -907,7 +895,7 @@ export const ModalTiсket = ({
className="dead-line__container"
onClick={() => setDatePickerOpen(!datePickerOpen)}
>
<p></p>
<img src={calendarIcon} alt="calendar" />
<span>
{deadLine ? getCorrectDate(deadLine) : "Срок исполнения"}
</span>

View File

@ -15,20 +15,13 @@
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;
max-width: 915px;
// overflow-y: auto;
@media (max-width: 990px) {
width: 96%;
@ -59,7 +52,7 @@
position: relative;
display: flex;
flex-direction: column;
width: 68%;
width: 630px;
margin: 26px 0 0 21px;
.title-project {
@ -167,6 +160,7 @@
.comments__list {
display: flex;
overflow-y: auto;
height: 190px;
flex-direction: column;
@ -370,6 +364,7 @@
column-gap: 25px;
row-gap: 20px;
margin-top: 33px;
overflow-y: auto;
.task-file {
cursor: pointer;
@ -612,7 +607,6 @@
.workers {
position: relative;
border-left: 1px solid #f1f1f1;
width: 32%;
.exit {
cursor: pointer;

View File

@ -950,7 +950,7 @@ export const TicketFullScreen = () => {
className="dead-line__container"
onClick={() => setDatePickerOpen(!datePickerOpen)}
>
<p></p>
<img src={calendarIcon} alt="calendar" />
<span>
{deadLine
? getCorrectDate(deadLine)

View File

@ -23,7 +23,7 @@ import {
} from "@redux/projectsTrackerSlice";
import { getCorrectDate } from "@utils/calendarHelper";
import { getCorrectRequestDate, removeLast, urlForLocal } from "@utils/helper";
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
@ -72,7 +72,6 @@ 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(
"Выберите приоритет колонки"
);
@ -115,19 +114,6 @@ 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: {
@ -339,6 +325,19 @@ export const TrackerModal = ({
setActive(false);
setSelectedWorker("");
setSelectWorkersOpen(false);
});
}
function inviteUserByEmail() {
apiRequest("/project/add-user-by-email", {
method: "POST",
data: {
email: emailWorker,
project_id: projectBoard.id
}
}).then((el) => {
setActive(false);
setEmailWorker("");
showNotification({
show: true,
text: "Приглашение отправлено",
@ -347,35 +346,6 @@ export const TrackerModal = ({
});
}
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: {
email: emailWorker,
project_id: projectBoard.id
}
}).then((el) => {
setActive(false);
setEmailWorker("");
showNotification({
show: true,
text: "Приглашение отправлено",
type: "success"
});
});
} else {
setEmailError("Некорректный e-mail адрес");
}
};
useEffect(() => {
modalType === "add-worker"
? apiRequest("/project/my-employee").then((el) => {
@ -456,18 +426,8 @@ export const TrackerModal = ({
}
};
const handleModalClose = () => {
setEmailError("");
setEmailWorker("");
};
return (
<ModalLayout
active={active}
setActive={setActive}
onClose={handleModalClose}
type={modalType}
>
<ModalLayout active={active} setActive={setActive} type={modalType}>
{modalType === "add-worker" && (
<>
<div className="select__person">
@ -488,7 +448,7 @@ export const TrackerModal = ({
>
<p>
{selectedWorker
? removeLast(selectedWorker.employee.fio)
? selectedWorker.employee.fio
: "Выберите пользователя"}
</p>
<img className="arrow" src={arrowDown} alt="arrow" />
@ -507,7 +467,7 @@ export const TrackerModal = ({
setSelectedWorker(worker);
}}
>
<span>{removeLast(worker.employee.fio)}</span>
<span>{worker.employee.fio}</span>
<img
src={urlForLocal(worker.employee.avatar)}
alt="avatar"
@ -538,7 +498,6 @@ 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"}
@ -562,6 +521,7 @@ export const TrackerModal = ({
</div>
<div className="create-task-body">
<div className="create-task-body__left">
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
maxLength="100"
@ -739,7 +699,7 @@ export const TrackerModal = ({
}
alt="avatar"
/>
<span>{removeLast(person.user.fio)}</span>
<span>{person.user.fio}</span>
</div>
);
})
@ -750,7 +710,7 @@ export const TrackerModal = ({
)}
</div>
<div className="create-task-body__right__dead-line">
<p></p>
<img src={calendarImg} alt="calendar" />
<p onClick={() => setDatePickerOpen(!datePickerOpen)}>
{deadLineDate
? getCorrectDate(deadLineDate)
@ -774,7 +734,7 @@ export const TrackerModal = ({
<Loader style={"green"} />
) : (
<BaseButton styles={"button-add"} onClick={createTicket}>
Создать задачу
Создать
</BaseButton>
)}
</div>
@ -904,14 +864,7 @@ export const TrackerModal = ({
</div>
)}
<span
className="exit"
onClick={() => {
setActive(false);
setEmailError("");
setEmailWorker("");
}}
></span>
<span className="exit" onClick={() => setActive(false)}></span>
</ModalLayout>
);
};

View File

@ -227,7 +227,6 @@
min-width: 240px;
height: 42px;
width: 100%;
margin: 10px 0 10px 0;
p {
overflow: hidden;
@ -263,7 +262,7 @@
position: absolute;
width: 100%;
padding: 9.5px 12px;
top: 45px;
top: 48px;
left: 0;
background: white;
border-radius: 5px;
@ -338,7 +337,7 @@
}
.create-task-body {
padding: 15px 30px;
padding: 15px 20px;
display: flex;
column-gap: 20px;
@ -374,8 +373,8 @@
}
.ck-editor__editable.ck-rounded-corners {
min-height: 180px;
max-height: 180px;
min-height: 150px;
max-height: 150px;
}
}
@ -384,7 +383,6 @@
flex-direction: column;
align-items: start;
justify-content: end;
row-gap: 10px;
&__owner {
display: flex;
@ -716,11 +714,6 @@
}
}
}
.button-add {
margin: 0 30px;
align-self: flex-end;
}
}
.name-project {

View File

@ -97,7 +97,7 @@ export const Navigation = () => {
<div className="profile-header__personal-info">
<h3 className="profile-header__personal-info-name">
{profileInfo?.fio || profileInfo?.username}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</h3>
<NavLink end to={"/profile"}>
<img

View File

@ -95,7 +95,7 @@ export const ProfileCalendar = () => {
alt="avatar"
/>
<p className="summary__name">
{profileInfo?.fio || profileInfo?.username},{" "}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
{profileInfo.specification} разработчик
</p>
</div>

View File

@ -110,10 +110,6 @@ export const ProfileHeader = () => {
}
};
const closeMenu = () => {
setActive(false);
};
return (
<header className="profile-header">
<div className="auth-title">
@ -150,7 +146,7 @@ export const ProfileHeader = () => {
<nav className="auth-body__navigation">
<div className="profile-header__personal-info">
<h3 className="profile-header__personal-info-name">
{profileInfo?.fio || profileInfo?.username}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</h3>
<NavLink end to={"/profile"}>
<img
@ -183,7 +179,6 @@ export const ProfileHeader = () => {
</button>
</nav>
</div>
{active && <div className="backdrop" onClick={closeMenu}></div>}
</header>
);
};

View File

@ -17,6 +17,7 @@
justify-content: space-between;
align-items: center;
height: 100%;
z-index: 9;
max-width: 1160px;
width: 100%;
margin: 0 auto;
@ -35,7 +36,6 @@
@media (max-width: 414px) {
display: block;
z-index: 9;
}
&__line {
@ -64,19 +64,9 @@
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: 8;
z-index: 99;
position: absolute;
top: 0;
right: 0;
@ -109,7 +99,7 @@
flex-direction: column;
a {
padding: 15px 0 0 10px;
padding: 10px 0 0 0;
}
a,
@ -144,7 +134,7 @@
opacity: 1;
display: flex;
overflow: visible;
width: calc(100vw / 2.5);
width: calc(100vw / 3);
transition: width 0.3s;
height: 100%;
flex-direction: column;
@ -198,7 +188,6 @@
&__logout-burger {
background: none;
border: none;
padding: 15px 0 0 0;
font-weight: 500;
font-size: 16px;
line-height: 32px;

View File

@ -103,12 +103,12 @@ export const Profile = () => {
{user === "developer" ? (
<span>
<p>Добрый день,&nbsp;</p>
{profileInfo?.fio || profileInfo?.username}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</span>
) : (
<span>
<p>Добрый день,&nbsp;</p>
{profileInfo?.fio || profileInfo?.username}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</span>
)}
</h2>
@ -124,11 +124,13 @@ export const Profile = () => {
<p className="summary__name">
{user === "developer" ? (
<span>
{profileInfo?.fio || profileInfo?.username},{" "}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
{profileInfo?.specification} разработчик
</span>
) : (
<span>{profileInfo?.fio || profileInfo?.username}</span>
<span>
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</span>
)}
</p>
</div>

View File

@ -23,7 +23,8 @@ import {
setToggleTab
} from "@redux/projectsTrackerSlice";
import { removeLast, urlForLocal } from "@utils/helper";
import { urlForLocal } from "@utils/helper";
import { caseOfNum } from "@utils/helper";
import { apiRequest } from "@api/request";
@ -43,6 +44,7 @@ import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectCo
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import calendarIcon from "assets/icons/calendar.svg";
import category from "assets/icons/category.svg";
import close from "assets/icons/close.png";
import commentsBoard from "assets/icons/commentsBoard.svg";
@ -62,6 +64,7 @@ export const ProjectTracker = () => {
const dispatch = useDispatch();
const projectId = useParams();
const currentDate = new Date().getFullYear();
const [openColumnSelect, setOpenColumnSelect] = useState({});
const [selectedTab, setSelectedTab] = useState(0);
const [priorityTask, setPriorityTask] = useState(0);
@ -221,9 +224,11 @@ export const ProjectTracker = () => {
}
function openTicket(e, task) {
if (window.innerWidth < 985) {
return;
}
setSelectedTicket(task);
setModalActiveTicket(true);
document.body.style.overflow = "hidden";
}
function deleteColumn(column) {
@ -607,7 +612,7 @@ export const ProjectTracker = () => {
key={user.user_id}
onClick={() => executorFilter(user)}
>
<p>{removeLast(user.user?.fio)}</p>
<p>{user.user?.fio}</p>
<img
src={
user.user?.avatar
@ -905,7 +910,10 @@ export const ProjectTracker = () => {
}
}}
>
<p className="task__board__item__title">
<p
className="task__board__item__title"
style={{ color: titleColor }}
>
{task.title}
</p>
</div>
@ -947,7 +955,7 @@ export const ProjectTracker = () => {
{task.dead_line && (
<div className="tasks__board__item__dead-line">
<p></p>
<span style={{ color: titleColor }}>
<span>
{getCorrectDate(task.dead_line)}
</span>
</div>
@ -965,7 +973,7 @@ export const ProjectTracker = () => {
alt="avatar"
/>
<span>
{removeLast(task.executor?.fio) ||
{task.executor?.fio ||
"Исполнитель не назначен"}
</span>
</div>

View File

@ -40,7 +40,8 @@
}
@media (max-width: 483px) {
display: none;
max-width: 160px;
left: -175px;
}
}
}
@ -61,20 +62,6 @@
position: absolute;
top: -100px;
right: 58px;
@media (max-width: 1100px) {
max-width: 100px;
top: -50px;
right: 25px;
}
@media (max-width: 800px) {
display: none;
}
}
@media (max-width: 1100px) {
padding: 20px 25px;
}
}
@ -86,23 +73,12 @@
&__head {
display: flex;
margin-bottom: 33px;
@media (max-width: 650px) {
flex-direction: column;
row-gap: 10px;
align-items: center;
margin-bottom: 10px;
}
}
&__suptitle {
color: #6f6f6f;
font-size: 14px;
margin-right: 70px;
@media (max-width: 650px) {
margin-right: 0;
}
}
&__steps {
@ -126,17 +102,12 @@
font-size: 20px;
font-weight: 500;
color: #000000;
@media (max-width: 650px) {
text-align: center;
}
}
&__answers {
margin-top: 45px;
display: flex;
flex-wrap: wrap;
gap: 20px;
column-gap: 20px;
button {
border-radius: 12px;
@ -149,16 +120,8 @@
.active {
background: #1458dd;
color: whitesmoke;
border: 1px solid #1458dd;
}
@media (max-width: 1100px) {
gap: 10px;
margin-top: 20px;
}
@media (max-width: 450px) {
justify-content: center;
font-weight: 500;
border: none;
}
}
}
@ -189,7 +152,6 @@
row-gap: 19px;
column-gap: 21px;
margin-bottom: 30px;
justify-content: center;
}
&__item {

View File

@ -107,7 +107,7 @@ export const Summary = () => {
alt="avatar"
/>
<p className="summary__name">
{profileInfo?.fio || profileInfo?.username},{" "}
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username},{" "}
{profileInfo.specification} разработчик
</p>
</div>

View File

@ -91,11 +91,3 @@ export function copyProjectLink(projectId) {
`https://itguild.info/tracker/project/${projectId}`
);
}
export function removeLast(string = " ") {
let arr = string.trim().split(" ");
if (arr.length > 2) {
return arr.slice(0, -1).join(" ");
}
return string;
}