all tasks table

This commit is contained in:
Mikola 2024-03-31 20:38:16 +03:00
parent caaee74810
commit 35f76abe60

View File

@ -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' />
<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}*/}