From 35f76abe60b08a715f61c19f21f808bf41254a90 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Sun, 31 Mar 2024 20:38:16 +0300
Subject: [PATCH] all tasks table

---
 src/pages/Tracker/Tracker.jsx | 90 ++++++++++++++++++++++++-----------
 1 file changed, 62 insertions(+), 28 deletions(-)

diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx
index a245f124..7f74b6bb 100644
--- a/src/pages/Tracker/Tracker.jsx
+++ b/src/pages/Tracker/Tracker.jsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { getTheme } from "@table-library/react-table-library/baseline";
 import { CompactTable } from "@table-library/react-table-library/compact";
 import { usePagination } from "@table-library/react-table-library/pagination";
 import { useSort } from "@table-library/react-table-library/sort";
 import { useTheme } from "@table-library/react-table-library/theme";
-import { getCorrectDate } from "@utils/calendarHelper";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link } from "react-router-dom";
 
 import {
   getProjects,
@@ -15,6 +15,7 @@ import {
   setToggleTab
 } from "@redux/projectsTrackerSlice";
 
+import { getCorrectDate } from "@utils/calendarHelper";
 import { caseOfNum, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
@@ -32,6 +33,7 @@ import ProjectTicket from "@components/ProjectTicket/ProjectTicket";
 
 import addProjectImg from "assets/icons/addProjectImg.svg";
 import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
+import rightArrow from "assets/icons/arrows/arrowRight.svg";
 import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
 import filterIcon from "assets/icons/filterIcon.svg";
 import searchImg from "assets/icons/serchIcon.png";
@@ -44,8 +46,6 @@ import noProjects from "assets/images/noProjects.png";
 import statusTimeTask from "assets/images/statusTimeTask.svg";
 
 import "./tracker.scss";
-import { Link } from "react-router-dom";
-import rightArrow from "assets/icons/arrows/arrowRight.svg";
 
 export const Tracker = () => {
   const dispatch = useDispatch();
@@ -67,22 +67,34 @@ export const Tracker = () => {
   const COLUMNS = [
     {
       label: "Задача",
-      renderCell: (item) => <p dangerouslySetInnerHTML={{ __html: item.title }}></p>,
+      renderCell: (item) => (
+        <p dangerouslySetInnerHTML={{ __html: item.title }}></p>
+      ),
       sort: { sortKey: "NAME" }
     },
     {
       label: "Создано",
       renderCell: (item) => <span>{getCorrectDate(item.created_at)}</span>,
-      sort: { sortKey: "CREATE" },
+      sort: { sortKey: "CREATE" }
     },
     {
       label: "Дедлайн",
-      renderCell: (item) => <span>{item.dead_line ? getCorrectDate(item.dead_line) : 'Без дедлайна'}</span>,
+      renderCell: (item) => (
+        <span>
+          {item.dead_line ? getCorrectDate(item.dead_line) : "Без дедлайна"}
+        </span>
+      ),
       sort: { sortKey: "DEADLINE" }
     },
     {
       label: "Потраченное время",
-      renderCell: (item) => <span>{item.timers.length ? getSpendTime(item.timers) : 'Трекер не был включен'}</span>,
+      renderCell: (item) => (
+        <span>
+          {item.timers.length
+            ? getSpendTime(item.timers)
+            : "Трекер не был включен"}
+        </span>
+      ),
       sort: { sortKey: "SPEND" }
     }
   ];
@@ -97,9 +109,15 @@ export const Tracker = () => {
     {
       sortFns: {
         NAME: (array) => array.sort((a, b) => a.title.localeCompare(b.title)),
-        CREATE: (array) => array.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)),
-        DEADLINE: (array) => array.sort((a, b) => new Date(a.dead_line) - new Date(b.dead_line)),
-        SPEND: (array) => array.sort((a, b) => getSpendTime(a.timers, true) - getSpendTime(b.timers, true)),
+        CREATE: (array) =>
+          array.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)),
+        DEADLINE: (array) =>
+          array.sort((a, b) => new Date(a.dead_line) - new Date(b.dead_line)),
+        SPEND: (array) =>
+          array.sort(
+            (a, b) =>
+              getSpendTime(a.timers, true) - getSpendTime(b.timers, true)
+          )
       }
     }
   );
@@ -115,11 +133,13 @@ export const Tracker = () => {
     let timerSeconds = 0;
     times.forEach((time) => {
       timerSeconds += time.deltaSeconds;
-    })
+    });
     if (seconds) {
-      return timerSeconds
+      return timerSeconds;
     }
-    return `${Math.floor(timerSeconds / 60 / 60)}:${Math.floor((timerSeconds / 60) % 60)}:${timerSeconds % 60}`
+    return `${Math.floor(timerSeconds / 60 / 60)}:${Math.floor(
+      (timerSeconds / 60) % 60
+    )}:${timerSeconds % 60}`;
   }
 
   function onSortChange(action, state) {
@@ -130,9 +150,7 @@ export const Tracker = () => {
     setSearch(event.target.value);
     setNodes(
       initialNodes.filter((item) =>
-        item.title
-          .toLowerCase()
-          .includes(event.target.value.toLowerCase())
+        item.title.toLowerCase().includes(event.target.value.toLowerCase())
       )
     );
   };
@@ -169,8 +187,8 @@ export const Tracker = () => {
           : [];
         setAllTasks(allTasks);
         setFilteredAllTasks(allTasks);
-        setNodes(allTasks)
-        setInitialNodes(allTasks)
+        setNodes(allTasks);
+        setInitialNodes(allTasks);
         setAllCompletedTasks(completedTasks);
         setFilterCompleteTasks(completedTasks);
       })
@@ -365,10 +383,12 @@ export const Tracker = () => {
             {/*  </div>*/}
             {/*</div>*/}
 
-            {loader ? <Loader style="green" /> :
+            {loader ? (
+              <Loader style="green" />
+            ) : (
               <>
-                <div className="table__search" >
-                  <img src={searchImg} alt='search' />
+                <div className="table__search">
+                  <img src={searchImg} alt="search" />
                   <input
                     type="text"
                     placeholder="Поиск по задачам"
@@ -385,7 +405,9 @@ export const Tracker = () => {
                 />
                 <div className="table__pagination">
                   <button
-                    className={pagination.state.page === 0 ? "switch disable" : "switch"}
+                    className={
+                      pagination.state.page === 0 ? "switch disable" : "switch"
+                    }
                     type="button"
                     disabled={pagination.state.page === 0}
                     onClick={() =>
@@ -399,7 +421,11 @@ export const Tracker = () => {
                       <button
                         key={index}
                         type="button"
-                        className={pagination.state.page === index ? "page page--active " : 'page'}
+                        className={
+                          pagination.state.page === index
+                            ? "page page--active "
+                            : "page"
+                        }
                         onClick={() => pagination.fns.onSetPage(index)}
                       >
                         {index + 1}
@@ -407,9 +433,17 @@ export const Tracker = () => {
                     ))}
                   </span>
                   <button
-                    className={pagination.state.page + 1 === pagination.state.getPages(data.nodes).length ? "switch disable" : "switch"}
+                    className={
+                      pagination.state.page + 1 ===
+                      pagination.state.getPages(data.nodes).length
+                        ? "switch disable"
+                        : "switch"
+                    }
                     type="button"
-                    disabled={pagination.state.page + 1 === pagination.state.getPages(data.nodes).length}
+                    disabled={
+                      pagination.state.page + 1 ===
+                      pagination.state.getPages(data.nodes).length
+                    }
                     onClick={() =>
                       pagination.fns.onSetPage(pagination.state.page + 1)
                     }
@@ -418,7 +452,7 @@ export const Tracker = () => {
                   </button>
                 </div>
               </>
-            }
+            )}
 
             {/*<AllTaskTableTracker*/}
             {/*  loader={loader}*/}