tracker tasks

This commit is contained in:
Mikola
2023-09-11 18:28:56 +03:00
parent 617ca5af6e
commit 3b773e0008
18 changed files with 168 additions and 83 deletions

View File

@ -12,7 +12,8 @@ import { Loader } from "@components/Common/Loader/Loader";
import ModalErrorLogin from "@components/Modal/ModalErrorLogin/ModalErrorLogin";
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
import ellipse from "assets/icons/ellipse.png";
import authHead from "assets/icons/authHead.svg"
import eyePassword from "assets/icons/passwordIcon.svg"
import "./authBox.scss";
@ -27,6 +28,7 @@ export const AuthBox = ({ title }) => {
const [error, setError] = useState(null);
const [modalError, setModalError] = useState(false);
const [modalReg, setModalReg] = useState(false);
const [showPassword, setShowPassword] = useState(false)
useEffect(() => {
if (!localStorage.getItem("auth_token")) {
@ -73,23 +75,25 @@ export const AuthBox = ({ title }) => {
return (
<div className="auth-box">
<h2 className="auth-box__header">
Войти в <span>систему</span>
Вход <img src={authHead} alt='authImg' />
</h2>
<div className="auth-box__title">
<img src={ellipse} alt="." />
<span>{title}</span>
</div>
<form ref={ref} className="auth-box__form">
<label htmlFor="login">Ваш логин:</label>
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Логин" />
<label htmlFor="password">Пароль:</label>
<input
id="password"
type="password"
name="password"
placeholder="Пароль"
/>
<label htmlFor="password">Ваш пароль*</label>
<div className='inputWrapper'>
<input
id="password"
type={showPassword ? "text" : "password"}
name="password"
placeholder="Пароль"
/>
<img onClick={() => setShowPassword(!showPassword)} className='eye' src={eyePassword} alt='eye' />
</div>
{error && (
<div className="auth-box__form-error">
@ -111,18 +115,23 @@ export const AuthBox = ({ title }) => {
>
{isLoading ? <Loader /> : "Войти"}
</button>
<span className="auth-box__reset">
Вспомнить пароль
</span>
<ModalRegistration active={modalReg} setActive={setModalReg} />
<button
className="auth-box__form-btn--role auth-box__auth-link"
onClick={(e) => {
e.preventDefault();
setModalReg(true);
}}
>
Регистрация
</button>
</div>
<p className="auth-box__registration">
У вас еще нет аккаунта? &nbsp;
<span
onClick={(e) => {
e.preventDefault();
setModalReg(true);
}}
>
Зарегистрироваться
</span>
</p>
</form>
</div>
);

View File

@ -9,8 +9,7 @@
}
&__header {
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-size: 50px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
@ -35,7 +34,6 @@
}
&__sign-in {
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-weight: 700;
font-style: normal;
@ -45,7 +43,6 @@
margin-top: 164px;
span {
font-family: "GT Eesti Pro Display";
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
@ -55,21 +52,14 @@
&__title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
margin-bottom: 65px;
margin-bottom: 54px;
span {
color: #18586e;
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 500;
color: #8DC63F;
font-size: 50px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-left: 10px;
}
img {
@ -92,34 +82,46 @@
flex-direction: column;
label {
color: #48802d;
font-family: "GT Eesti Pro Display";
font-size: 2.4em;
font-weight: 500;
font-size: 16px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
line-height: 19.2px;
text-align: left;
margin-bottom: 20px;
margin-left: 45px;
margin-bottom: 25px;
color: #000000;
}
.inputWrapper {
width: 366px;
position: relative;
.eye {
cursor: pointer;
position: absolute;
right: 20px;
top: 15px;
}
}
input {
max-width: 366px;
height: 75px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
width: 100%;
height: 52.5px;
//box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 8px;
//border: 1px solid #c4c4c4;
border: none;
background-color: #ffffff;
margin-bottom: 60px;
font-family: "GT Eesti Pro Display";
font-size: 2.2em;
font-weight: 300;
margin-bottom: 35px;
font-size: 15px;
font-weight: 400;
line-height: 18px;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
padding: 16px 15px 16px 22px;
outline: none;
}
@ -130,10 +132,10 @@
}
&-btn {
width: 268px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
width: 138px;
height: 50px;
//box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 44px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
@ -145,12 +147,10 @@
);
border: none;
color: #ffffff;
font-family: "Muller";
font-weight: 500;
font-size: 2.2em;
font-weight: bold;
letter-spacing: normal;
line-height: 71.88px;
line-height: 32px;
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
@ -164,7 +164,8 @@
//color: #6aaf5c !important;
.loader * {
fill: #6aaf5c;
fill: #fff !important;
max-width: 40px;
}
}
@ -174,7 +175,6 @@
border-radius: 38px;
background-color: #f5f5f5;
border: 2px solid #6aaf5c;
font-family: "Muller";
font-size: 2em;
font-weight: 400;
letter-spacing: normal;
@ -186,9 +186,32 @@
.loader * {
fill: #fff !important;
max-width: 40px;
}
}
}
&__reset {
color: #000000;
font-size: 13px;
line-height: 16px;
cursor: pointer;
text-decoration: underline;
}
&__registration {
color: #000000;
font-size: 17px;
font-weight: 400;
margin-top: 45px;
line-height: 32px;
span {
cursor: pointer;
color: #52B709;
font-weight: 700;
}
}
}
@media (max-width: 575.98px) {

View File

@ -25,7 +25,12 @@ export const AuthHeader = () => {
</NavLink>
</li>
<li>
<a href="#">Кабинет разработчика</a>
<a
onClick={(e) => {
e.preventDefault();
scrollToForm();
}}
>Кабинет разработчика</a>
</li>
<li>
<a href="#">Школа</a>

View File

@ -113,6 +113,13 @@ export const ModalTiсket = ({
}
function editTask() {
if (!inputsValue.title || !inputsValue.description) {
return showNotification({
show: true,
text: "Заполните поля",
type: "error",
});
}
apiRequest("/task/update-task", {
method: "PUT",
data: {
@ -121,6 +128,7 @@ export const ModalTiсket = ({
description: inputsValue.description,
},
}).then((res) => {
setEditOpen(!editOpen);
dispatch(setProjectBoardFetch(projectId));
showNotification({
show: true,
@ -809,7 +817,6 @@ export const ModalTiсket = ({
className={editOpen ? "edit" : ""}
onClick={() => {
if (editOpen) {
setEditOpen(!editOpen);
editTask();
} else {
setEditOpen(!editOpen);

View File

@ -2,7 +2,7 @@
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
@ -126,12 +126,24 @@
}
.taskDescription {
display: -webkit-box;
max-width: 550px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
max-height: 150px;
overflow-y: auto;
padding-right: 10px;
&::-webkit-scrollbar {
width: 4px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #cbd9f9;
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background: #c5c0c6;
border-radius: 10px;
}
}
.fullName {

View File

@ -173,6 +173,13 @@ export const TicketFullScreen = () => {
}
function editTask() {
if (!inputsValue.title || !inputsValue.description) {
return showNotification({
show: true,
text: "Заполните поля",
type: "error",
});
}
apiRequest("/task/update-task", {
method: "PUT",
data: {
@ -186,6 +193,7 @@ export const TicketFullScreen = () => {
text: "Изменения сохранены",
type: "success",
});
setEditOpen(!editOpen);
});
}
@ -985,7 +993,6 @@ export const TicketFullScreen = () => {
className={editOpen ? "edit" : ""}
onClick={() => {
if (editOpen) {
setEditOpen(!editOpen);
editTask();
} else {
setEditOpen(!editOpen);

View File

@ -133,13 +133,13 @@ export const TrackerModal = ({
dispatch(setProjectBoardFetch(projectBoard.id));
setActive(false);
setValueTiket("");
setDescriptionTicket("Описание задачи");
setDescriptionTicket("");
setSelectedExecutorTask("Выберите исполнителя задачи");
});
} else {
setActive(false);
setValueTiket("");
setDescriptionTicket("Описание задачи");
setDescriptionTicket("");
dispatch(setProjectBoardFetch(projectBoard.id));
}
showNotification({

View File

@ -7,6 +7,10 @@ import "slick-carousel/slick/slick.css";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import mockWorker from "assets/images/mock/mokPerson.png";
import avatarMockFirst from "assets/images/mock/avatarMoсk3.png"
import avatarMockSecond from "assets/images/mock/avatarMoсk4.png"
import avatarMockThird from "assets/images/mock/avatarMoсk5.png"
import avatarMockFourth from "assets/images/mock/avatarMoсk6.png"
import "./sliderWorkers.scss";
@ -17,19 +21,19 @@ export const SliderWorkers = ({ title, titleInfo, subTitle }) => {
skils: "React / Vue Front end, Middle разработчик",
},
{
avatar: mockWorker,
avatar: avatarMockFirst,
skils: "Vue / React Front end, Senior разработчик",
},
{
avatar: mockWorker,
avatar: avatarMockSecond,
skils: "NodeJs Fullstack, Middle разработчик",
},
{
avatar: mockWorker,
avatar: avatarMockThird,
skils: "React / Vue Front end, Middle разработчик",
},
{
avatar: mockWorker,
avatar: avatarMockFourth,
skils: "React / PHP Fullstack, Middle разработчик",
},
]);

View File

@ -61,10 +61,11 @@
}
p {
font-size: 15px;
font-size: 17px;
font-weight: 700;
line-height: 22px;
color: black;
width: 160px;
width: 210px;
}
&__resume {