Update my task
This commit is contained in:
MaxOvs19
@ -27,13 +27,15 @@ import addProjectImg from "assets/icons/addProjectImg.svg";
|
||||
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
||||
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
||||
import filterIcon from "assets/icons/filterIcon.svg";
|
||||
import plus from "assets/icons/plus.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 mockAvatar from "assets/images/avatarMok.png";
|
||||
import avatarMok from "assets/images/avatarMok.png";
|
||||
import downloadExel from "assets/images/downloadExel.svg";
|
||||
import noProjects from "assets/images/noProjects.png";
|
||||
import statusTimeTask from "assets/images/statusTimeTask.svg";
|
||||
|
||||
import "./tracker.scss";
|
||||
|
||||
@ -123,6 +125,14 @@ export const Tracker = () => {
|
||||
);
|
||||
}
|
||||
|
||||
function toggleDescTask(e) {
|
||||
e.target.closest("img").classList.toggle("open-desc-item");
|
||||
e.target
|
||||
.closest("td")
|
||||
.querySelector(".taskList__table__name-project")
|
||||
.classList.toggle("hide-desc");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tracker">
|
||||
<ProfileHeader />
|
||||
@ -286,6 +296,7 @@ export const Tracker = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
<table className="taskList__table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -298,78 +309,93 @@ export const Tracker = () => {
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="taskList__table__title-task">
|
||||
Разработка трекера <img src="#" alt="#" />
|
||||
</div>
|
||||
<div className="taskList__table__name-project">
|
||||
<h4>Проект:</h4>
|
||||
<p>Туман</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="task-status">In Progress</div>
|
||||
</td>
|
||||
<td>14ч 25 мин</td>
|
||||
<td>13.09.2020</td>
|
||||
<td>20.09.2020</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div className="taskList__table__title-task">
|
||||
Разработка трекера <img src="#" alt="#" />
|
||||
</div>
|
||||
<div className="taskList__table__name-project">
|
||||
<h4>Проект:</h4>
|
||||
<p>Туман</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="task-status">In Progress</div>
|
||||
</td>
|
||||
<td>14ч 25 мин</td>
|
||||
<td>13.09.2020</td>
|
||||
<td>20.09.2020</td>
|
||||
</tr>
|
||||
{!loader && (
|
||||
<>
|
||||
{Boolean(filteredAllTasks.length) &&
|
||||
filteredAllTasks.map((task, index) => {
|
||||
return (
|
||||
<tr key={task.id}>
|
||||
<td>
|
||||
<div className="taskList__table__title-task">
|
||||
{task.title}
|
||||
<div
|
||||
onClick={(e) => {
|
||||
toggleDescTask(e);
|
||||
}}
|
||||
>
|
||||
<img src={plus} alt="#" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="taskList__table__name-project hide-desc">
|
||||
<h4>Проект:</h4>
|
||||
<p>
|
||||
{projects.map((project) => {
|
||||
if (project.id == task.project_id) {
|
||||
return project.name;
|
||||
}
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="task-status">
|
||||
{task.status == 1 ? "Active" : "Close"}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{task.timers.map((item) => {
|
||||
let time = new Date(item.deltaSeconds * 1000)
|
||||
.toISOString()
|
||||
.slice(11, 19);
|
||||
return `${time}`;
|
||||
})}
|
||||
</td>
|
||||
<td>
|
||||
{new Date(task.created_at).toLocaleDateString()}
|
||||
</td>
|
||||
<td>
|
||||
{new Date(task.dead_line).toLocaleDateString()}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
{!loader && (
|
||||
<div className="taskList__wrapper">
|
||||
{Boolean(filteredAllTasks.length) &&
|
||||
filteredAllTasks.map((task) => {
|
||||
return (
|
||||
<div className="task" key={task.id}>
|
||||
<div className="task__info">
|
||||
<h5>{task.title}</h5>
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: task.description,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="task__person">
|
||||
<img
|
||||
src={
|
||||
task.user?.avatar
|
||||
? urlForLocal(task.user.avatar)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
<div className="task__project">
|
||||
<p>{task.user.fio}</p>
|
||||
<span>{getCorrectDate(task.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="taskList__time">
|
||||
<div className="taskList__time-compited">
|
||||
<h4>Учет моего рабочего времени за день</h4>
|
||||
<h3>
|
||||
Задач выполнено: <p>{2}</p>
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="taskList__time-all">
|
||||
<h3>Общее время:</h3>
|
||||
<p>{"4 ч 34 мин"}</p>
|
||||
</div>
|
||||
<div className="taskList__time-status">
|
||||
<div>
|
||||
<img src={statusTimeTask} alt="#" />
|
||||
<p>Сверка пройдена</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={downloadExel} alt="#" />
|
||||
<p>Скачать Exel отчет</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="taskList__end">
|
||||
<BaseButton styles={"close-day"}>
|
||||
Закрыть сегоднящний день
|
||||
</BaseButton>
|
||||
<p>
|
||||
Нажимая кнопку - “Закрыть сегодняшний день” - вы отправляете
|
||||
потрачеенное время на сверку
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
|
||||
@ -1322,13 +1322,21 @@
|
||||
|
||||
tbody {
|
||||
color: #000;
|
||||
tr {
|
||||
background-color: white;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: rgba(241, 241, 241, 0.23);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
height: 65px;
|
||||
border-bottom: 1px solid rgba(241, 241, 241, 1);
|
||||
|
||||
&:first-child {
|
||||
max-width: 275px;
|
||||
|
||||
padding-left: 10px;
|
||||
color: #111112;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
@ -1349,11 +1357,33 @@
|
||||
}
|
||||
|
||||
&__title-task {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
transition: 0.4s;
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 90px;
|
||||
|
||||
img {
|
||||
transition: 0.4s;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__name-project {
|
||||
display: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: 0.4s;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
@ -1365,6 +1395,7 @@
|
||||
|
||||
p {
|
||||
color: #000;
|
||||
margin-top: -5px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
@ -1372,6 +1403,99 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__time {
|
||||
padding: 30px 40px 20px 40px;
|
||||
border-radius: 12px;
|
||||
background: #e1fccf;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
h3 {
|
||||
color: #111112;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-compited {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
color: #1458dd;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #5b6871;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-all {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-end;
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
color: #1458dd;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&-status {
|
||||
display: flex;
|
||||
gap: 64px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
|
||||
p {
|
||||
width: 55px;
|
||||
font-size: 12px;
|
||||
color: #5b6871;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin: 24px 0 40px 0;
|
||||
|
||||
.close-day {
|
||||
padding: 8px 25px;
|
||||
font-size: 17px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #5b6871;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
@ -1499,6 +1623,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.hide-desc {
|
||||
display: none !important;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.open-desc-item {
|
||||
transition: 0.4s !important;
|
||||
transform: rotate(45deg) !important;
|
||||
}
|
||||
|
||||
&__archive {
|
||||
max-width: 1160px;
|
||||
padding: 0 20px;
|
||||
|
||||
Reference in New Issue
Block a user