fixed-pages #2
@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
|
||||
import plus from "assets/icons/plus.svg";
|
||||
|
||||
const AllTaskTableItem = ({ task, projects }) => {
|
||||
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 (
|
||||
<tr key={task.id}>
|
||||
<td>
|
||||
<div className="taskList__table__title-task">
|
||||
<p>{task.title}</p>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllTaskTableItem;
|
||||
302
src/components/AllTaskTableTracker/AllTaskTableTracker.jsx
Normal file
302
src/components/AllTaskTableTracker/AllTaskTableTracker.jsx
Normal file
@ -0,0 +1,302 @@
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import ReactPaginate from "react-paginate";
|
||||
|
||||
import AllTaskTableItem from "./AllTaskTableItem/AllTaskTableItem";
|
||||
import "./allTaskTableTracker.scss";
|
||||
|
||||
const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
|
||||
const lol = [
|
||||
{
|
||||
id: 216,
|
||||
project_id: 66,
|
||||
project_name: "Tuman 2",
|
||||
title: "Турниры",
|
||||
created_at: "2023-06-28 13:31:11",
|
||||
updated_at: "2023-11-07 11:02:50",
|
||||
dead_line: "2023-11-10 12:32:42",
|
||||
description:
|
||||
"Когда проект передавался - турниры уже были взяты в работу, там была сделана какая-то мелочь. В данный момент статус неизвестен.",
|
||||
status: 1,
|
||||
column_id: 138,
|
||||
user_id: 83,
|
||||
user: {
|
||||
fio: "Виктор Батищев",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
executor_id: 110,
|
||||
priority: 1,
|
||||
executor: {
|
||||
fio: "Овсянников Максим Сергеевич",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
comment_count: 0,
|
||||
taskUsers: [
|
||||
{
|
||||
id: 86,
|
||||
task_id: 216,
|
||||
user_id: 110,
|
||||
fio: "Овсянников Максим Сергеевич",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
],
|
||||
mark: [],
|
||||
execution_priority: null,
|
||||
timers: [
|
||||
{
|
||||
id: 172,
|
||||
user_id: 110,
|
||||
created_at: "2023-10-23 10:37:39",
|
||||
stopped_at: "2023-10-23 10:38:01",
|
||||
entity_id: 216,
|
||||
entity_type: 2,
|
||||
delta: {
|
||||
y: 0,
|
||||
m: 0,
|
||||
d: 0,
|
||||
h: 0,
|
||||
i: 0,
|
||||
s: 22,
|
||||
f: 0,
|
||||
weekday: 0,
|
||||
weekday_behavior: 0,
|
||||
first_last_day_of: 0,
|
||||
invert: 0,
|
||||
days: 0,
|
||||
special_type: 0,
|
||||
special_amount: 0,
|
||||
have_weekday_relative: 0,
|
||||
have_special_relative: 0,
|
||||
},
|
||||
deltaSeconds: 22,
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
project_id: 93,
|
||||
project_name: "Тест2",
|
||||
title: "Кек",
|
||||
created_at: "2023-10-11 19:04:14",
|
||||
updated_at: "2023-10-11 19:04:19",
|
||||
dead_line: "2023-10-11 16:03:51",
|
||||
description: "<p>12321313</p>",
|
||||
status: 0,
|
||||
column_id: 182,
|
||||
user_id: 110,
|
||||
user: {
|
||||
fio: "Овсянников Максим Сергеевич",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
executor_id: 110,
|
||||
priority: 1,
|
||||
executor: {
|
||||
fio: "Овсянников Максим Сергеевич",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
comment_count: 0,
|
||||
taskUsers: [],
|
||||
mark: [],
|
||||
execution_priority: null,
|
||||
timers: [],
|
||||
},
|
||||
{
|
||||
id: 405,
|
||||
project_id: 93,
|
||||
project_name: "Тест2",
|
||||
title: "15481",
|
||||
created_at: "2023-10-11 19:04:49",
|
||||
updated_at: "2023-10-11 19:05:24",
|
||||
dead_line: "2023-10-11 16:04:32",
|
||||
description: "<p>Тест</p>",
|
||||
status: 0,
|
||||
column_id: 182,
|
||||
user_id: 110,
|
||||
user: {
|
||||
fio: "Овсянников Максим Сергеевич",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
executor_id: 110,
|
||||
priority: 1,
|
||||
executor: {
|
||||
fio: "Овсянников Максим Сергеевич",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
comment_count: 0,
|
||||
taskUsers: [],
|
||||
mark: [],
|
||||
execution_priority: null,
|
||||
timers: [
|
||||
{
|
||||
id: 162,
|
||||
user_id: 110,
|
||||
created_at: "2023-10-11 16:04:53",
|
||||
stopped_at: "2023-10-11 16:05:20",
|
||||
entity_id: 405,
|
||||
entity_type: 2,
|
||||
delta: {
|
||||
y: 0,
|
||||
m: 0,
|
||||
d: 0,
|
||||
h: 0,
|
||||
i: 0,
|
||||
s: 27,
|
||||
f: 0,
|
||||
weekday: 0,
|
||||
weekday_behavior: 0,
|
||||
first_last_day_of: 0,
|
||||
invert: 0,
|
||||
days: 0,
|
||||
special_type: 0,
|
||||
special_amount: 0,
|
||||
have_weekday_relative: 0,
|
||||
have_special_relative: 0,
|
||||
},
|
||||
deltaSeconds: 27,
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
project_id: 66,
|
||||
project_name: "Tuman 2",
|
||||
title: "Тест",
|
||||
created_at: "2023-10-11 19:03:28",
|
||||
updated_at: "2023-10-13 18:01:33",
|
||||
dead_line: "2023-10-11 16:02:52",
|
||||
description: "<p>Тест2</p>",
|
||||
status: 0,
|
||||
column_id: 136,
|
||||
user_id: 110,
|
||||
user: {
|
||||
fio: "Овсянников Максим Сергеевич",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
executor_id: 110,
|
||||
priority: -1,
|
||||
executor: {
|
||||
fio: "Овсянников Максим Сергеевич",
|
||||
avatar: "/profileava/m2.png",
|
||||
},
|
||||
comment_count: 0,
|
||||
taskUsers: [],
|
||||
mark: [],
|
||||
execution_priority: null,
|
||||
timers: [
|
||||
{
|
||||
id: 169,
|
||||
user_id: 110,
|
||||
created_at: "2023-10-13 15:00:16",
|
||||
stopped_at: "2023-10-13 15:01:30",
|
||||
entity_id: 403,
|
||||
entity_type: 2,
|
||||
delta: {
|
||||
y: 0,
|
||||
m: 0,
|
||||
d: 0,
|
||||
h: 0,
|
||||
i: 1,
|
||||
s: 14,
|
||||
f: 0,
|
||||
weekday: 0,
|
||||
weekday_behavior: 0,
|
||||
first_last_day_of: 0,
|
||||
invert: 0,
|
||||
days: 0,
|
||||
special_type: 0,
|
||||
special_amount: 0,
|
||||
have_weekday_relative: 0,
|
||||
have_special_relative: 0,
|
||||
},
|
||||
deltaSeconds: 74,
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const [items, setItems] = useState([]);
|
||||
const itemsPerPage = 2;
|
||||
|
||||
const [currentItems, setCurrentItems] = useState([]);
|
||||
const [pageCount, setPageCount] = useState(0);
|
||||
const [itemOffset, setItemOffset] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setItems(filteredAllTasks);
|
||||
}, [filteredAllTasks]);
|
||||
|
||||
// Баг с отрисовкой массив currentItems пустой
|
||||
console.log(currentItems);
|
||||
console.log(items);
|
||||
|
||||
useEffect(() => {
|
||||
const endOffset = itemOffset + itemsPerPage;
|
||||
setCurrentItems(items.slice(itemOffset, endOffset));
|
||||
setPageCount(Math.ceil(items.length / itemsPerPage));
|
||||
}, [itemOffset, itemsPerPage]);
|
||||
|
||||
const handlePageClick = (event) => {
|
||||
const newOffset = (event.selected * itemsPerPage) % items.length;
|
||||
setItemOffset(newOffset);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<table className="taskList__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Задача</th>
|
||||
<th>Статус</th>
|
||||
<th>Потраченное время</th>
|
||||
<th>Дата начала</th>
|
||||
<th>Дедлайн</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{!loader && (
|
||||
<>
|
||||
{Boolean(currentItems.length) &&
|
||||
currentItems.map((task, index) => {
|
||||
return (
|
||||
<AllTaskTableItem
|
||||
projects={projects}
|
||||
task={task}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ReactPaginate
|
||||
nextLabel="вперед >"
|
||||
onPageChange={handlePageClick}
|
||||
pageRangeDisplayed={3}
|
||||
marginPagesDisplayed={2}
|
||||
pageCount={pageCount}
|
||||
previousLabel="< назад"
|
||||
pageClassName="pagination__item"
|
||||
pageLinkClassName="pagination__link"
|
||||
previousClassName="pagination__item"
|
||||
previousLinkClassName="pagination__link"
|
||||
nextClassName="pagination__item"
|
||||
nextLinkClassName="pagination__link"
|
||||
breakLabel="..."
|
||||
breakClassName="pagination__item"
|
||||
breakLinkClassName="pagination__link"
|
||||
containerClassName="pagination"
|
||||
activeClassName="active-btn"
|
||||
renderOnZeroPageCount={null}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllTaskTableTracker;
|
||||
24
src/components/AllTaskTableTracker/allTaskTableTracker.scss
Normal file
24
src/components/AllTaskTableTracker/allTaskTableTracker.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.pagination {
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
font-size: 14px;
|
||||
|
||||
&__item {
|
||||
}
|
||||
|
||||
&__link {
|
||||
border-radius: 15px;
|
||||
color: black;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.active-btn {
|
||||
.pagination__link {
|
||||
color: white;
|
||||
background-color: #52b709;
|
||||
}
|
||||
}
|
||||
@ -19,7 +19,9 @@ const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => {
|
||||
<>
|
||||
{Boolean(filterCompleteTasks.length) ? (
|
||||
filterCompleteTasks.map((task, index) => {
|
||||
return <ArchiveTasksItem task={task} index={index} />;
|
||||
return (
|
||||
<ArchiveTasksItem task={task} index={index} key={index} />
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="archive__noItem">
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import ReactPaginate from "react-paginate";
|
||||
|
||||
import ArchiveTableTracker from "@components/ArchiveTableTracker/ArchiveTableTracker";
|
||||
|
||||
const TrackerArchivePaginated = ({ itemsPerPage, items, projects, loader }) => {
|
||||
const [currentItems, setCurrentItems] = useState(null);
|
||||
const [pageCount, setPageCount] = useState(0);
|
||||
const [itemOffset, setItemOffset] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const endOffset = itemOffset + itemsPerPage;
|
||||
console.log(`Loading items from ${itemOffset} to ${endOffset}`);
|
||||
setCurrentItems(items.slice(itemOffset, endOffset));
|
||||
setPageCount(Math.ceil(items.length / itemsPerPage));
|
||||
}, [itemOffset, itemsPerPage]);
|
||||
|
||||
const handlePageClick = (event) => {
|
||||
const newOffset = (event.selected * itemsPerPage) % items.length;
|
||||
console.log(
|
||||
`User requested page number ${event.selected}, which is offset ${newOffset}`
|
||||
);
|
||||
setItemOffset(newOffset);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ReactPaginate
|
||||
nextLabel=">"
|
||||
onPageChange={handlePageClick}
|
||||
pageRangeDisplayed={3}
|
||||
marginPagesDisplayed={2}
|
||||
pageCount={pageCount}
|
||||
previousLabel="<"
|
||||
pageClassName="page-item"
|
||||
pageLinkClassName="page-link"
|
||||
previousClassName="page-item"
|
||||
previousLinkClassName="page-link"
|
||||
nextClassName="page-item"
|
||||
nextLinkClassName="page-link"
|
||||
breakLabel="..."
|
||||
breakClassName="page-item"
|
||||
breakLinkClassName="page-link"
|
||||
containerClassName="pagination"
|
||||
activeClassName="active"
|
||||
renderOnZeroPageCount={null}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrackerArchivePaginated;
|
||||
@ -13,12 +13,11 @@ import { caseOfNum } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import AllTaskTableTracker from "@components/AllTaskTableTracker/AllTaskTableTracker";
|
||||
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";
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
import TrackerArchivePaginated from "@components/Common/TrackerArchivePaginated/TrackerArchivePaginated";
|
||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
@ -29,7 +28,6 @@ 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";
|
||||
@ -299,73 +297,12 @@ export const Tracker = () => {
|
||||
</div>
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
<table className="taskList__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Задача</th>
|
||||
<th>Статус</th>
|
||||
<th>Потраченное время</th>
|
||||
<th>Дата начала</th>
|
||||
<th>Дедлайн</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{!loader && (
|
||||
<>
|
||||
{Boolean(filteredAllTasks.length) &&
|
||||
filteredAllTasks.map((task, index) => {
|
||||
return (
|
||||
<tr key={task.id}>
|
||||
<td>
|
||||
<div className="taskList__table__title-task">
|
||||
<p>{task.title}</p>
|
||||
|
||||
<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>
|
||||
<AllTaskTableTracker
|
||||
loader={loader}
|
||||
filteredAllTasks={filteredAllTasks}
|
||||
projects={projects}
|
||||
/>
|
||||
|
||||
<div className="taskList__time">
|
||||
<div className="taskList__time-compited">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user