Working in paginations

This commit is contained in:
MaxOvs19
2023-12-04 17:30:52 +03:00
parent 856076a47e
commit 154fb0dfa6
14 changed files with 249 additions and 114 deletions

View File

@ -9,10 +9,11 @@ import {
setToggleTab,
} from "@redux/projectsTrackerSlice";
import { caseOfNum, urlForLocal } from "@utils/helper";
import { caseOfNum } from "@utils/helper";
import { apiRequest } from "@api/request";
import ArchiveTableTracker from "@components/ArchiveTableTracker/ArchiveTableTracker";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
@ -438,64 +439,12 @@ export const Tracker = () => {
</div>
{loader && <Loader style="green" />}
<table className="archive__table">
<thead>
<tr>
<th>Задача</th>
<th>Потраченное время</th>
<th>Дата окончания</th>
</tr>
</thead>
<tbody>
{!loader && (
<>
{Boolean(filterCompleteTasks.length) ? (
filterCompleteTasks.map((task, index) => {
return (
<tr key={index}>
<td className="archive__completeTask__description">
<p className="completeTask__title">
{task.title}
</p>
<p
className="date"
dangerouslySetInnerHTML={{
__html: task.description,
}}
/>
</td>
<td className="archive__completeTask__time">
<p>
{task.timers.length == 0
? "-"
: task.timers.map((item) => {
let time = new Date(
item.deltaSeconds * 1000
)
.toISOString()
.slice(11, 19);
return `${time}`;
})}
</p>
</td>
<td className="archive__completeTask__info">
<div>
<p>{getCorrectDate(task.updated_at)}</p>
</div>
</td>
</tr>
);
})
) : (
<div className="archive__noItem">
<p>В данном месяце у вас не было задач</p>
</div>
)}
</>
)}
</tbody>
</table>
<ArchiveTableTracker
loader={loader}
filterCompleteTasks={filterCompleteTasks}
projects={projects}
/>
</div>
<div className="archive__projects">
<div className="archive__projects-title">

View File

@ -1932,59 +1932,6 @@
}
}
&__table {
margin: 29px 0 0 0;
height: 67px;
width: 100%;
font-size: 14px;
font-weight: 400;
thead {
background: #f1f1f1;
color: #5b6871;
border-radius: 12px;
height: 65px;
background: #f1f1f1;
color: #5b6871;
th {
&:first-child {
padding-left: 10px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
&:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
}
}
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;
}
}
}
}
&__tasksWrapper {
margin-top: 20px;
display: flex;
@ -2117,6 +2064,13 @@
font-size: 14px;
line-height: 24px;
color: #6f6f6f;
p {
overflow: hidden;
max-width: 260px;
max-height: 120px;
text-overflow: ellipsis;
}
}
}