Merge pull request #144 from apuc/registration

Registration

src/components/Modal/AcceptModal/AcceptModal.jsx

@@ -4,15 +4,19 @@ import close from "assets/icons/closeProjectPersons.svg";
 
 import "./acceptModal.scss";
 
-export const AcceptModal = ({ closeModal, agreeHandler }) => {
+export const AcceptModal = ({ title, closeModal, agreeHandler }) => {
   return (
     <div className="backDrop">
       <div className="acceptModal">
-        <h3 className="acceptModal__title">
+        <h3 className="acceptModal__title">{title}</h3>
-          Вы точно хотите переместить задачу в архив?
-        </h3>
         <div className="acceptModal__buttons">
-          <button className="agree" onClick={agreeHandler}>
+          <button
+            className="agree"
+            onClick={() => {
+              agreeHandler();
+              closeModal();
+            }}
+          >
             Да
           </button>
           <button className="cancel" onClick={closeModal}>

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
+
+import { apiRequest } from "@api/request";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
@@ -10,6 +12,24 @@ import telegramLogo from "assets/icons/tgLogo.svg";
 import "./modalRegistration.scss";
 
 export const ModalRegistration = ({ active, setActive }) => {
+  const [inputsValue, setInputsValue] = useState({
+    userName: "",
+    email: "",
+    password: "",
+  });
+
+  const submitHandler = () => {
+    apiRequest("/register/sign-up", {
+      method: "POST",
+      data: {
+        username: inputsValue.userName,
+        email: inputsValue.email,
+        password: inputsValue.password,
+      },
+    }).then((data) => {
+      console.log(data);
+    });
+  };
   return (
     <ModalLayout active={active} setActive={setActive} styles={"registration"}>
       <div className="registration-body__left">
@@ -24,28 +44,58 @@ export const ModalRegistration = ({ active, setActive }) => {
         <div className="input-body">
           <div className="input-body__box">
             <h5>Ваше имя</h5>
-            <input></input>
+            <input
+              onChange={(e) =>
+                setInputsValue((prevValue) => ({
+                  ...prevValue,
+                  userName: e.target.value,
+                }))
+              }
+              placeholder="Name"
+            />
             <h5>E-mail</h5>
-            <input></input>
+            <input
+              type="email"
+              onChange={(e) =>
+                setInputsValue((prevValue) => ({
+                  ...prevValue,
+                  email: e.target.value,
+                }))
+              }
+              placeholder="Email"
+            />
           </div>
 
           <div className="input-body__box">
-            <h5>Название компании</h5>
+            {/*<h5>Название компании</h5>*/}
-            <input></input>
+            {/*<input></input>*/}
             <h5>Пароль</h5>
-            <input></input>
+            <input
+              type="password"
+              onChange={(e) =>
+                setInputsValue((prevValue) => ({
+                  ...prevValue,
+                  password: e.target.value,
+                }))
+              }
+              placeholder="Password"
+            />
           </div>
         </div>
         <div className="button-box">
           <BaseButton
-            onClick={(e) => e.preventDefault()}
+            onClick={() => submitHandler()}
-            styles={"button-box__submit"}
+            styles={
+              inputsValue.userName && inputsValue.email && inputsValue.password
+                ? "button-box__submit"
+                : "button-box__submit disable"
+            }
           >
             Отправить
           </BaseButton>
-          <h5>
+          {/*<h5>*/}
-            У вас уже есть аккаунт? <p>Войти</p>
+          {/*  У вас уже есть аккаунт? <p>Войти</p>*/}
-          </h5>
+          {/*</h5>*/}
         </div>
       </div>
       <div className="registration-body__right">

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -77,6 +77,11 @@
           margin-right: 55px;
         }
 
+        .disable {
+          opacity: 0.5;
+          pointer-events: none;
+        }
+
         h5 {
           display: flex;
           align-items: flex-end;

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

@@ -1011,6 +1011,7 @@ export const ModalTiсket = ({
         </div>
         {acceptModalOpen && (
           <AcceptModal
+            title={"Вы точно хотите переместить задачу в архив?"}
             closeModal={closeAcceptModal}
             agreeHandler={deleteTask}
           />

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

@@ -1207,7 +1207,11 @@ export const TicketFullScreen = () => {
         )}
       </div>
       {acceptModalOpen && (
-        <AcceptModal closeModal={closeAcceptModal} agreeHandler={deleteTask} />
+        <AcceptModal
+          title={"Вы точно хотите переместить задачу в архив?"}
+          closeModal={closeAcceptModal}
+          agreeHandler={deleteTask}
+        />
       )}
       <Footer />
     </section>

src/pages/ProjectTracker/ProjectTracker.js

@@ -33,6 +33,7 @@ import { useNotification } from "@hooks/useNotification";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
+import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
@@ -74,6 +75,8 @@ export const ProjectTracker = () => {
     add: false,
     edit: false,
   });
+  const [acceptModalOpen, setAcceptModalOpen] = useState(false);
+  const [currentColumnDelete, setCurrentColumnDelete] = useState(null);
   const [color, setColor] = useState("#aabbcc");
   const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
   const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
@@ -420,6 +423,10 @@ export const ProjectTracker = () => {
     }
   };
 
+  function closeAcceptModal() {
+    setAcceptModalOpen(false);
+  }
+
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -905,7 +912,14 @@ export const ProjectTracker = () => {
                             </div>
                             <div
                               className="column__select__item"
-                              onClick={() => deleteColumn(column)}
+                              onClick={() => {
+                                if (column.tasks.length) {
+                                  setAcceptModalOpen(true);
+                                  setCurrentColumnDelete(column);
+                                } else {
+                                  deleteColumn(column);
+                                }
+                              }}
                             >
                               <img src={del} alt="delete" />
                               <span>Удалить</span>
@@ -1051,6 +1065,13 @@ export const ProjectTracker = () => {
           )}
         </div>
       </div>
+      {acceptModalOpen && (
+        <AcceptModal
+          title={"В колонке еще есть задачи, Вы точно хотите удалить её ?"}
+          closeModal={closeAcceptModal}
+          agreeHandler={() => deleteColumn(currentColumnDelete)}
+        />
+      )}
       <Footer />
     </div>
   );