Merge pull request #151 from apuc/registration

Registration

src/components/Common/ModalLayout/ModalLayout.jsx

@@ -13,7 +13,11 @@ export const ModalLayout = ({
   return (
     <div
       className={active ? `modal-layout active` : "modal-layout"}
-      onClick={() => setActive(false)}
+      onClick={(event) => {
+        if (event.target.className === "modal-layout active") {
+          setActive(false);
+        }
+      }}
       {...props}
     >
       <div
@@ -22,7 +26,6 @@ export const ModalLayout = ({
             ? `modal-layout__content ${styles}`
             : `modal-layout__content ${type}`
         }
-        onClick={(e) => e.stopPropagation()}
       >
         {children}
       </div>

src/components/Common/ModalLayout/modalLayout.scss

@@ -45,6 +45,16 @@
         font-weight: 300;
       }
 
+      .addPersonBlock {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        button {
+          margin: 0 auto;
+        }
+      }
+
       .invitePersonBlock {
         display: flex;
         flex-direction: column;
@@ -64,7 +74,7 @@
         }
 
         &__btn {
-          margin: 0 auto 0 0;
+          margin: 0 auto;
           max-width: 242px;
           width: 100%;
         }

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -20,6 +20,12 @@ export const ModalRegistration = ({ active, setActive }) => {
     password: "",
   });
 
+  const [inputsError, setInputsError] = useState({
+    name: false,
+    email: false,
+    password: false,
+  });
+
   const validateEmail = (email) => {
     // регулярное выражение для проверки email
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -37,20 +43,29 @@ export const ModalRegistration = ({ active, setActive }) => {
   };
 
   const { showNotification } = useNotification();
-  const submitHandler = () => {
+
-    if (!inputsValue.password || !inputsValue.userName || !inputsValue.email) {
+  const validateForm = () => {
-      return showNotification({
+    if (inputsValue.password.length < 6) {
-        show: true,
+      setInputsError((prevValue) => ({ ...prevValue, password: true }));
-        text: "Введите коректные данные",
+    }
-        type: "error",
+    if (inputsValue.userName.length < 6) {
-      });
+      setInputsError((prevValue) => ({ ...prevValue, name: true }));
     }
     if (!validateEmail(inputsValue.email)) {
-      return showNotification({
+      setInputsError((prevValue) => ({ ...prevValue, email: true }));
-        show: true,
+    }
-        text: "Введите коректный email",
+    if (
-        type: "error",
+      inputsValue.password.length < 6 ||
-      });
+      inputsValue.userName.length < 6 ||
+      !validateEmail(inputsValue.email)
+    ) {
+      return true;
+    }
+  };
+
+  const submitHandler = () => {
+    if (validateForm()) {
+      return;
     }
     apiRequest("/register/sign-up", {
       method: "POST",
@@ -90,43 +105,70 @@ export const ModalRegistration = ({ active, setActive }) => {
 
         <div className="input-body">
           <div className="input-body__box">
+            <div className="inputContainer">
               <h5>Ваше имя</h5>
               <input
-              onChange={(e) =>
+                className={inputsError.name ? "error" : ""}
+                onChange={(e) => {
+                  setInputsError({
+                    name: false,
+                    email: false,
+                    password: false,
+                  });
                   setInputsValue((prevValue) => ({
                     ...prevValue,
                     userName: e.target.value,
-                }))
+                  }));
-              }
+                }}
                 placeholder="Name"
               />
+              {inputsError.name && <span>Минимум 6 символов</span>}
+            </div>
+            <div className="inputContainer">
               <h5>E-mail</h5>
               <input
                 type="email"
-              onChange={(e) =>
+                className={inputsError.email ? "error" : ""}
+                onChange={(e) => {
+                  setInputsError({
+                    name: false,
+                    email: false,
+                    password: false,
+                  });
                   setInputsValue((prevValue) => ({
                     ...prevValue,
                     email: e.target.value,
-                }))
+                  }));
-              }
+                }}
                 placeholder="Email"
               />
+              {inputsError.email && <span>Введите коректный email</span>}
+            </div>
           </div>
 
           <div className="input-body__box">
             {/*<h5>Название компании</h5>*/}
             {/*<input></input>*/}
+            <div className="inputContainer">
               <h5>Пароль</h5>
               <input
+                className={inputsError.password ? "error" : ""}
                 type="password"
-              onChange={(e) =>
+                onChange={(e) => {
+                  setInputsError({
+                    name: false,
+                    email: false,
+                    password: false,
+                  });
                   setInputsValue((prevValue) => ({
                     ...prevValue,
                     password: e.target.value,
-                }))
+                  }));
-              }
+                }}
                 placeholder="Password"
               />
+              {inputsError.password && <span>Минимум 6 символов</span>}
+            </div>
           </div>
         </div>
         <div className="button-box">

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -59,9 +59,24 @@
             background: #eff2f7;
             border-radius: 8px;
             border: none;
-            margin-bottom: 35px;
+            margin-bottom: 5px;
             padding-left: 20px;
           }
+
+          .inputContainer {
+            height: 81px;
+            margin-bottom: 10px;
+            max-width: 294px;
+          }
+
+          span {
+            color: red;
+            font-size: 12px;
+          }
+
+          .error {
+            border: 1px solid red;
+          }
         }
       }
 

src/components/Modal/ModalSelect/modalSelect.scss

@@ -5,7 +5,7 @@
     background: #e1fccf;
     border-radius: 12px;
     transform: scale(0);
-    bottom: -90px;
+    bottom: -40px;
     right: -120px;
 
     @media (max-width: 1050px) {

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

@@ -80,7 +80,7 @@ export const ModalTiсket = ({
   const [users, setUsers] = useState([]);
   const [timerStart, setTimerStart] = useState(false);
   const [timerInfo, setTimerInfo] = useState({});
-  const [uploadedFile, setUploadedFile] = useState(null);
+  // const [uploadedFile, setUploadedFile] = useState(null);
   const [currentTimerCount, setCurrentTimerCount] = useState({
     hours: 0,
     minute: 0,
@@ -379,25 +379,26 @@ export const ModalTiсket = ({
 
     const data = await res.json();
 
-    setUploadedFile(data);
+    // setUploadedFile(data);
+    attachFile(data[0].id);
   }
 
-  function deleteLoadedFile() {
+  // function deleteLoadedFile() {
-    setUploadedFile(null);
+  //   setUploadedFile(null);
-  }
+  // }
 
-  function attachFile() {
+  function attachFile(id) {
     apiRequest("/file/attach", {
       method: "POST",
       data: {
-        file_id: uploadedFile[0].id,
+        file_id: id,
         entity_type: 2,
         entity_id: task.id,
         status: 1,
       },
     }).then((res) => {
       setTaskFiles((prevValue) => [...prevValue, res]);
-      setUploadedFile(null);
+      // setUploadedFile(null);
     });
   }
 
@@ -636,24 +637,24 @@ export const ModalTiсket = ({
                 })}
               </div>
             )}
-            {uploadedFile && (
+            {/*{uploadedFile && (*/}
-              <div className="fileLoaded">
+            {/*  <div className="fileLoaded">*/}
-                {uploadedFile.map((file) => {
+            {/*    {uploadedFile.map((file) => {*/}
-                  return (
+            {/*      return (*/}
-                    <div className="loadedFile" key={file.id}>
+            {/*        <div className="loadedFile" key={file.id}>*/}
-                      <img src={backendImg(file.url)} alt="img" key={file.id} />
+            {/*          <img src={backendImg(file.url)} alt="img" key={file.id} />*/}
-                      <div
+            {/*          <div*/}
-                        className="deleteFile"
+            {/*            className="deleteFile"*/}
-                        onClick={() => deleteLoadedFile(file)}
+            {/*            onClick={() => deleteLoadedFile(file)}*/}
-                      >
+            {/*          >*/}
-                        <img src={close} alt="delete" />
+            {/*            <img src={close} alt="delete" />*/}
-                      </div>
+            {/*          </div>*/}
-                    </div>
+            {/*        </div>*/}
-                  );
+            {/*      );*/}
-                })}
+            {/*    })}*/}
-                <button onClick={attachFile}>Загрузить</button>
+            {/*    <button onClick={attachFile}>Загрузить</button>*/}
-              </div>
+            {/*  </div>*/}
-            )}
+            {/*)}*/}
             <div className="content__communication">
               {/*<p className="tasks">*/}
               {/*  <button*/}

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

@@ -360,24 +360,8 @@
       column-gap: 25px;
       row-gap: 20px;
       margin-top: 33px;
-      max-height: 170px;
       overflow-y: auto;
 
-      &::-webkit-scrollbar {
-        width: 5px;
-        border-radius: 10px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: #cbd9f9;
-        border-radius: 20px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: #c5c0c6;
-        border-radius: 20px;
-      }
-
       .taskFile {
         cursor: pointer;
         position: relative;

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -29,6 +29,7 @@ import { useNotification } from "@hooks/useNotification";
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
+import FileTracker from "@components/FileTracker/FileTracker";
 import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
@@ -483,20 +484,26 @@ export const TicketFullScreen = () => {
     setUploadedFile(null);
   }
 
+  // function deleteFile(file) {
+  //   apiRequest("/file/detach", {
+  //     method: "DELETE",
+  //     data: {
+  //       file_id: file.id,
+  //       entity_type: 2,
+  //       entity_id: taskInfo.id,
+  //       status: 0,
+  //     },
+  //   }).then(() => {
+  //     setTaskFiles((prevValue) =>
+  //       prevValue.filter((item) => item.id !== file.id)
+  //     );
+  //   });
+  // }
+
   function deleteFile(file) {
-    apiRequest("/file/detach", {
-      method: "DELETE",
-      data: {
-        file_id: file.id,
-        entity_type: 2,
-        entity_id: taskInfo.id,
-        status: 0,
-      },
-    }).then(() => {
     setTaskFiles((prevValue) =>
       prevValue.filter((item) => item.id !== file.id)
     );
-    });
   }
 
   function closeAcceptModal() {
@@ -800,19 +807,12 @@ export const TicketFullScreen = () => {
                     <div className="task__files filesFullScreen">
                       {taskFiles.map((file) => {
                         return (
-                          <div className="taskFile" key={file.id}>
+                          <FileTracker
-                            <img
+                            key={file.id}
-                              className="imgFile"
+                            file={file}
-                              src={backendImg(file.file?.url)}
+                            setDeletedTask={deleteFile}
-                              alt="img"
+                            taskId={taskInfo.id}
                           />
-                            <div
-                              className="deleteFile"
-                              onClick={() => deleteFile(file)}
-                            >
-                              <img src={fileDelete} alt="delete" />
-                            </div>
-                          </div>
                         );
                       })}
                     </div>

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

@@ -322,6 +322,7 @@ export const TrackerModal = ({
     } else {
       setCorrectProjectUsers(projectUsers);
     }
+    initListeners();
   }, [active]);
 
   useEffect(() => {
@@ -336,6 +337,38 @@ export const TrackerModal = ({
     }
   }, [taskTags, projectMarks]);
 
+  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("tags__selected__name") ||
+            div.classList.contains("tags__dropDown"))
+      )
+    ) {
+      setSelectTagsOpen(false);
+    }
+
+    if (
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("select__executor") ||
+            div.classList.contains("select__executor__dropDown"))
+      )
+    ) {
+      setSelectExecutorTaskOpen(false);
+    }
+  };
+
   return (
     <ModalLayout
       active={active}

src/components/ProjectTiket/ProjectTiket.jsx

@@ -43,7 +43,10 @@ export const ProjectTiket = ({ project, index }) => {
 
     if (
       event &&
-      !path.find((item) => item.classList && item.classList.contains("project"))
+      !path.find(
+        (div) =>
+          div.classList && div.classList.contains(`project-${project.id}`)
+      )
     ) {
       setModalSelect(false);
     }
@@ -73,7 +76,7 @@ export const ProjectTiket = ({ project, index }) => {
   function linkProject() {}
 
   return (
-    <div className="project" key={index}>
+    <div className={`project project-${project.id}`} key={index}>
       <Link
         to={`/tracker/project/${project.id}`}
         className="project__open-traker"
@@ -93,7 +96,12 @@ export const ProjectTiket = ({ project, index }) => {
         </div>
       </Link>
 
-      <span className="menu-settings" onClick={() => setModalSelect(true)}>
+      <span
+        className="menu-settings"
+        onClick={() => {
+          setModalSelect(!modalSelect);
+        }}
+      >
         ...
       </span>
 

src/components/ProjectTiket/projectTiket.scss

@@ -87,7 +87,7 @@
     font-size: 21px;
     color: #6f6f6f;
     right: 26px;
-    top: 59px;
+    top: 10px;
   }
 
   &__avatar {
@@ -104,10 +104,10 @@
     position: absolute;
     bottom: 18px;
     left: 26px;
-    color: #678eda;
+    color: #0042b4;
     text-decoration: underline;
-    font-size: 12px;
+    font-size: 14px;
-    font-weight: 300;
+    font-weight: 400;
     line-height: 17px;
   }
 }

src/pages/Summary/Summary.js

@@ -151,6 +151,9 @@ export const Summary = () => {
                     </a>
                   );
                 })}
+              {!Boolean(gitInfo.length) && (
+                <p className="noGitItems">Нет актуальных проектов</p>
+              )}
             </div>
           </div>
         )}

src/pages/Summary/summary.scss

@@ -298,6 +298,16 @@
       column-gap: 25px;
       justify-content: space-between;
 
+      .noGitItems {
+        width: 100%;
+        font-size: 20px;
+        background: #FFFFFF;
+        border-radius: 12px;
+        padding: 35px 30px 30px 45px;
+        color: #000000;
+        font-weight: 600;
+      }
+
       .gitItem {
         width: 48%;
         display: flex;

src/pages/Tracker/tracker.scss

@@ -391,9 +391,9 @@
               flex-direction: column;
               background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
               border-radius: 40px;
-              padding: 31px 128px 41px 49px;
+              padding: 15px 30px;
               cursor: default;
-              width: 650px;
+              width: 800px;
 
               &__close {
                 cursor: pointer;
@@ -410,7 +410,6 @@
                 align-items: end;
                 color: #1458dd;
                 font-size: 22px;
-                margin-top: 10px;
                 span {
                   font-size: 44px;
                   font-weight: 700;
@@ -462,7 +461,7 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                max-width: 190px;
+                max-width: 300px;
                 width: 100%;
 
                 .avatar {
@@ -479,7 +478,7 @@
                   color: #807777;
                   width: auto;
                   height: auto;
-                  max-width: 130px;
+                  max-width: 215px;
                   overflow: hidden;
                   white-space: nowrap;
                   text-overflow: ellipsis;