registration

This commit is contained in:
Mikola 2023-11-03 16:23:21 +03:00
parent 74ea0f9c77
commit 7304b01a5d
6 changed files with 81 additions and 16 deletions

View File

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

View File

@ -1,8 +1,10 @@
import React from "react"; import React, { useState } from "react";
import BaseButton from "@components/Common/BaseButton/BaseButton"; import BaseButton from "@components/Common/BaseButton/BaseButton";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import { apiRequest } from "@api/request";
import anyMoment from "assets/icons/anyMoment.svg"; import anyMoment from "assets/icons/anyMoment.svg";
import doc from "assets/icons/doc.svg"; import doc from "assets/icons/doc.svg";
import telegramLogo from "assets/icons/tgLogo.svg"; import telegramLogo from "assets/icons/tgLogo.svg";
@ -10,6 +12,24 @@ import telegramLogo from "assets/icons/tgLogo.svg";
import "./modalRegistration.scss"; import "./modalRegistration.scss";
export const ModalRegistration = ({ active, setActive }) => { 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 ( return (
<ModalLayout active={active} setActive={setActive} styles={"registration"}> <ModalLayout active={active} setActive={setActive} styles={"registration"}>
<div className="registration-body__left"> <div className="registration-body__left">
@ -24,28 +44,39 @@ export const ModalRegistration = ({ active, setActive }) => {
<div className="input-body"> <div className="input-body">
<div className="input-body__box"> <div className="input-body__box">
<h5>Ваше имя</h5> <h5>Ваше имя</h5>
<input></input> <input
onChange={(e) => setInputsValue((prevValue) => ({...prevValue, userName: e.target.value}))}
placeholder='Name'
/>
<h5>E-mail</h5> <h5>E-mail</h5>
<input></input> <input
type='email'
onChange={(e) => setInputsValue((prevValue) => ({...prevValue, email: e.target.value}))}
placeholder='Email'
/>
</div> </div>
<div className="input-body__box"> <div className="input-body__box">
<h5>Название компании</h5> {/*<h5>Название компании</h5>*/}
<input></input> {/*<input></input>*/}
<h5>Пароль</h5> <h5>Пароль</h5>
<input></input> <input
type='password'
onChange={(e) => setInputsValue((prevValue) => ({...prevValue, password: e.target.value}))}
placeholder='Password'
/>
</div> </div>
</div> </div>
<div className="button-box"> <div className="button-box">
<BaseButton <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> </BaseButton>
<h5> {/*<h5>*/}
У вас уже есть аккаунт? <p>Войти</p> {/* У вас уже есть аккаунт? <p>Войти</p>*/}
</h5> {/*</h5>*/}
</div> </div>
</div> </div>
<div className="registration-body__right"> <div className="registration-body__right">

View File

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

View File

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

View File

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

View File

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