refactor & debug burger-menu, add participant

add column and deploying a task

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -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 ? (

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -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;

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -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,19 +339,6 @@ 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: "Приглашение отправлено",
@@ -346,6 +347,35 @@ 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) => {
@@ -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>
   );
 };

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -227,6 +227,7 @@
     min-width: 240px;
     height: 42px;
     width: 100%;
+    margin: 10px 0 10px 0;
 
     p {
       overflow: hidden;