95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
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 [items, setItems] = useState([]);
|
|
const itemsPerPage = 10;
|
|
|
|
const [currentItems, setCurrentItems] = useState([]);
|
|
const [pageCount, setPageCount] = useState(0);
|
|
const [itemOffset, setItemOffset] = useState(0);
|
|
|
|
useEffect(() => {
|
|
setItems(filteredAllTasks);
|
|
const endOffset = itemOffset + itemsPerPage;
|
|
setCurrentItems(filteredAllTasks?.slice(itemOffset, endOffset));
|
|
setPageCount(Math.ceil(filteredAllTasks?.length / itemsPerPage));
|
|
}, [filteredAllTasks]);
|
|
|
|
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>
|
|
|
|
{currentItems.length < itemsPerPage ? (
|
|
""
|
|
) : (
|
|
<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;
|