apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #113 from apuc/tracker-tasks

Browse Source 
Tracker tasks
This commit is contained in:
NikoM1k 2023-07-07 17:48:48 +03:00 committed by GitHub
commit 7f3c30234a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 705 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -9,6 +9,7 @@ import {
import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
import Home from "./pages/Home/Home";
import Candidate from "./components/Candidate/Candidate";
import Calendar from "./components/Calendar/Calendar";
@ -54,6 +55,7 @@ const App = () => {
<Route exact path="/authdev" element={<AuthForDevelopers />} />
<Route exact path="/auth" element={<AuthForPartners />} />
<Route exact path="/tracker-intro" element={<TrackerIntro />} />
<Route exact path="/tracker-auth" element={<TrackerAuth />} />
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
<Route

BIN
src/assets/images/archiveIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/trackerAuthImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

42
src/components/AuthBlock/AuthBlock.js Normal file
View File

@ -0,0 +1,42 @@
import React from "react";
import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
import "./authBlock.scss";
export const AuthBlock = ({ title, description, img }) => {
return (
<div className="auth__wrapper">
<div className="auth__info">
{title && <h3>{title}</h3>}
<img src={authImg} alt="img" />
<p>{description}</p>
</div>
<form className="auth__form">
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Email" />
<label htmlFor="password">Ваш пароль*</label>
<input
id="password"
type="password"
name="password"
placeholder="Пароль"
/>
<div className="auth__form__buttons">
<button
onClick={(e) => {
e.preventDefault();
}}
>
Войти
</button>
<span>Вспомнить пароль</span>
</div>
</form>
{img && <img src={img} alt="authImg" className="auth__img" />}
</div>
);
};
export default AuthBlock;

109
src/components/AuthBlock/authBlock.scss Normal file
View File

@ -0,0 +1,109 @@
.auth {
&__wrapper {
background: #ffffff;
border-radius: 12px;
padding: 50px 0 35px 56px;
margin-top: 40px;
display: flex;
position: relative;
@media (max-width: 1024px) {
margin-top: 100px;
}
@media (max-width: 870px) {
flex-direction: column;
padding: 25px;
}
}
&__info {
margin-right: 115px;
h3 {
font-weight: 500;
font-size: 30px;
line-height: 32px;
margin-bottom: 20px;
}
p {
max-width: 310px;
margin-top: 17px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
@media (max-width: 870px) {
max-width: none;
margin-bottom: 15px;
}
}
@media (max-width: 870px) {
margin-right: 0;
}
}
&__form {
display: flex;
flex-direction: column;
input {
margin-bottom: 30px;
background: #eff2f7;
border-radius: 8px;
min-width: 300px;
width: 100%;
padding: 8px 12px;
border: none;
outline: none;
font-weight: 400;
font-size: 15px;
line-height: 18px;
@media (max-width: 870px) {
max-width: 350px;
}
}
label {
margin-bottom: 15px;
font-weight: 400;
font-size: 15px;
line-height: 18px;
color: #000000;
}
button {
background: #52b709;
border-radius: 44px;
max-width: 130px;
width: 100%;
border: none;
font-weight: 500;
font-size: 18px;
line-height: 32px;
color: white;
height: 45px;
}
&__buttons {
display: flex;
column-gap: 20px;
align-items: center;
span {
cursor: pointer;
text-decoration-line: underline;
font-size: 13px;
font-weight: 500;
}
}
}
&__img {
position: absolute;
right: 10px;
top: -90px;
}
}

11
src/components/AuthBox/authBox.scss
View File

@ -133,13 +133,14 @@
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
transition: 0.3s;
&:hover {
background-image: none;
background-color: #ffffff;
border: 2px solid #6aaf5c;
color: #6aaf5c !important;
transition: 0.3s;
transform: scale(1.03);
//background-image: none;
//background-color: #ffffff;
//border: 2px solid #6aaf5c;
//color: #6aaf5c !important;
.loader * {
fill: #6aaf5c;

10
src/components/Common/Loader/loader.scss
View File

@ -6,9 +6,9 @@
align-items: center;
position: relative;
&:hover {
path {
fill: #6aaf5c;
}
}
//&:hover {
// path {
// fill: #6aaf5c;
// }
//}
}

51
src/components/Common/ModalLayout/modalLayout.scss
View File

@ -15,11 +15,60 @@
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 24px;
padding: 60px 60px 30px 60px;
padding: 20px 40px 30px 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.selectPerson {
align-items: start;
&__info {
font-size: 15px;
font-weight: 300;
margin: 12px 0 20px;
}
}
.invite__blocks {
display: flex;
column-gap: 20px;
span {
margin-top: 8px;
font-size: 15px;
font-weight: 300;
}
.invitePersonBlock {
display: flex;
flex-direction: column;
row-gap: 20px;
&__input {
margin: 0;
min-width: 320px;
height: 42px;
input {
height: 42px;
}
}
&__btn {
margin: 0 auto 0 0;
max-width: 242px;
width: 100%;
}
}
}
.select__person {
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 39px 10px 29px 10px;
}
}
}

50
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -1,6 +1,9 @@
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ru from "date-fns/locale/ru";
import React, { useEffect, useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
@ -17,6 +20,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
import archive from "assets/icons/archive.svg";
import arrow from "assets/icons/arrows/arrowStart.png";
import fullScreen from "assets/icons/arrows/inFullScreen.svg";
import calendarIcon from "assets/icons/calendar.svg";
import category from "assets/icons/category.svg";
import close from "assets/icons/closeProjectPersons.svg";
import del from "assets/icons/delete.svg";
@ -27,8 +31,11 @@ import send from "assets/icons/send.svg";
import watch from "assets/icons/watch.svg";
import avatarMok from "assets/images/avatarMok.png";
import { getCorrectDate } from "../../../Calendar/calendarHelper";
import "./modalTicket.scss";
registerLocale("ru", ru);
export const ModalTiсket = ({
active,
setActive,
@ -46,6 +53,11 @@ export const ModalTiсket = ({
comment: "",
});
const [comments, setComments] = useState([]);
const [deadLine, setDeadLine] = useState(task.dead_line);
const [datePickerOpen, setDatePickerOpen] = useState(false);
const [startDate, setStartDate] = useState(
task.dead_line ? new Date(task.dead_line) : new Date()
);
const [dropListOpen, setDropListOpen] = useState(false);
const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
const [executor, setExecutor] = useState(task.executor);
@ -341,6 +353,18 @@ export const ModalTiсket = ({
);
}
function selectDeadLine(date) {
apiRequest("/task/update-task", {
method: "PUT",
data: {
task_id: task.id,
dead_line: getCorrectRequestDate(date),
},
}).then(() => {
dispatch(setProjectBoardFetch(projectId));
});
}
return (
<div
className={active ? "modal-tiket active" : "modal-tiket"}
@ -363,9 +387,9 @@ export const ModalTiсket = ({
</h3>
<div className="content__task">
<span>Задача</span>
{editOpen ? (
<input
maxLength="100"
value={inputsValue.title}
onChange={(e) => {
setInputsValue((prevValue) => ({
@ -464,7 +488,6 @@ export const ModalTiсket = ({
<div className="workers">
<div className="workers_box task__info">
<span className="exit" onClick={() => setActive(false)}></span>
<span className="nameProject">{task.title}</span>
<p className="workers__creator">Создатель : {task.user?.fio}</p>
{executor ? (
@ -594,6 +617,29 @@ export const ModalTiсket = ({
</div>
<div className="workers_box-middle">
<div className="deadLine">
<div
className="deadLine__container"
onClick={() => setDatePickerOpen(!datePickerOpen)}
>
<img src={calendarIcon} alt="calendar" />
<span>
{deadLine ? getCorrectDate(deadLine) : "Срок исполнения:"}
</span>
</div>
<DatePicker
className="datePicker"
open={datePickerOpen}
locale="ru"
selected={startDate}
onChange={(date) => {
setDatePickerOpen(false);
setStartDate(date);
setDeadLine(date);
selectDeadLine(date);
}}
/>
</div>
<div className="time">
<img src={watch}></img>
<span>Длительность : </span>

110
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -33,6 +33,9 @@
display: flex;
align-items: center;
flex-direction: row;
color: #1458DD;
font-weight: 700;
font-size: 22px;
&__category {
margin-right: 17px;
@ -104,9 +107,9 @@
h5 {
font-family: "Inter", sans-serif;
font-weight: 500;
font-weight: 600;
font-style: normal;
font-size: 16px;
font-size: 19px;
line-height: 24px;
color: #1a1919;
margin-bottom: 0;
@ -280,7 +283,7 @@
&__description {
display: flex;
flex-direction: column;
margin-top: 10px;
margin-top: 12px;
textarea {
min-height: 120px;
@ -405,6 +408,7 @@
display: flex;
flex-direction: column;
font-size: 14px;
margin-top: 8px;
&__list {
display: flex;
@ -420,13 +424,17 @@
.exit {
cursor: pointer;
position: absolute;
top: 35px;
right: 40px;
top: 25px;
right: 30px;
width: 13px;
height: 13px;
display: flex;
align-items: center;
justify-content: center;
&:before,
&:after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: #263238;
@ -459,6 +467,7 @@
align-items: center;
position: relative;
margin-bottom: 5px;
margin-top: 12px;
span {
color: #000000;
@ -530,12 +539,89 @@
}
}
.deadLine {
position: relative;
&__container {
padding: 5px 10px 5px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid gray;
cursor: pointer;
display: flex;
position: relative;
align-items: center;
justify-content: center;
max-width: 185px;
img {
width: 16px;
height: 16px;
}
span {
font-size: 12px;
color: #000000;
margin-left: 10px;
font-weight: 500;
}
}
.datePicker {
visibility: hidden;
height: 0;
padding: 0;
width: 0;
position: absolute;
}
.react-datepicker-wrapper {
position: absolute;
}
.react-datepicker {
border: 1px solid #398208;
}
.react-datepicker-popper {
top: 10px !important;
left: -110px !important;
}
.react-datepicker__current-month {
font-size: 14px;
font-family: "LabGrotesque", sans-serif;
text-transform: capitalize;
}
.react-datepicker__header {
padding: 5px 0 10px;
border-bottom: 1px solid #398208;
}
.react-datepicker__day {
font-size: 14px;
width: 35px;
font-family: "LabGrotesque", sans-serif;
}
.react-datepicker__day-name {
font-size: 14px;
width: 35px;
font-family: "LabGrotesque", sans-serif;
}
.react-datepicker__triangle {
left: 85px !important;
&:before {
border-bottom-color: #398208 !important;
}
}
}
.time {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
margin-top: 20px;
margin-top: 10px;
width: 160px;
p {
@ -552,6 +638,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 8px;
span {
margin-left: 5px;
@ -585,7 +672,6 @@
.task__info {
display: flex;
flex-direction: column;
row-gap: 5px;
.delete {
cursor: pointer;
@ -649,7 +735,7 @@
}
&_box {
padding: 25px 85px 40px 40px;
padding: 25px 85px 25px 40px;
border-bottom: 1px solid #f1f1f1;
&-middle {
@ -658,7 +744,7 @@
}
&-bottom {
padding: 40px 110px 75px 56px;
padding: 20px 110px 35px 56px;
font-weight: 400;
font-size: 14px;
line-height: 38px;
@ -669,6 +755,10 @@
align-items: center;
padding-left: 10px;
img {
width: 11px;
}
p {
margin: 0 0 0 12px;
}

58
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -1,6 +1,8 @@
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ru from "date-fns/locale/ru";
import React, { useEffect, useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate, useParams } from "react-router-dom";
@ -8,6 +10,7 @@ import {
deletePersonOnProject,
getBoarderLoader,
modalToggle,
setProjectBoardFetch,
setToggleTab,
} from "@redux/projectsTrackerSlice";
@ -15,6 +18,7 @@ import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
@ -24,10 +28,9 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
import archive from "assets/icons/archive.svg";
import archive2 from "assets/icons/archive.svg";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowStart from "assets/icons/arrows/arrowStart.png";
import calendarIcon from "assets/icons/calendar.svg";
import close from "assets/icons/close.png";
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
@ -37,10 +40,13 @@ import send from "assets/icons/send.svg";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
import watch from "assets/icons/watch.svg";
import archive from "assets/images/archiveIcon.png";
import avatarMok from "assets/images/avatarMok.png";
import "./ticketFullScreen.scss";
registerLocale("ru", ru);
export const TicketFullScreen = () => {
const [modalAddWorker, setModalAddWorker] = useState(false);
const ticketId = useParams();
@ -66,10 +72,17 @@ export const TicketFullScreen = () => {
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
const [users, setUsers] = useState([]);
const [deadLine, setDeadLine] = useState("");
const [datePickerOpen, setDatePickerOpen] = useState(false);
const [startDate, setStartDate] = useState(null);
useEffect(() => {
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
setTaskInfo(taskInfo);
setDeadLine(taskInfo.dead_line);
setStartDate(
taskInfo.dead_line ? new Date(taskInfo.dead_line) : new Date()
);
setInputsValue({
title: taskInfo.title,
description: taskInfo.description,
@ -364,6 +377,16 @@ export const TicketFullScreen = () => {
});
}
function selectDeadLine(date) {
apiRequest("/task/update-task", {
method: "PUT",
data: {
task_id: taskInfo.id,
dead_line: getCorrectRequestDate(date),
},
}).then(() => {});
}
return (
<section className="ticket-full-screen">
<ProfileHeader />
@ -412,7 +435,7 @@ export const TicketFullScreen = () => {
<>
<div className="tracker__tabs__content content-tabs">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<div className="tasks__head__wrapper tasks__head__wrapper__fullScreen">
<h5>Проект : {projectInfo.name}</h5>
<TrackerModal
@ -518,9 +541,9 @@ export const TicketFullScreen = () => {
<div className="modal-tiket__content ticket">
<div className="content ticket-whith">
<div className="content__task">
<span>Задача</span>
{editOpen ? (
<input
maxLength="100"
value={inputsValue.title}
onChange={(e) => {
setInputsValue((prevValue) => ({
@ -752,6 +775,31 @@ export const TicketFullScreen = () => {
</div>
<div className="workers_box-middle">
<div className="deadLine">
<div
className="deadLine__container"
onClick={() => setDatePickerOpen(!datePickerOpen)}
>
<img src={calendarIcon} alt="calendar" />
<span>
{deadLine
? getCorrectDate(deadLine)
: "Срок исполнения:"}
</span>
</div>
<DatePicker
className="datePicker"
open={datePickerOpen}
locale="ru"
selected={startDate}
onChange={(date) => {
setDatePickerOpen(false);
setStartDate(date);
setDeadLine(date);
selectDeadLine(date);
}}
/>
</div>
<div className="time">
<img src={watch}></img>
<span>Длительность : </span>
@ -810,7 +858,7 @@ export const TicketFullScreen = () => {
<p onClick={copyTicketLink}>ссылка на задачу</p>
</div>
<div>
<img src={archive2} alt="arch"></img>
<img src={archive} alt="arch"></img>
<p>в архив</p>
</div>
<div onClick={deleteTask}>

43
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
View File

@ -53,7 +53,7 @@ export const TrackerModal = ({
const [valueColumn, setValueColumn] = useState("");
const [nameProject, setNameProject] = useState("");
const [valueTiket, setValueTiket] = useState("");
const [descriptionTicket, setDescriptionTicket] = useState("Описание задачи");
const [descriptionTicket, setDescriptionTicket] = useState("");
const [workers, setWorkers] = useState([]);
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
const [selectedWorker, setSelectedWorker] = useState(null);
@ -271,8 +271,9 @@ export const TrackerModal = ({
// }}
>
{modalType === "addWorker" && (
<div>
<div className="title-project">
<>
<div className="select__person">
<div className="title-project selectPerson">
<h4>Добавьте участника</h4>
{/*<div className="input-container">*/}
{/* <input*/}
@ -281,9 +282,16 @@ export const TrackerModal = ({
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
{/* />*/}
{/*</div>*/}
<p className="selectPerson__info">
Выберите пользователя в проекте или добавьте по e- mail
</p>
<div className="invite__blocks">
<div className="addPersonBlock">
<div
className={
selectWorkersOpen ? "select__worker open" : "select__worker"
selectWorkersOpen
? "select__worker open"
: "select__worker"
}
onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
>
@ -322,11 +330,30 @@ export const TrackerModal = ({
</div>
)}
</div>
</div>
<BaseButton styles={"button-add"} onClick={addUserToProject}>
<BaseButton
styles={"button-add addPersonBtn"}
onClick={addUserToProject}
>
Добавить
</BaseButton>
</div>
<span>или</span>
<div className="invitePersonBlock">
<div className="input-container invitePersonBlock__input">
<input
className="name-project"
placeholder="email"
type="email"
/>
</div>
<BaseButton styles={"button-add invitePersonBlock__btn"}>
Отправить приглашение
</BaseButton>
</div>
</div>
</div>
</div>
</>
)}
{modalType === "createTiketProject" && (
<>
@ -334,6 +361,7 @@ export const TrackerModal = ({
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
maxLength="100"
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
@ -355,6 +383,7 @@ export const TrackerModal = ({
"blockQuote",
],
removePlugins: ["BlockQuote"],
placeholder: "Описание задачи",
}}
onChange={(event, editor) => {
const data = editor.getData();
@ -443,6 +472,7 @@ export const TrackerModal = ({
<h4>{titleProject}</h4>
<div className="input-container">
<input
maxLength="30"
className="name-project"
value={nameProject}
onChange={(e) => setNameProject(e.target.value)}
@ -477,6 +507,7 @@ export const TrackerModal = ({
<h4>Введите название колонки</h4>
<div className="input-container">
<input
maxLength="100"
className="name-project"
value={valueColumn}
onChange={(e) => setValueColumn(e.target.value)}

28
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@ -30,7 +30,6 @@
display: flex;
align-items: center;
flex-direction: column;
margin: 0 0 15px 0;
row-gap: 5px;
.select-priority {
@ -79,7 +78,7 @@
}
.input-container {
width: 320px;
width: 100%;
height: 35px;
background: #ffffff;
border-radius: 8px;
@ -91,7 +90,7 @@
}
.ck-editor {
max-width: 320px;
width: 100%;
}
.ck-editor__editable.ck-rounded-corners {
@ -104,6 +103,10 @@
border-radius: 8px 8px 0 0 !important;
}
.ck-placeholder {
display: block !important;
}
.ck-content {
border: none !important;
border-radius: 0 0 8px 8px !important;
@ -111,7 +114,7 @@
}
.select__executor {
width: 320px;
width: 100%;
background: white;
border-radius: 8px;
margin: 5px 0;
@ -215,6 +218,7 @@
cursor: pointer;
position: relative;
min-width: 320px;
height: 42px;
width: 100%;
p {
@ -237,7 +241,7 @@
position: absolute;
width: 100%;
padding: 9.5px 12px;
top: 35px;
top: 48px;
left: 0;
background: white;
border-radius: 5px;
@ -286,6 +290,11 @@
margin: 0 auto;
}
.addPersonBtn {
margin: 0 auto 0 0;
margin-top: 20px;
}
.modal-add.active {
transform: scale(1);
}
@ -293,8 +302,13 @@
.exit {
cursor: pointer;
position: absolute;
top: 35px;
right: 40px;
top: 15px;
right: 20px;
width: 13px;
height: 13px;
display: flex;
align-items: center;
justify-content: center;
&:before,
&:after {

6
src/components/Modal/TrackerModal/trackerModal.scss
View File

@ -153,11 +153,15 @@
position: absolute;
top: 35px;
right: 40px;
width: 13px;
height: 13px;
display: flex;
align-items: center;
justify-content: center;
&:before,
&:after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: #263238;

89
src/pages/AuthForCandidate/AuthForCandidate.jsx
View File

@ -8,6 +8,7 @@ import { setRole } from "@redux/roleSlice";
import { apiRequest } from "@api/request";
import AuthBlock from "@components/AuthBlock/AuthBlock";
import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
@ -112,68 +113,44 @@ export const AuthForCandidate = () => {
}
}, [getToken]);
const submitHandler = () => {
let formData = new FormData(ref.current);
if (!isLoading) {
dispatch(loading(true));
apiRequest("/user/login", {
method: "POST",
data: formData,
}).then((res) => {
if (!res.access_token) {
dispatch(loading(false));
} else {
localStorage.setItem("auth_token", res.access_token);
localStorage.setItem("id", res.id);
localStorage.setItem("cardId", res.card_id);
localStorage.setItem("role_status", res.status);
localStorage.setItem(
"access_token_expired_at",
res.access_token_expired_at
);
dispatch(auth(true));
dispatch(setUserInfo(res));
dispatch(loading(false));
dispatch(setRole("ROLE_PARTNER"));
}
});
}
};
// const submitHandler = () => {
// let formData = new FormData(ref.current);
// if (!isLoading) {
// dispatch(loading(true));
// apiRequest("/user/login", {
// method: "POST",
// data: formData,
// }).then((res) => {
// if (!res.access_token) {
// dispatch(loading(false));
// } else {
// localStorage.setItem("auth_token", res.access_token);
// localStorage.setItem("id", res.id);
// localStorage.setItem("cardId", res.card_id);
// localStorage.setItem("role_status", res.status);
// localStorage.setItem(
// "access_token_expired_at",
// res.access_token_expired_at
// );
// dispatch(auth(true));
// dispatch(setUserInfo(res));
// dispatch(loading(false));
// dispatch(setRole("ROLE_PARTNER"));
// }
// });
// }
// };
return (
<div className="auth-candidate">
<AuthHeader />
<div className="container">
<div className="auth__wrapper">
<div className="auth__info">
<h3>Войти, уже есть доступ</h3>
<img src={authImg} alt="img" />
<p>
если вы получили доступ пройдя 2 шага для входа или хотите узнать
свои результаты в кабинете
</p>
</div>
<form ref={ref} className="auth__form">
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Email" />
<label htmlFor="password">Ваш пароль*</label>
<input
id="password"
type="password"
name="password"
placeholder="Пароль"
<AuthBlock
title="Войти, уже есть доступ"
description="если вы получили доступ пройдя
2 шага для входа или хотите узнать
свои результаты в кабинете"
/>
<button
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
>
Войти
</button>
</form>
</div>
<div className="auth-candidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>

89
src/pages/AuthForCandidate/authForCandidate.scss
View File

@ -4,95 +4,6 @@
position: relative;
background-color: #f1f1f1;
.auth {
&__wrapper {
background: #ffffff;
border-radius: 12px;
padding: 50px 0 35px 56px;
margin-top: 40px;
display: flex;
@media (max-width: 1024px) {
margin-top: 100px;
}
@media (max-width: 870px) {
flex-direction: column;
padding: 25px;
}
}
&__info {
margin-right: 115px;
h3 {
font-weight: 500;
font-size: 30px;
line-height: 32px;
margin-bottom: 20px;
}
p {
max-width: 310px;
margin-top: 17px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
@media (max-width: 870px) {
max-width: none;
margin-bottom: 15px;
}
}
@media (max-width: 870px) {
margin-right: 0;
}
}
&__form {
display: flex;
flex-direction: column;
input {
margin-bottom: 30px;
background: #eff2f7;
border-radius: 8px;
min-width: 300px;
width: 100%;
padding: 8px 12px;
border: none;
outline: none;
font-weight: 400;
font-size: 15px;
line-height: 18px;
@media (max-width: 870px) {
max-width: 350px;
}
}
label {
margin-bottom: 15px;
font-weight: 400;
font-size: 15px;
line-height: 18px;
color: #000000;
}
button {
background: #52b709;
border-radius: 44px;
max-width: 130px;
border: none;
font-weight: 500;
font-size: 18px;
line-height: 32px;
color: white;
height: 45px;
}
}
}
&__start {
margin-top: 60px;
display: flex;

21
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -34,7 +34,6 @@ import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import archive from "assets/icons/archiveTracker.svg";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import close from "assets/icons/close.png";
@ -46,8 +45,11 @@ import trackerNoTasks from "assets/icons/trackerNoTasks.svg";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
import accept from "assets/images/accept.png";
import archive from "assets/images/archiveIcon.png";
import avatarMok from "assets/images/avatarMok.png";
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
export const ProjectTracker = () => {
const dispatch = useDispatch();
const projectId = useParams();
@ -390,7 +392,10 @@ export const ProjectTracker = () => {
/>
<div className="persons__list__count">
<span>{projectBoard.projectUsers?.length}</span>
участник
{caseOfNum(
projectBoard.projectUsers?.length,
"persons"
)}
</div>
<div className="persons__list__info">
<span>В проекте - </span>
@ -480,7 +485,7 @@ export const ProjectTracker = () => {
setSelectedExecutorOpen(!selectExecutorOpen)
}
>
<p>Выберите исполнитель</p>
<p>Выберите исполнителя</p>
<img
className={selectExecutorOpen ? "open" : ""}
src={arrowDown}
@ -546,7 +551,7 @@ export const ProjectTracker = () => {
>
<div className="board__head">
<span>{column.title}</span>
<div>
<div className="board__head__more">
<span
className="add"
onClick={() =>
@ -649,6 +654,14 @@ export const ProjectTracker = () => {
/>
)}
</div>
<div className="tasks__board__item__deadLine">
<p>Срок исполнения:</p>
<span>
{task.dead_line
? getCorrectDate(task.dead_line)
: "Не выбран"}
</span>
</div>
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />

2
src/pages/Tracker/Tracker.js
View File

@ -23,10 +23,10 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
import archive from "assets/icons/archiveTracker.svg";
import search from "assets/icons/serchIcon.png";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
import archive from "assets/images/archiveIcon.png";
import avatarMok from "assets/images/avatarMok.png";
import noProjects from "assets/images/noProjects.png";

51
src/pages/Tracker/tracker.scss
View File

@ -55,6 +55,11 @@
align-items: center;
color: black;
img {
width: 16px;
height: 16px;
}
@media (max-width: 490px) {
padding: 8px 20px 8px 14px;
}
@ -214,6 +219,10 @@
justify-content: space-between;
padding: 0 10px;
align-items: center;
&__fullScreen {
max-width: 1160px;
}
}
h5 {
@ -616,6 +625,8 @@
margin: 0 auto;
overflow: auto;
max-width: 100%;
transform: scaleY(-1);
align-items: end;
&::-webkit-scrollbar {
height: 8px;
@ -650,6 +661,7 @@
transition: all 0.3s ease;
//max-height: 500px;
//overflow-y: auto;
transform: scaleY(-1);
&::-webkit-scrollbar {
width: 3px;
@ -692,9 +704,8 @@
transition: 0.4s;
&:hover {
transform: scale(0.99);
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
transition: 0.4s;
transform: scale(1.025);
transition: 0.3s;
}
&__hide {
@ -712,6 +723,12 @@
font-size: 16px;
line-height: 24px;
margin-bottom: 0;
max-height: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
span {
@ -773,6 +790,23 @@
}
}
&__deadLine {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
p {
font-weight: 500;
font-size: 14px;
}
span {
font-weight: 500;
font-size: 14px;
}
}
&__executor {
display: flex;
justify-content: space-between;
@ -852,11 +886,13 @@
&__noItems {
font-weight: 500;
font-size: 25px;
transform: scaleY(-1);
}
&__noTasks {
display: flex;
flex-direction: column;
transform: scaleY(-1);
&Info {
display: flex;
@ -889,6 +925,11 @@
justify-content: space-between;
min-width: 300px;
&__more {
display: flex;
align-items: center;
}
span {
color: #6f6f6f;
font-weight: 500;
@ -916,6 +957,7 @@
bottom: 4px;
font-size: 20px;
cursor: pointer;
width: 15px;
&:hover {
font-weight: 600;
@ -1057,6 +1099,7 @@
&__info {
display: flex;
flex-direction: column;
max-width: 730px;
h5 {
font-weight: 700;
@ -1068,7 +1111,7 @@
p {
font-size: 16px;
line-height: 32px;
max-width: 400px;
max-width: 710px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

36
src/pages/TrackerAuth/TrackerAuth.js Normal file
View File

@ -0,0 +1,36 @@
import React from "react";
import AuthBlock from "@components/AuthBlock/AuthBlock";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import trackerAuthImg from "assets/images/trackerAuthImg.png";
import "./trackerAuth.scss";
export const TrackerAuth = () => {
return (
<div className="trackerAuth">
<AuthHeader />
<SideBar />
<div className="trackerAuth__content">
<div className="container">
<h1 className="trackerAuth__title">
Войдите в свое{" "}
<span>
рабочее пространство
<img src={arrowInfo} alt="arrow" />
</span>
</h1>
<AuthBlock
description="Создавайте и редактируйте задачи и проекты вместе с другими участниками команды."
img={trackerAuthImg}
/>
</div>
<Footer />
</div>
</div>
);
};

35
src/pages/TrackerAuth/trackerAuth.scss Normal file
View File

@ -0,0 +1,35 @@
.trackerAuth {
&__content {
font-family: "LabGrotesque", sans-serif;
background-color: #f1f1f1;
color: #000000;
padding: 50px 0 0;
min-height: 100vh;
@media (max-width: 1375px) {
padding-top: 100px;
}
.container {
padding-bottom: 30px;
}
}
&__title {
font-size: 30px;
font-weight: 500;
margin-bottom: 46px;
color: #000000;
span {
color: #52B709;
position: relative;
img {
position: absolute;
bottom: -15px;
right: 10px;
max-width: 300px;
}
}
}
}

11
src/utils/helper.js
View File

@ -64,7 +64,8 @@ export function getCorrectRequestDate(date) {
export function caseOfNum(number, type) {
const comments = ["коментарий", "комментария", " коментариев"];
const files = ["файлов", "файла", "файлов"];
const files = ["файл", "файла", "файлов"];
const persons = ["участник", "участника", "участников"];
const cases = [2, 0, 1, 1, 1, 2];
if (type === "comments") {
return comments[
@ -80,4 +81,12 @@ export function caseOfNum(number, type) {
: cases[number % 10 < 5 ? number % 10 : 5]
];
}
if (type === "persons") {
return persons[
number % 100 > 4 && number % 100 < 20
? 2
: cases[number % 10 < 5 ? number % 10 : 5]
];
}
}