all tasks table
This commit is contained in:
Mikola
parent
caaee74810
commit
35f76abe60
@ -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}*/}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user