trackerTask #12
@ -101,6 +101,21 @@
|
|||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
color: white;
|
color: white;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
max-width: 185px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -139,6 +154,11 @@
|
|||||||
transform: scale(1.03);
|
transform: scale(1.03);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__img {
|
&__img {
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
import close from "assets/icons/closeProjectPersons.svg";
|
import close from "assets/icons/closeProjectPersons.svg";
|
||||||
|
|
||||||
@ -16,12 +17,13 @@ export const ModalTrackerRegistration = ({ setModalReset, email }) => {
|
|||||||
для активации вашего аккаунта на почту
|
для активации вашего аккаунта на почту
|
||||||
<br /> <span>{email}</span>
|
<br /> <span>{email}</span>
|
||||||
</p>
|
</p>
|
||||||
<button
|
<Link
|
||||||
|
to={"/registration-setting"}
|
||||||
onClick={() => setModalReset(false)}
|
onClick={() => setModalReset(false)}
|
||||||
className="modalConfirmTracker__btn"
|
className="modalConfirmTracker__btn"
|
||||||
>
|
>
|
||||||
Понятно
|
Понятно
|
||||||
</button>
|
</Link>
|
||||||
<img
|
<img
|
||||||
onClick={() => setModalReset(false)}
|
onClick={() => setModalReset(false)}
|
||||||
src={close}
|
src={close}
|
||||||
|
29
src/components/PartnerPersonCard/PartnerPersonCard.jsx
Normal file
29
src/components/PartnerPersonCard/PartnerPersonCard.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
import { urlForLocal } from "@utils/helper";
|
||||||
|
|
||||||
|
import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
||||||
|
|
||||||
|
import "./partnerPersonCard.scss";
|
||||||
|
|
||||||
|
export const PartnerPersonCard = ({ name, img, userId }) => {
|
||||||
|
return (
|
||||||
|
<div className="partnerPersonCard">
|
||||||
|
<div className="partnerPersonCard__img">
|
||||||
|
<img src={urlForLocal(img)} alt="avatar" />
|
||||||
|
</div>
|
||||||
|
<div className="partnerPersonCard__info">
|
||||||
|
<h2 className="partnerPersonCard__name">{name}</h2>
|
||||||
|
<Link className="partnerPersonCard__report" to={`calendar/${userId}`}>
|
||||||
|
Подробный отчет
|
||||||
|
<div className="partnerPersonCard__more">
|
||||||
|
<img src={rightArrow} alt="arrow" />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PartnerPersonCard;
|
45
src/components/PartnerPersonCard/partnerPersonCard.scss
Normal file
45
src/components/PartnerPersonCard/partnerPersonCard.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
.partnerPersonCard {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 25px;
|
||||||
|
z-index: 2;
|
||||||
|
img {
|
||||||
|
width: 77px;
|
||||||
|
height: 77px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
position: relative;
|
||||||
|
background: #E1FCCF;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 15px 15px 15px 30px;
|
||||||
|
left: -15px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__report {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 10px;
|
||||||
|
color: black;
|
||||||
|
font-size: 16px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__more {
|
||||||
|
width: 41px;
|
||||||
|
height: 41px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
@ -51,9 +51,7 @@ export const ProfileCalendar = () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
apiRequest(
|
apiRequest(
|
||||||
`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
|
`/reports/index?${requestDates}&user_id =${localStorage.getItem("id")}`
|
||||||
"cardId"
|
|
||||||
)}`
|
|
||||||
).then((reports) => {
|
).then((reports) => {
|
||||||
let spendTime = 0;
|
let spendTime = 0;
|
||||||
|
|
||||||
|
@ -114,9 +114,7 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
startDate._d
|
startDate._d
|
||||||
)}`;
|
)}`;
|
||||||
apiRequest(
|
apiRequest(
|
||||||
`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
|
`/reports/index?${requestDates}&user_id =${localStorage.getItem("id")}`
|
||||||
"cardId"
|
|
||||||
)}`
|
|
||||||
).then((reports) => {
|
).then((reports) => {
|
||||||
let spendTime = 0;
|
let spendTime = 0;
|
||||||
reports.map((report) => {
|
reports.map((report) => {
|
||||||
@ -273,15 +271,15 @@ export const ProfileCalendarComponent = React.memo(
|
|||||||
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
|
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
|
||||||
: `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
|
: `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
|
||||||
: activePeriod
|
: activePeriod
|
||||||
? "Выберите диапазон на календаре"
|
? "Выберите диапазон на календаре"
|
||||||
: "Выбрать диапазон"}
|
: "Выбрать диапазон"}
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
{totalRangeHours
|
{totalRangeHours
|
||||||
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
|
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
|
||||||
: endDate
|
: endDate
|
||||||
? "0 часов"
|
? "0 часов"
|
||||||
: ""}
|
: ""}
|
||||||
</span>
|
</span>
|
||||||
{endDate && (
|
{endDate && (
|
||||||
<BaseButton
|
<BaseButton
|
||||||
|
@ -97,6 +97,7 @@ const ReportForm = () => {
|
|||||||
apiRequest("/reports/create", {
|
apiRequest("/reports/create", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
data: {
|
data: {
|
||||||
|
user_id: localStorage.getItem("id"),
|
||||||
tasks: inputs,
|
tasks: inputs,
|
||||||
difficulties: troublesInputValue,
|
difficulties: troublesInputValue,
|
||||||
tomorrow: scheduledInputValue,
|
tomorrow: scheduledInputValue,
|
||||||
|
@ -39,9 +39,7 @@ export const ShortReport = () => {
|
|||||||
setTomorrowTask([]);
|
setTomorrowTask([]);
|
||||||
setTotalHours(0);
|
setTotalHours(0);
|
||||||
apiRequest(
|
apiRequest(
|
||||||
`reports/find-by-date?user_card_id=${localStorage.getItem(
|
`reports/find-by-date?user_id=${localStorage.getItem("id")}&date=${day}`
|
||||||
"cardId"
|
|
||||||
)}&date=${day}`
|
|
||||||
).then((res) => {
|
).then((res) => {
|
||||||
let spendTime = 0;
|
let spendTime = 0;
|
||||||
for (const item of res) {
|
for (const item of res) {
|
||||||
|
@ -504,13 +504,13 @@ $maxWidthContainer: 1123;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__finished {
|
&__finished {
|
||||||
background: rgba(255, 255, 255, 0.76);
|
background: white;
|
||||||
mix-blend-mode: normal;
|
mix-blend-mode: normal;
|
||||||
border: 3px solid #52b709;
|
border: 3px solid #52b709;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 13px 16px;
|
padding: 13px 16px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 4px;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -1,137 +1,146 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { useDispatch } from "react-redux";
|
// import { useDispatch } from "react-redux";
|
||||||
import { Link } from "react-router-dom";
|
// import { Link } from "react-router-dom";
|
||||||
import { Navigate } from "react-router-dom";
|
import { Navigate } from "react-router-dom";
|
||||||
|
|
||||||
import { setPartnerEmployees } from "@redux/outstaffingSlice";
|
import { apiRequest } from "@api/request";
|
||||||
|
|
||||||
|
// import { setPartnerEmployees } from "@redux/outstaffingSlice";
|
||||||
import { Footer } from "@components/Common/Footer/Footer";
|
import { Footer } from "@components/Common/Footer/Footer";
|
||||||
|
import { Navigation } from "@components/Navigation/Navigation";
|
||||||
|
import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
|
||||||
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 rightArrow from "assets/icons/arrows/arrowRight.svg";
|
// import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
||||||
import avatarImg from "assets/images/avatarMok.png";
|
// import avatarImg from "assets/images/avatarMok.png";
|
||||||
import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
|
// import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
|
||||||
import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
|
// import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
|
||||||
import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
|
// import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
|
||||||
import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
|
// import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
|
||||||
import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
|
// import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
|
||||||
import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
|
// import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
|
||||||
import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
// import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
||||||
import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
// import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||||||
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
// import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||||
|
|
||||||
import { Navigation } from "../../components/Navigation/Navigation";
|
|
||||||
import "./partnerСategories.scss";
|
import "./partnerСategories.scss";
|
||||||
|
|
||||||
export const PartnerCategories = () => {
|
export const PartnerCategories = () => {
|
||||||
const dispatch = useDispatch();
|
// const dispatch = useDispatch();
|
||||||
if (localStorage.getItem("role_status") !== "18") {
|
if (localStorage.getItem("role_status") !== "18") {
|
||||||
return <Navigate to="/profile" replace />;
|
return <Navigate to="/profile" replace />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const [personalInfoItems] = useState([
|
const [staff, setStaff] = useState([]);
|
||||||
{
|
|
||||||
title: "Backend разработчики",
|
|
||||||
link: "/profile/categories/employees",
|
|
||||||
description:
|
|
||||||
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
|
||||||
available: true,
|
|
||||||
img: BackEndImg
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Frontend разработчики",
|
|
||||||
link: "/profile/categories/employees",
|
|
||||||
description:
|
|
||||||
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
|
||||||
available: true,
|
|
||||||
img: FrontendImg
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Архитектура проектов",
|
|
||||||
link: "/profile/categories/employees",
|
|
||||||
description: "Потоки данных ER ERP CRM CQRS UML BPMN",
|
|
||||||
available: true,
|
|
||||||
img: ArchitectureImg
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Дизайн проектов",
|
|
||||||
link: "/profile/categories/employees",
|
|
||||||
description:
|
|
||||||
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
|
||||||
available: true,
|
|
||||||
img: DesignImg
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Тестирование проектов",
|
|
||||||
link: "/profile/add-request",
|
|
||||||
description: "SQL Postman TestRail Kibana Ручное тестирование",
|
|
||||||
available: false,
|
|
||||||
img: TestImg
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Администрирование проектов",
|
|
||||||
link: "/profile/add-request",
|
|
||||||
description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
|
|
||||||
available: false,
|
|
||||||
img: AdminImg
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Управление проектом",
|
|
||||||
link: "/profile/add-request",
|
|
||||||
description: "Scrum Kanban Agile Miro CustDev",
|
|
||||||
available: false,
|
|
||||||
img: ManageImg
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Копирайтинг проектов",
|
|
||||||
link: "/profile/add-request",
|
|
||||||
description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
|
|
||||||
available: false,
|
|
||||||
img: CopyImg
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Реклама и SMM",
|
|
||||||
link: "/profile/add-request",
|
|
||||||
description:
|
|
||||||
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
|
||||||
available: false,
|
|
||||||
img: SmmImg
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const [mokPersons] = useState([
|
useEffect(() => {
|
||||||
{
|
apiRequest("/project/my-employee").then((el) => {
|
||||||
personAvatar: avatarImg,
|
setStaff(el.managerEmployees);
|
||||||
name: "Макаренко Дмитрий",
|
});
|
||||||
qualification: "PHP Backend - разработчик",
|
}, []);
|
||||||
level: "Middle",
|
|
||||||
project: "Админка НВД Консалтинг",
|
// const [personalInfoItems] = useState([
|
||||||
tasks_in_progress: 5,
|
// {
|
||||||
month_hours: 140,
|
// title: "Backend разработчики",
|
||||||
id: 1
|
// link: "/profile/categories/employees",
|
||||||
},
|
// description:
|
||||||
{
|
// "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||||
personAvatar: avatarImg,
|
// available: true,
|
||||||
name: "Макаренко Дмитрий",
|
// img: BackEndImg
|
||||||
qualification: "PHP Backend - разработчик",
|
// },
|
||||||
level: "Middle",
|
// {
|
||||||
project: "Админка НВД Консалтинг",
|
// title: "Frontend разработчики",
|
||||||
tasks_in_progress: 5,
|
// link: "/profile/categories/employees",
|
||||||
month_hours: 140,
|
// description:
|
||||||
id: 2
|
// "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||||
},
|
// available: true,
|
||||||
{
|
// img: FrontendImg
|
||||||
personAvatar: avatarImg,
|
// },
|
||||||
name: "Макаренко Дмитрий",
|
// {
|
||||||
qualification: "PHP Backend - разработчик",
|
// title: "Архитектура проектов",
|
||||||
level: "Middle",
|
// link: "/profile/categories/employees",
|
||||||
project: "Админка НВД Консалтинг",
|
// description: "Потоки данных ER ERP CRM CQRS UML BPMN",
|
||||||
tasks_in_progress: 5,
|
// available: true,
|
||||||
month_hours: 140,
|
// img: ArchitectureImg
|
||||||
id: 3
|
// },
|
||||||
}
|
// {
|
||||||
]);
|
// title: "Дизайн проектов",
|
||||||
|
// link: "/profile/categories/employees",
|
||||||
|
// description:
|
||||||
|
// "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||||
|
// available: true,
|
||||||
|
// img: DesignImg
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Тестирование проектов",
|
||||||
|
// link: "/profile/add-request",
|
||||||
|
// description: "SQL Postman TestRail Kibana Ручное тестирование",
|
||||||
|
// available: false,
|
||||||
|
// img: TestImg
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Администрирование проектов",
|
||||||
|
// link: "/profile/add-request",
|
||||||
|
// description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
|
||||||
|
// available: false,
|
||||||
|
// img: AdminImg
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Управление проектом",
|
||||||
|
// link: "/profile/add-request",
|
||||||
|
// description: "Scrum Kanban Agile Miro CustDev",
|
||||||
|
// available: false,
|
||||||
|
// img: ManageImg
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Копирайтинг проектов",
|
||||||
|
// link: "/profile/add-request",
|
||||||
|
// description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
|
||||||
|
// available: false,
|
||||||
|
// img: CopyImg
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Реклама и SMM",
|
||||||
|
// link: "/profile/add-request",
|
||||||
|
// description:
|
||||||
|
// "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||||
|
// available: false,
|
||||||
|
// img: SmmImg
|
||||||
|
// }
|
||||||
|
// ]);
|
||||||
|
|
||||||
|
// const [mokPersons] = useState([
|
||||||
|
// {
|
||||||
|
// personAvatar: avatarImg,
|
||||||
|
// name: "Макаренко Дмитрий",
|
||||||
|
// qualification: "PHP Backend - разработчик",
|
||||||
|
// level: "Middle",
|
||||||
|
// project: "Админка НВД Консалтинг",
|
||||||
|
// tasks_in_progress: 5,
|
||||||
|
// month_hours: 140,
|
||||||
|
// id: 1
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// personAvatar: avatarImg,
|
||||||
|
// name: "Макаренко Дмитрий",
|
||||||
|
// qualification: "PHP Backend - разработчик",
|
||||||
|
// level: "Middle",
|
||||||
|
// project: "Админка НВД Консалтинг",
|
||||||
|
// tasks_in_progress: 5,
|
||||||
|
// month_hours: 140,
|
||||||
|
// id: 2
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// personAvatar: avatarImg,
|
||||||
|
// name: "Макаренко Дмитрий",
|
||||||
|
// qualification: "PHP Backend - разработчик",
|
||||||
|
// level: "Middle",
|
||||||
|
// project: "Админка НВД Консалтинг",
|
||||||
|
// tasks_in_progress: 5,
|
||||||
|
// month_hours: 140,
|
||||||
|
// id: 3
|
||||||
|
// }
|
||||||
|
// ]);
|
||||||
return (
|
return (
|
||||||
<div className="partnerCategories">
|
<div className="partnerCategories">
|
||||||
<ProfileHeader />
|
<ProfileHeader />
|
||||||
@ -145,39 +154,49 @@ export const PartnerCategories = () => {
|
|||||||
/>
|
/>
|
||||||
<h2 className="partnerCategories__title">Данные персонала</h2>
|
<h2 className="partnerCategories__title">Данные персонала</h2>
|
||||||
<div className="partnerCategories__items">
|
<div className="partnerCategories__items">
|
||||||
{personalInfoItems.map((item, index) => {
|
{staff.map((card) => {
|
||||||
return (
|
return (
|
||||||
<Link
|
<PartnerPersonCard
|
||||||
to={item.link}
|
key={card.id}
|
||||||
key={index}
|
name={card.employee.fio}
|
||||||
className={
|
img={card.employee.avatar}
|
||||||
item.available
|
userId={card.user_id}
|
||||||
? "partnerCategories__item item"
|
/>
|
||||||
: "partnerCategories__item item item__disable"
|
|
||||||
}
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(setPartnerEmployees(mokPersons));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="item__title">
|
|
||||||
<img src={item.img} alt={item.title} />
|
|
||||||
<h4>{item.title}</h4>
|
|
||||||
</div>
|
|
||||||
<div className="item__info">
|
|
||||||
<p>{item.description}</p>
|
|
||||||
<div className="more">
|
|
||||||
<img src={rightArrow} alt="arrow" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{!item.available && (
|
|
||||||
<div className="item__disableHover">
|
|
||||||
<p>У вас нет персонала из категории</p>
|
|
||||||
<button>Подобрать</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
{/*{personalInfoItems.map((item, index) => {*/}
|
||||||
|
{/* return (*/}
|
||||||
|
{/* <Link*/}
|
||||||
|
{/* to={item.link}*/}
|
||||||
|
{/* key={index}*/}
|
||||||
|
{/* className={*/}
|
||||||
|
{/* item.available*/}
|
||||||
|
{/* ? "partnerCategories__item item"*/}
|
||||||
|
{/* : "partnerCategories__item item item__disable"*/}
|
||||||
|
{/* }*/}
|
||||||
|
{/* onClick={() => {*/}
|
||||||
|
{/* dispatch(setPartnerEmployees(mokPersons));*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/* >*/}
|
||||||
|
{/* <div className="item__title">*/}
|
||||||
|
{/* <img src={item.img} alt={item.title} />*/}
|
||||||
|
{/* <h4>{item.title}</h4>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* <div className="item__info">*/}
|
||||||
|
{/* <p>{item.description}</p>*/}
|
||||||
|
{/* <div className="more">*/}
|
||||||
|
{/* <img src={rightArrow} alt="arrow" />*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* {!item.available && (*/}
|
||||||
|
{/* <div className="item__disableHover">*/}
|
||||||
|
{/* <p>У вас нет персонала из категории</p>*/}
|
||||||
|
{/* <button>Подобрать</button>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* )}*/}
|
||||||
|
{/* </Link>*/}
|
||||||
|
{/* );*/}
|
||||||
|
{/*})}*/}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
@ -13,10 +13,12 @@
|
|||||||
|
|
||||||
&__items {
|
&__items {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 25px;
|
//flex-wrap: wrap;
|
||||||
row-gap: 24px;
|
//margin-top: 25px;
|
||||||
column-gap: 21px;
|
//row-gap: 24px;
|
||||||
|
//column-gap: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,4 +1,8 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
import { Navigate } from "react-router-dom";
|
||||||
|
|
||||||
|
import { useFormValidation } from "@hooks/useFormValidation";
|
||||||
|
import { useNotification } from "@hooks/useNotification";
|
||||||
|
|
||||||
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
|
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
|
||||||
import { Footer } from "@components/Common/Footer/Footer";
|
import { Footer } from "@components/Common/Footer/Footer";
|
||||||
@ -14,9 +18,38 @@ import "./trackerRegistration.scss";
|
|||||||
|
|
||||||
export const TrackerRegistration = () => {
|
export const TrackerRegistration = () => {
|
||||||
const [modalConfirmOpen, setModalConfirm] = useState(false);
|
const [modalConfirmOpen, setModalConfirm] = useState(false);
|
||||||
const [inputs, setInputs] = useState({
|
const fields = {
|
||||||
email: ""
|
username: "",
|
||||||
});
|
email: "",
|
||||||
|
password: "",
|
||||||
|
secondPassword: ""
|
||||||
|
};
|
||||||
|
|
||||||
|
const apiEndpoint = "/register/sign-up";
|
||||||
|
|
||||||
|
const { showNotification } = useNotification();
|
||||||
|
const showNotificationError = () => {
|
||||||
|
showNotification({
|
||||||
|
show: true,
|
||||||
|
text: "Аккаунт с таким логином или email уже существует",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const showNotificationTrue = () => {
|
||||||
|
showNotification({
|
||||||
|
show: true,
|
||||||
|
text: "Аккаунт успешно создан",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const { formData, validationErrors, handleChange, handleSubmit } =
|
||||||
|
useFormValidation(
|
||||||
|
apiEndpoint,
|
||||||
|
fields,
|
||||||
|
showNotificationError,
|
||||||
|
showNotificationTrue
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tracker-registration">
|
<div className="tracker-registration">
|
||||||
@ -34,33 +67,65 @@ export const TrackerRegistration = () => {
|
|||||||
<div className="tracker-registration__form">
|
<div className="tracker-registration__form">
|
||||||
<div className="tracker-registration__form__inputs">
|
<div className="tracker-registration__form__inputs">
|
||||||
<div className="tracker-registration__inputContainer">
|
<div className="tracker-registration__inputContainer">
|
||||||
<span>Ваше имя</span>
|
<h5>Ваше имя</h5>
|
||||||
<input placeholder="Имя" />
|
|
||||||
</div>
|
|
||||||
<div className="tracker-registration__inputContainer">
|
|
||||||
<span>Ваш e-mail</span>
|
|
||||||
<input
|
<input
|
||||||
placeholder="E-mail"
|
placeholder="Имя"
|
||||||
onChange={(e) =>
|
className={validationErrors.username ? "error" : ""}
|
||||||
setInputs((prevState) => ({
|
onChange={handleChange}
|
||||||
...prevState,
|
value={formData.username}
|
||||||
email: e.target.value
|
id="username"
|
||||||
}))
|
|
||||||
}
|
|
||||||
type="email"
|
|
||||||
/>
|
/>
|
||||||
|
<span>{validationErrors.username}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracker-registration__inputContainer">
|
<div className="tracker-registration__inputContainer">
|
||||||
<span>Придумайте пароль</span>
|
<h5>Ваш e-mail</h5>
|
||||||
<input placeholder="Пароль" />
|
<input
|
||||||
|
onChange={handleChange}
|
||||||
|
className={validationErrors.email ? "error" : ""}
|
||||||
|
placeholder="E-mail"
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
value={formData.email}
|
||||||
|
/>
|
||||||
|
<span>{validationErrors.email}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracker-registration__inputContainer">
|
<div className="tracker-registration__inputContainer">
|
||||||
<span>Повторите пароль</span>
|
<h5>Придумайте пароль</h5>
|
||||||
<input placeholder="Повторите пароль" />
|
<input
|
||||||
|
placeholder="Пароль"
|
||||||
|
className={validationErrors.password ? "error" : ""}
|
||||||
|
onChange={handleChange}
|
||||||
|
value={formData.password}
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
/>
|
||||||
|
<span>{validationErrors.password}</span>
|
||||||
|
</div>
|
||||||
|
<div className="tracker-registration__inputContainer">
|
||||||
|
<h5>Повторите пароль</h5>
|
||||||
|
<input
|
||||||
|
placeholder="Повторите пароль"
|
||||||
|
className={validationErrors.secondPassword ? "error" : ""}
|
||||||
|
value={formData.secondPassword}
|
||||||
|
type="password"
|
||||||
|
onChange={handleChange}
|
||||||
|
id="secondPassword"
|
||||||
|
/>
|
||||||
|
<span>{validationErrors.secondPassword}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracker-registration__form__submit">
|
<div className="tracker-registration__form__submit">
|
||||||
<button onClick={() => setModalConfirm(true)}>Отправить</button>
|
<button
|
||||||
|
onClick={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const result = await handleSubmit(e);
|
||||||
|
if (result === true) {
|
||||||
|
setModalConfirm(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Отправить
|
||||||
|
</button>
|
||||||
<div className="tracker-registration__form__info">
|
<div className="tracker-registration__form__info">
|
||||||
<img src={authImg} alt="img" />
|
<img src={authImg} alt="img" />
|
||||||
<p>
|
<p>
|
||||||
@ -80,7 +145,7 @@ export const TrackerRegistration = () => {
|
|||||||
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
|
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
|
||||||
<ModalTrackerRegistration
|
<ModalTrackerRegistration
|
||||||
setModalReset={setModalConfirm}
|
setModalReset={setModalConfirm}
|
||||||
email={inputs.email}
|
email={formData.email}
|
||||||
/>
|
/>
|
||||||
</ModalLayout>
|
</ModalLayout>
|
||||||
)}
|
)}
|
||||||
|
@ -41,6 +41,7 @@
|
|||||||
&__submit {
|
&__submit {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
border-radius: 44px;
|
border-radius: 44px;
|
||||||
@ -106,15 +107,18 @@
|
|||||||
&__inputContainer {
|
&__inputContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
row-gap: 15px;
|
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 44px;
|
margin-bottom: 44px;
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 15px;
|
font-size: 12px;
|
||||||
color: #000;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@ -122,6 +126,7 @@
|
|||||||
padding: 8px 12px 9px;
|
padding: 8px 12px 9px;
|
||||||
background-color: #EFF2F7;
|
background-color: #EFF2F7;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
margin: 10px 0;
|
||||||
border: none;
|
border: none;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@ -132,5 +137,9 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -41,9 +41,7 @@ export const ViewReport = () => {
|
|||||||
setDifficulties([]);
|
setDifficulties([]);
|
||||||
setTomorrowTask([]);
|
setTomorrowTask([]);
|
||||||
apiRequest(
|
apiRequest(
|
||||||
`reports/find-by-date?user_card_id=${localStorage.getItem(
|
`reports/find-by-date?user_id=${localStorage.getItem("id")}&date=${day}`
|
||||||
"cardId"
|
|
||||||
)}&date=${day}`
|
|
||||||
).then((res) => {
|
).then((res) => {
|
||||||
let spendTime = 0;
|
let spendTime = 0;
|
||||||
for (const item of res) {
|
for (const item of res) {
|
||||||
|
Loading…
Reference in New Issue
Block a user