Compare commits
No commits in common. "75cf13d945c5207b5be35dfcc9583a771efbde58" and "c532302f7305156678965a939b310ea4f0c0b27f" have entirely different histories.
75cf13d945
...
c532302f73
@ -95,21 +95,11 @@ export const ProfileCalendar = () => {
|
||||
alt="avatar"
|
||||
/>
|
||||
<p className="summary__name">
|
||||
{profileInfo?.fio || profileInfo?.username}{" "}
|
||||
{profileInfo.specification}
|
||||
{profileInfo?.fio || profileInfo?.username},{" "}
|
||||
{profileInfo.specification} разработчик
|
||||
</p>
|
||||
<hr />
|
||||
<div className="summary__direction">Front End</div>
|
||||
<div className="summary__level">Middle+</div>
|
||||
</div>
|
||||
<div className="summary__skill">
|
||||
<p>Ключевые навыки:</p>
|
||||
<div>Java</div>
|
||||
<div>Java</div>
|
||||
<div>Solid</div>
|
||||
<div>Java</div>
|
||||
</div>
|
||||
{/* <Link to="/profile/calendar/report">
|
||||
<Link to="/profile/calendar/report">
|
||||
<button
|
||||
className="calendar__btn"
|
||||
onClick={() => {
|
||||
@ -119,7 +109,7 @@ export const ProfileCalendar = () => {
|
||||
>
|
||||
Заполнить отчет
|
||||
</button>
|
||||
</Link> */}
|
||||
</Link>
|
||||
</div>
|
||||
{loader ? (
|
||||
<div className="loader__wrapper">
|
||||
|
||||
@ -22,25 +22,6 @@
|
||||
@media (max-width: 500px) {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.summary__skill {
|
||||
color: #6f6f6f;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
|
||||
div {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
||||
border: #8dc63f 0.5px solid;
|
||||
border-radius: 44px;
|
||||
padding: 3px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loader__wrapper {
|
||||
|
||||
@ -1,113 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
import { filteredExecutorTasks } from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { removeLast, urlForLocal } from "@utils/helper";
|
||||
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
import close from "assets/icons/close.png";
|
||||
import avatarMok from "assets/images/avatarMok.png";
|
||||
|
||||
import "./trackerSelectExecutor.scss";
|
||||
|
||||
const TrackerSelectExecutor = ({
|
||||
selectedExecutor,
|
||||
setSelectedExecutor,
|
||||
deleteSelectedExecutor,
|
||||
projectBoard
|
||||
}) => {
|
||||
const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const initListeners = () => {
|
||||
document.addEventListener("click", closeByClickingOut);
|
||||
};
|
||||
|
||||
const closeByClickingOut = (event) => {
|
||||
const path = event.path || (event.composedPath && event.composedPath());
|
||||
|
||||
if (
|
||||
event &&
|
||||
!path.find(
|
||||
(div) =>
|
||||
div.classList &&
|
||||
(div.classList.contains("tasks__head__executor") ||
|
||||
div.classList.contains("tasks__head__executor-dropdown"))
|
||||
)
|
||||
) {
|
||||
setSelectedExecutorOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
function executorFilter(user) {
|
||||
dispatch(filteredExecutorTasks(user.user_id));
|
||||
setSelectedExecutor(user);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
initListeners();
|
||||
}, []);
|
||||
|
||||
if (selectedExecutor) {
|
||||
return (
|
||||
<div className="tasks__head__executor-selected">
|
||||
<p>{removeLast(selectedExecutor.user.fio)}</p>
|
||||
<img
|
||||
className="avatar"
|
||||
src={
|
||||
selectedExecutor.user?.avatar
|
||||
? urlForLocal(selectedExecutor.user.avatar)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
<img
|
||||
className="delete"
|
||||
src={close}
|
||||
alt="delete"
|
||||
onClick={deleteSelectedExecutor}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
className="tasks__head__executor"
|
||||
onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}
|
||||
>
|
||||
<p>Выберите исполнителя</p>
|
||||
<img
|
||||
className={selectExecutorOpen ? "open" : ""}
|
||||
src={arrowDown}
|
||||
alt="arrow"
|
||||
/>
|
||||
{selectExecutorOpen && (
|
||||
<div className="tasks__head__executor-dropdown">
|
||||
{projectBoard.projectUsers.map((user) => {
|
||||
return (
|
||||
<div
|
||||
className="executor-dropdown__person"
|
||||
key={user.user_id}
|
||||
onClick={() => executorFilter(user)}
|
||||
>
|
||||
<p>{removeLast(user.user?.fio)}</p>
|
||||
<img
|
||||
src={
|
||||
user.user?.avatar
|
||||
? urlForLocal(user.user.avatar)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default TrackerSelectExecutor;
|
||||
@ -40,7 +40,6 @@ import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
|
||||
import TrackerSelectExecutor from "@components/TrackerSelectExecutor/TrackerSelectExecutor";
|
||||
|
||||
import arrow from "assets/icons/arrows/arrowRight.png";
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
@ -54,6 +53,7 @@ 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 "../../utils/calendarHelper";
|
||||
@ -85,6 +85,7 @@ export const ProjectTracker = () => {
|
||||
const [filteredNoTasks, setFilteredNoTasks] = useState(false);
|
||||
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
|
||||
const [selectedExecutor, setSelectedExecutor] = useState(null);
|
||||
const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
|
||||
const startWrapperIndexTest = useRef({});
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
const loader = useSelector(getBoarderLoader);
|
||||
@ -287,6 +288,11 @@ export const ProjectTracker = () => {
|
||||
setCheckBoxMyTasks(!checkBoxMyTasks);
|
||||
}
|
||||
|
||||
function executorFilter(user) {
|
||||
dispatch(filteredExecutorTasks(user.user_id));
|
||||
setSelectedExecutor(user);
|
||||
}
|
||||
|
||||
function deleteSelectedExecutorFilter() {
|
||||
setSelectedExecutor(null);
|
||||
setCheckBoxParticipateTasks(false);
|
||||
@ -388,6 +394,18 @@ export const ProjectTracker = () => {
|
||||
setPersonListOpen(false);
|
||||
}
|
||||
|
||||
if (
|
||||
event &&
|
||||
!path.find(
|
||||
(div) =>
|
||||
div.classList &&
|
||||
(div.classList.contains("tasks__head__executor") ||
|
||||
div.classList.contains("tasks__head__executor-dropdown"))
|
||||
)
|
||||
) {
|
||||
setSelectedExecutorOpen(false);
|
||||
}
|
||||
|
||||
if (
|
||||
event &&
|
||||
!path.find(
|
||||
@ -559,14 +577,63 @@ export const ProjectTracker = () => {
|
||||
{checkBoxMyTasks && <img src={accept} alt="accept" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TrackerSelectExecutor
|
||||
deleteSelectedExecutor={deleteSelectedExecutorFilter}
|
||||
projectBoard={projectBoard}
|
||||
selectedExecutor={selectedExecutor}
|
||||
setSelectedExecutor={setSelectedExecutor}
|
||||
{selectedExecutor ? (
|
||||
<div className="tasks__head__executor-selected">
|
||||
<p>{removeLast(selectedExecutor.user.fio)}</p>
|
||||
<img
|
||||
className="avatar"
|
||||
src={
|
||||
selectedExecutor.user?.avatar
|
||||
? urlForLocal(selectedExecutor.user.avatar)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
|
||||
<img
|
||||
className="delete"
|
||||
src={close}
|
||||
alt="delete"
|
||||
onClick={deleteSelectedExecutorFilter}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="tasks__head__executor"
|
||||
onClick={() =>
|
||||
setSelectedExecutorOpen(!selectExecutorOpen)
|
||||
}
|
||||
>
|
||||
<p>Выберите исполнителя</p>
|
||||
<img
|
||||
className={selectExecutorOpen ? "open" : ""}
|
||||
src={arrowDown}
|
||||
alt="arrow"
|
||||
/>
|
||||
{selectExecutorOpen && (
|
||||
<div className="tasks__head__executor-dropdown">
|
||||
{projectBoard.projectUsers.map((user) => {
|
||||
return (
|
||||
<div
|
||||
className="executor-dropdown__person"
|
||||
key={user.user_id}
|
||||
onClick={() => executorFilter(user)}
|
||||
>
|
||||
<p>{removeLast(user.user?.fio)}</p>
|
||||
<img
|
||||
src={
|
||||
user.user?.avatar
|
||||
? urlForLocal(user.user.avatar)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="tasks__head__tags">
|
||||
<div
|
||||
className="tags__add"
|
||||
|
||||
@ -116,8 +116,8 @@ export const Summary = () => {
|
||||
alt="avatar"
|
||||
/>
|
||||
<p className="summary__name">
|
||||
{profileInfo?.fio || profileInfo?.username}{" "}
|
||||
{profileInfo.specification}
|
||||
{profileInfo?.fio || profileInfo?.username},{" "}
|
||||
{profileInfo.specification} разработчик
|
||||
</p>
|
||||
<hr />
|
||||
<div className="summary__direction">Front End</div>
|
||||
|
||||
@ -36,7 +36,6 @@
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 100%;
|
||||
min-height: 110px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
@ -65,12 +64,6 @@
|
||||
align-items: center;
|
||||
column-gap: 20px;
|
||||
|
||||
hr {
|
||||
background-color: #00000081;
|
||||
height: 30px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
@media (max-width: 825px) {
|
||||
column-gap: 20px;
|
||||
}
|
||||
@ -138,7 +131,6 @@
|
||||
border-radius: 44px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 5px 17px;
|
||||
}
|
||||
|
||||
&__git {
|
||||
|
||||
@ -170,10 +170,6 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loader && <Loader width={75} height={75} />}
|
||||
{Boolean(taskText.length) && (
|
||||
<div className="view-report__content">
|
||||
<div className="view-report__switch-date">
|
||||
<div onClick={() => previousDay()}>
|
||||
<Link
|
||||
@ -196,9 +192,9 @@ export const ViewReport = () => {
|
||||
}`}
|
||||
>
|
||||
<Link
|
||||
to={`/profile/calendar/view/${getCreatedDate(
|
||||
nextReportDay
|
||||
)}/${params.id}`}
|
||||
to={`/profile/calendar/view/${getCreatedDate(nextReportDay)}/${
|
||||
params.id
|
||||
}`}
|
||||
>
|
||||
<div className={`view-report__switch-date__next switch-date`}>
|
||||
<img src={arrowSwitchDate} alt="arrow" />
|
||||
@ -206,36 +202,55 @@ export const ViewReport = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="view-report__done">
|
||||
<h2>Выполненные задачи</h2>
|
||||
{loader && <Loader width={75} height={75} />}
|
||||
{Boolean(taskText.length) && (
|
||||
<div className="view-report__content">
|
||||
<div className="table__container">
|
||||
<table className="view-report__done">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<p>Выполненные задачи</p>
|
||||
</th>
|
||||
<th>
|
||||
<p>Время</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{taskText.length &&
|
||||
taskText.map((task, index) => {
|
||||
return (
|
||||
<div className="view-report__done-task" key={task.id}>
|
||||
<div>
|
||||
<tr key={task.id}>
|
||||
<td>
|
||||
<p>
|
||||
{index + 1}. {task.task}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<div className="view-report__done__hours__item">
|
||||
<span>{Math.floor(task.hours)}</span>
|
||||
<p className="hours">
|
||||
/ {hourOfNum(Math.floor(task.hours))}
|
||||
{hourOfNum(Math.floor(task.hours))}
|
||||
</p>
|
||||
</div>
|
||||
<div>Задача ( On Review ) - Уведомления </div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
<p className="view-report__done-total-hours">
|
||||
Всего: {totalHours} <span>/ {hourOfNum(totalHours)}</span>
|
||||
</p>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<span>
|
||||
Всего: {totalHours} {hourOfNum(totalHours)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="view-report__addition">
|
||||
{Boolean(difficulties.length) && (
|
||||
<div className="view-report__addition-item">
|
||||
<div className="view-report__item">
|
||||
<h3>Возникшие сложности</h3>
|
||||
{difficulties.map((item, index) => {
|
||||
return <p key={index}>{item}</p>;
|
||||
@ -243,7 +258,7 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
)}
|
||||
{Boolean(tomorrowTask.length) && (
|
||||
<div className="view-report__addition-item">
|
||||
<div className="view-report__item">
|
||||
<h3>Что планируется сделать завтра?</h3>
|
||||
{tomorrowTask.map((item, index) => {
|
||||
return <p key={index}>{item}</p>;
|
||||
@ -251,7 +266,6 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!Boolean(taskText.length) && !loader && (
|
||||
<div className="view-report__no-task">
|
||||
|
||||
@ -16,12 +16,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
background-color: #ffffff;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -66,8 +60,7 @@
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
background: #ffffff;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
border-radius: 12px;
|
||||
padding: 20px 33px;
|
||||
align-items: center;
|
||||
column-gap: 20px;
|
||||
@ -128,10 +121,10 @@
|
||||
|
||||
&__switch-date {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
justify-content: center;
|
||||
column-gap: 30px;
|
||||
align-items: center;
|
||||
padding: 20px 20px 20px 30px;
|
||||
border-bottom: #eeeeee 1px solid;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
column-gap: 0;
|
||||
@ -139,16 +132,17 @@
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: #2e3a59;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.switch-date {
|
||||
width: 20px;
|
||||
height: 47px;
|
||||
background-color: #e5f1fb;
|
||||
border-radius: 5px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #8dc63f;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -192,34 +186,6 @@
|
||||
border-collapse: separate;
|
||||
border-spacing: 28px 0;
|
||||
|
||||
h2 {
|
||||
color: #1458dd;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 35px;
|
||||
}
|
||||
|
||||
&-task {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 15% 30%;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #111112;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 0 20px 0;
|
||||
|
||||
div {
|
||||
background-color: #f4f7ff;
|
||||
height: 61px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
border-collapse: collapse;
|
||||
@ -343,17 +309,57 @@
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
column-gap: 25px;
|
||||
align-items: center;
|
||||
min-width: 155px;
|
||||
|
||||
.hours {
|
||||
font-size: 15px;
|
||||
|
||||
@media (max-width: 1170px) {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
column-gap: 0;
|
||||
justify-content: space-between;
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 775px) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
max-width: 48px;
|
||||
height: 48px;
|
||||
background: #8dc63f;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
max-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #6f6f6f;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -363,42 +369,25 @@
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&-total-hours {
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 35px 0 0 30px;
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #6f6f6f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__addition {
|
||||
display: grid;
|
||||
grid-template-columns: 55% 45%;
|
||||
column-gap: 15px;
|
||||
padding: 35px;
|
||||
|
||||
&-item {
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
background-color: #f4f7ff;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
|
||||
h3 {
|
||||
color: #1458dd;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
|
||||
@media (max-width: 650px) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -411,6 +400,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__no-task {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user