From 47a38c45b22a0f04594b4d45739b08a6f7cec3f4 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 4 Dec 2023 23:32:41 +0300 Subject: [PATCH] Working in pagination --- .../AllTaskTableItem/AllTaskTableItem.jsx | 58 ++++ .../AllTaskTableItem/AllTaskTableItem.scss} | 0 .../AllTaskTableTracker.jsx | 302 ++++++++++++++++++ .../allTaskTableTracker.scss | 24 ++ .../ArchiveTableTracker.jsx | 4 +- .../TrackerArchivePaginated.jsx | 54 ---- src/pages/Tracker/Tracker.jsx | 75 +---- 7 files changed, 393 insertions(+), 124 deletions(-) create mode 100644 src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx rename src/components/{Common/TrackerArchivePaginated/trackerArchivePaginated.scss => AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.scss} (100%) create mode 100644 src/components/AllTaskTableTracker/AllTaskTableTracker.jsx create mode 100644 src/components/AllTaskTableTracker/allTaskTableTracker.scss delete mode 100644 src/components/Common/TrackerArchivePaginated/TrackerArchivePaginated.jsx diff --git a/src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx b/src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx new file mode 100644 index 00000000..437ae6a4 --- /dev/null +++ b/src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx @@ -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 ( + + +
+

{task.title}

+ +
{ + toggleDescTask(e); + }} + > + # +
+
+
+

Проект:

+

+ {projects.map((project) => { + if (project.id == task.project_id) { + return project.name; + } + })} +

+
+ + +
+ {task.status == 1 ? "Active" : "Close"} +
+ + + {task.timers.map((item) => { + let time = new Date(item.deltaSeconds * 1000) + .toISOString() + .slice(11, 19); + return `${time}`; + })} + + {new Date(task.created_at).toLocaleDateString()} + {new Date(task.dead_line).toLocaleDateString()} + + ); +}; + +export default AllTaskTableItem; diff --git a/src/components/Common/TrackerArchivePaginated/trackerArchivePaginated.scss b/src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.scss similarity index 100% rename from src/components/Common/TrackerArchivePaginated/trackerArchivePaginated.scss rename to src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.scss diff --git a/src/components/AllTaskTableTracker/AllTaskTableTracker.jsx b/src/components/AllTaskTableTracker/AllTaskTableTracker.jsx new file mode 100644 index 00000000..9455702f --- /dev/null +++ b/src/components/AllTaskTableTracker/AllTaskTableTracker.jsx @@ -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: "

12321313

", + 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: "

Тест

", + 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: "

Тест2

", + 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 ( + <> + + + + + + + + + + + + + {!loader && ( + <> + {Boolean(currentItems.length) && + currentItems.map((task, index) => { + return ( + + ); + })} + + )} + +
ЗадачаСтатусПотраченное времяДата началаДедлайн
+ + + + ); +}; + +export default AllTaskTableTracker; diff --git a/src/components/AllTaskTableTracker/allTaskTableTracker.scss b/src/components/AllTaskTableTracker/allTaskTableTracker.scss new file mode 100644 index 00000000..1c49db02 --- /dev/null +++ b/src/components/AllTaskTableTracker/allTaskTableTracker.scss @@ -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; + } +} diff --git a/src/components/ArchiveTableTracker/ArchiveTableTracker.jsx b/src/components/ArchiveTableTracker/ArchiveTableTracker.jsx index 1742fb8b..6ad1b572 100644 --- a/src/components/ArchiveTableTracker/ArchiveTableTracker.jsx +++ b/src/components/ArchiveTableTracker/ArchiveTableTracker.jsx @@ -19,7 +19,9 @@ const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => { <> {Boolean(filterCompleteTasks.length) ? ( filterCompleteTasks.map((task, index) => { - return ; + return ( + + ); }) ) : (
diff --git a/src/components/Common/TrackerArchivePaginated/TrackerArchivePaginated.jsx b/src/components/Common/TrackerArchivePaginated/TrackerArchivePaginated.jsx deleted file mode 100644 index 1c961b83..00000000 --- a/src/components/Common/TrackerArchivePaginated/TrackerArchivePaginated.jsx +++ /dev/null @@ -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 ( - <> - - - ); -}; - -export default TrackerArchivePaginated; diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index a742dab8..8ec87830 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -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 = () => {
{loader && } - - - - - - - - - - - - {!loader && ( - <> - {Boolean(filteredAllTasks.length) && - filteredAllTasks.map((task, index) => { - return ( - - - - - - - - ); - })} - - )} - -
ЗадачаСтатусПотраченное времяДата началаДедлайн
-
-

{task.title}

- -
{ - toggleDescTask(e); - }} - > - # -
-
-
-

Проект:

-

- {projects.map((project) => { - if (project.id == task.project_id) { - return project.name; - } - })} -

-
- 		-
- {task.status == 1 ? "Active" : "Close"} -
- 		- {task.timers.map((item) => { - let time = new Date(item.deltaSeconds * 1000) - .toISOString() - .slice(11, 19); - return `${time}`; - })} - - {new Date(task.created_at).toLocaleDateString()} - - {new Date(task.dead_line).toLocaleDateString()} -
+