Compare commits
No commits in common. "fa01cf15551beed6530d35e30129782b3fc3de11" and "5861fbe4b137671ceb2373e426fa1b6c71b14e96" have entirely different histories.
fa01cf1555
...
5861fbe4b1
12
package-lock.json
generated
12
package-lock.json
generated
@ -33,7 +33,6 @@
|
|||||||
"react-inlinesvg": "3.0.1",
|
"react-inlinesvg": "3.0.1",
|
||||||
"react-loader-spinner": "^4.0.0",
|
"react-loader-spinner": "^4.0.0",
|
||||||
"react-outside-click-handler": "^1.3.0",
|
"react-outside-click-handler": "^1.3.0",
|
||||||
"react-paginate": "^8.2.0",
|
|
||||||
"react-phone-input-2": "^2.14.0",
|
"react-phone-input-2": "^2.14.0",
|
||||||
"react-redux": "^7.2.4",
|
"react-redux": "^7.2.4",
|
||||||
"react-router": "latest",
|
"react-router": "latest",
|
||||||
@ -21021,17 +21020,6 @@
|
|||||||
"react-dom": ">=16.3.0"
|
"react-dom": ">=16.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-paginate": {
|
|
||||||
"version": "8.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz",
|
|
||||||
"integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==",
|
|
||||||
"dependencies": {
|
|
||||||
"prop-types": "^15"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16 || ^17 || ^18"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-phone-input-2": {
|
"node_modules/react-phone-input-2": {
|
||||||
"version": "2.15.1",
|
"version": "2.15.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
|
||||||
|
|||||||
@ -29,7 +29,6 @@
|
|||||||
"react-inlinesvg": "3.0.1",
|
"react-inlinesvg": "3.0.1",
|
||||||
"react-loader-spinner": "^4.0.0",
|
"react-loader-spinner": "^4.0.0",
|
||||||
"react-outside-click-handler": "^1.3.0",
|
"react-outside-click-handler": "^1.3.0",
|
||||||
"react-paginate": "^8.2.0",
|
|
||||||
"react-phone-input-2": "^2.14.0",
|
"react-phone-input-2": "^2.14.0",
|
||||||
"react-redux": "^7.2.4",
|
"react-redux": "^7.2.4",
|
||||||
"react-router": "latest",
|
"react-router": "latest",
|
||||||
|
|||||||
@ -1 +1,3 @@
|
|||||||
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"/></svg>
|
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C5.26522 0 5.51957 0.105357 5.70711 0.292893C5.89464 0.48043 6 0.734784 6 1V4H9C9.26522 4 9.51957 4.10536 9.70711 4.29289C9.89464 4.48043 10 4.73478 10 5C10 5.26522 9.89464 5.51957 9.70711 5.70711C9.51957 5.89464 9.26522 6 9 6H6V9C6 9.26522 5.89464 9.51957 5.70711 9.70711C5.51957 9.89464 5.26522 10 5 10C4.73478 10 4.48043 9.89464 4.29289 9.70711C4.10536 9.51957 4 9.26522 4 9V6H1C0.734784 6 0.48043 5.89464 0.292893 5.70711C0.105357 5.51957 0 5.26522 0 5C0 4.73478 0.105357 4.48043 0.292893 4.29289C0.48043 4.10536 0.734784 4 1 4H4V1C4 0.734784 4.10536 0.48043 4.29289 0.292893C4.48043 0.105357 4.73478 0 5 0Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 239 B After Width: | Height: | Size: 784 B |
@ -1,60 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import plus from "assets/icons/plus.svg";
|
|
||||||
|
|
||||||
import "./allTaskTableItem.scss";
|
|
||||||
|
|
||||||
const AllTaskTableItem = ({ task, projects }) => {
|
|
||||||
function toggleDescTask(e) {
|
|
||||||
e.target?.classList.toggle("open-desc-item");
|
|
||||||
e.target
|
|
||||||
.closest("td")
|
|
||||||
?.querySelector(".taskList__table__name-project")
|
|
||||||
.classList.toggle("hide-desc");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr key={task.id}>
|
|
||||||
<td>
|
|
||||||
<div className="taskList__table__title-task">
|
|
||||||
<p>{task.title}</p>
|
|
||||||
|
|
||||||
<img
|
|
||||||
src={plus}
|
|
||||||
alt="#"
|
|
||||||
onClick={(e) => {
|
|
||||||
toggleDescTask(e);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="taskList__table__name-project hide-desc">
|
|
||||||
<h4>Проект:</h4>
|
|
||||||
<p>
|
|
||||||
{projects?.map((project) => {
|
|
||||||
if (project.id == task.project_id) {
|
|
||||||
return project.name;
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="task-status">
|
|
||||||
{task.status == 1 ? "Active" : "Close"}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{task.timers.map((item) => {
|
|
||||||
let time = new Date(item.deltaSeconds * 1000)
|
|
||||||
.toISOString()
|
|
||||||
.slice(11, 19);
|
|
||||||
return `${time}`;
|
|
||||||
})}
|
|
||||||
</td>
|
|
||||||
<td>{new Date(task.created_at).toLocaleDateString()}</td>
|
|
||||||
<td>{new Date(task.dead_line).toLocaleDateString()}</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AllTaskTableItem;
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
.open-desc-item {
|
|
||||||
transition: 0.4s !important;
|
|
||||||
transform: rotate(45deg) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taskList {
|
|
||||||
&__table {
|
|
||||||
margin-top: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 32px;
|
|
||||||
|
|
||||||
thead {
|
|
||||||
height: 65px;
|
|
||||||
background: #f1f1f1;
|
|
||||||
color: #5b6871;
|
|
||||||
|
|
||||||
th {
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 10px;
|
|
||||||
border-top-left-radius: 12px;
|
|
||||||
border-bottom-left-radius: 12px;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
border-top-right-radius: 12px;
|
|
||||||
border-bottom-right-radius: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
color: #000;
|
|
||||||
tr {
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
&:nth-child(2n) {
|
|
||||||
background-color: rgba(241, 241, 241, 0.23);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
height: 65px;
|
|
||||||
border-bottom: 1px solid rgba(241, 241, 241, 1);
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
max-width: 275px;
|
|
||||||
padding-left: 10px;
|
|
||||||
color: #111112;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-status {
|
|
||||||
width: 130px;
|
|
||||||
border: 1px solid #52b709;
|
|
||||||
border-radius: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #000;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title-task {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
transition: 0.4s;
|
|
||||||
max-width: 350px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
|
|
||||||
transition: 0.4s;
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__name-project {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: 0.4s;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin: 0;
|
|
||||||
color: #807777;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #000;
|
|
||||||
margin-top: -5px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 32px;
|
|
||||||
max-width: 318px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import ArchiveTasksItem from "@components/ArchiveTableTracker/ArchiveTasksItem/ArchiveTasksItem";
|
|
||||||
|
|
||||||
import "./archiveTableTracker.scss";
|
|
||||||
|
|
||||||
const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => {
|
|
||||||
return (
|
|
||||||
<table className="archive__table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Задача</th>
|
|
||||||
<th>Потраченное время</th>
|
|
||||||
<th>Дата окончания</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{!loader && (
|
|
||||||
<>
|
|
||||||
{Boolean(filterCompleteTasks.length) ? (
|
|
||||||
filterCompleteTasks?.map((task, index) => {
|
|
||||||
return (
|
|
||||||
<ArchiveTasksItem task={task} index={index} key={index} />
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<div className="archive__noItem">
|
|
||||||
<p>В данном месяце у вас не было задач</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ArchiveTableTracker;
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
|
||||||
|
|
||||||
import "./archiveTasksItem.scss";
|
|
||||||
|
|
||||||
const ArchiveTasksItem = ({ task, index }) => {
|
|
||||||
return (
|
|
||||||
<tr key={index}>
|
|
||||||
<td className="archive__completeTask__description">
|
|
||||||
<p className="completeTask__title">{task.title}</p>
|
|
||||||
<p
|
|
||||||
className="date"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: task.description,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td className="archive__completeTask__time">
|
|
||||||
<p>
|
|
||||||
{task.timers.length == 0
|
|
||||||
? "-"
|
|
||||||
: task.timers.map((item) => {
|
|
||||||
let time = new Date(item.deltaSeconds * 1000)
|
|
||||||
.toISOString()
|
|
||||||
.slice(11, 19);
|
|
||||||
return `${time}`;
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</td>
|
|
||||||
<td className="archive__completeTask__info">
|
|
||||||
<div>
|
|
||||||
<p>{getCorrectDate(task.updated_at)}</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ArchiveTasksItem;
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
.archive {
|
|
||||||
&__table {
|
|
||||||
margin: 29px 0 0 0;
|
|
||||||
height: 67px;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
thead {
|
|
||||||
background: #f1f1f1;
|
|
||||||
color: #5b6871;
|
|
||||||
border-radius: 12px;
|
|
||||||
height: 65px;
|
|
||||||
background: #f1f1f1;
|
|
||||||
color: #5b6871;
|
|
||||||
|
|
||||||
th {
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 10px;
|
|
||||||
border-top-left-radius: 12px;
|
|
||||||
border-bottom-left-radius: 12px;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
border-top-right-radius: 12px;
|
|
||||||
border-bottom-right-radius: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
color: #000;
|
|
||||||
tr {
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
&:nth-child(2n) {
|
|
||||||
background-color: rgba(241, 241, 241, 0.23);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
height: 65px;
|
|
||||||
border-bottom: 1px solid rgba(241, 241, 241, 1);
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
max-width: 275px;
|
|
||||||
padding-left: 10px;
|
|
||||||
color: #111112;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1012,7 +1012,7 @@ export const ModalTiсket = ({
|
|||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
{typeof taskPriority === "number"
|
{typeof taskPriority === "number"
|
||||||
? `Приоритет: ${priority[taskPriority]}`
|
? priority[taskPriority]
|
||||||
: "Выберите приоритет"}
|
: "Выберите приоритет"}
|
||||||
</span>
|
</span>
|
||||||
<img
|
<img
|
||||||
|
|||||||
@ -23,14 +23,9 @@
|
|||||||
max-height: 700px;
|
max-height: 700px;
|
||||||
// overflow-y: auto;
|
// overflow-y: auto;
|
||||||
|
|
||||||
@media (max-width: 990px) {
|
|
||||||
width: 96%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 880px) {
|
@media (max-width: 880px) {
|
||||||
max-height: none;
|
max-height: none;
|
||||||
overflow-y: inherit;
|
overflow-y: inherit;
|
||||||
width: 96%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
@ -581,14 +576,6 @@
|
|||||||
//&:focus-within {
|
//&:focus-within {
|
||||||
// border: 1px solid #0000004d;
|
// border: 1px solid #0000004d;
|
||||||
//}
|
//}
|
||||||
|
|
||||||
@media (max-width: 880px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 880px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1102,10 +1089,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 880px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-priority {
|
&-priority {
|
||||||
|
|||||||
@ -1206,7 +1206,7 @@ export const TicketFullScreen = () => {
|
|||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
{typeof taskPriority === "number"
|
{typeof taskPriority === "number"
|
||||||
? `Приоритет: ${priority[taskPriority]}`
|
? priority[taskPriority]
|
||||||
: "Выберите приоритет"}
|
: "Выберите приоритет"}
|
||||||
</span>
|
</span>
|
||||||
<img
|
<img
|
||||||
|
|||||||
@ -9,12 +9,11 @@ import {
|
|||||||
setToggleTab,
|
setToggleTab,
|
||||||
} from "@redux/projectsTrackerSlice";
|
} from "@redux/projectsTrackerSlice";
|
||||||
|
|
||||||
import { caseOfNum } from "@utils/helper";
|
import { caseOfNum, urlForLocal } from "@utils/helper";
|
||||||
|
|
||||||
import { apiRequest } from "@api/request";
|
import { apiRequest } from "@api/request";
|
||||||
|
|
||||||
import AllTaskTableTracker from "@components/AllTaskTableTracker/AllTaskTableTracker";
|
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||||||
import ArchiveTableTracker from "@components/ArchiveTableTracker/ArchiveTableTracker";
|
|
||||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||||
import { Footer } from "@components/Common/Footer/Footer";
|
import { Footer } from "@components/Common/Footer/Footer";
|
||||||
import { Loader } from "@components/Common/Loader/Loader";
|
import { Loader } from "@components/Common/Loader/Loader";
|
||||||
@ -28,6 +27,7 @@ import addProjectImg from "assets/icons/addProjectImg.svg";
|
|||||||
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
||||||
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
||||||
import filterIcon from "assets/icons/filterIcon.svg";
|
import filterIcon from "assets/icons/filterIcon.svg";
|
||||||
|
import plus from "assets/icons/plus.svg";
|
||||||
import search from "assets/icons/serchIcon.png";
|
import search from "assets/icons/serchIcon.png";
|
||||||
import project from "assets/icons/trackerProject.svg";
|
import project from "assets/icons/trackerProject.svg";
|
||||||
import tasks from "assets/icons/trackerTasks.svg";
|
import tasks from "assets/icons/trackerTasks.svg";
|
||||||
@ -125,6 +125,14 @@ export const Tracker = () => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<div className="tracker">
|
<div className="tracker">
|
||||||
<ProfileHeader />
|
<ProfileHeader />
|
||||||
@ -187,7 +195,7 @@ export const Tracker = () => {
|
|||||||
{projects &&
|
{projects &&
|
||||||
Boolean(projects.length) &&
|
Boolean(projects.length) &&
|
||||||
!loader &&
|
!loader &&
|
||||||
projects?.map((project, index) => {
|
projects.map((project, index) => {
|
||||||
return project.status !== 10 ? (
|
return project.status !== 10 ? (
|
||||||
<ProjectTiket key={index} project={project} />
|
<ProjectTiket key={index} project={project} />
|
||||||
) : (
|
) : (
|
||||||
@ -197,7 +205,7 @@ export const Tracker = () => {
|
|||||||
{typeof projects === "object" &&
|
{typeof projects === "object" &&
|
||||||
(!Boolean(projects.length) ||
|
(!Boolean(projects.length) ||
|
||||||
!Boolean(
|
!Boolean(
|
||||||
projects?.filter((project) => project.status !== 10).length
|
projects.filter((project) => project.status !== 10).length
|
||||||
)) &&
|
)) &&
|
||||||
!loader && (
|
!loader && (
|
||||||
<div className="no-projects">
|
<div className="no-projects">
|
||||||
@ -289,12 +297,73 @@ export const Tracker = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{loader && <Loader style="green" />}
|
{loader && <Loader style="green" />}
|
||||||
|
<table className="taskList__table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Задача</th>
|
||||||
|
<th>Статус</th>
|
||||||
|
<th>Потраченное время</th>
|
||||||
|
<th>Дата начала</th>
|
||||||
|
<th>Дедлайн</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
<AllTaskTableTracker
|
<tbody>
|
||||||
loader={loader}
|
{!loader && (
|
||||||
filteredAllTasks={filteredAllTasks}
|
<>
|
||||||
projects={projects}
|
{Boolean(filteredAllTasks.length) &&
|
||||||
/>
|
filteredAllTasks.map((task, index) => {
|
||||||
|
return (
|
||||||
|
<tr key={task.id}>
|
||||||
|
<td>
|
||||||
|
<div className="taskList__table__title-task">
|
||||||
|
<p>{task.title}</p>
|
||||||
|
|
||||||
|
<div
|
||||||
|
onClick={(e) => {
|
||||||
|
toggleDescTask(e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img src={plus} alt="#" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="taskList__table__name-project hide-desc">
|
||||||
|
<h4>Проект:</h4>
|
||||||
|
<p>
|
||||||
|
{projects.map((project) => {
|
||||||
|
if (project.id == task.project_id) {
|
||||||
|
return project.name;
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="task-status">
|
||||||
|
{task.status == 1 ? "Active" : "Close"}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{task.timers.map((item) => {
|
||||||
|
let time = new Date(item.deltaSeconds * 1000)
|
||||||
|
.toISOString()
|
||||||
|
.slice(11, 19);
|
||||||
|
return `${time}`;
|
||||||
|
})}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{new Date(task.created_at).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{new Date(task.dead_line).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
<div className="taskList__time">
|
<div className="taskList__time">
|
||||||
<div className="taskList__time-compited">
|
<div className="taskList__time-compited">
|
||||||
@ -369,21 +438,74 @@ export const Tracker = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{loader && <Loader style="green" />}
|
{loader && <Loader style="green" />}
|
||||||
|
<table className="archive__table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Задача</th>
|
||||||
|
<th>Потраченное время</th>
|
||||||
|
<th>Дата окончания</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
<ArchiveTableTracker
|
<tbody>
|
||||||
loader={loader}
|
{!loader && (
|
||||||
filterCompleteTasks={filterCompleteTasks}
|
<>
|
||||||
|
{Boolean(filterCompleteTasks.length) ? (
|
||||||
|
filterCompleteTasks.map((task, index) => {
|
||||||
|
return (
|
||||||
|
<tr key={index}>
|
||||||
|
<td className="archive__completeTask__description">
|
||||||
|
<p className="completeTask__title">
|
||||||
|
{task.title}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="date"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: task.description,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="archive__completeTask__time">
|
||||||
|
<p>
|
||||||
|
{task.timers.length == 0
|
||||||
|
? "-"
|
||||||
|
: task.timers.map((item) => {
|
||||||
|
let time = new Date(
|
||||||
|
item.deltaSeconds * 1000
|
||||||
|
)
|
||||||
|
.toISOString()
|
||||||
|
.slice(11, 19);
|
||||||
|
return `${time}`;
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<td className="archive__completeTask__info">
|
||||||
|
<div>
|
||||||
|
<p>{getCorrectDate(task.updated_at)}</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<div className="archive__noItem">
|
||||||
|
<p>В данном месяце у вас не было задач</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div className="archive__projects">
|
<div className="archive__projects">
|
||||||
<div className="archive__projects-title">
|
<div className="archive__projects-title">
|
||||||
<h3>Архив проектов:</h3>
|
<h3>Архив проектов:</h3>
|
||||||
<p>
|
<p>
|
||||||
{`${
|
{`${
|
||||||
projects?.filter((project) => project.status === 10).length
|
projects.filter((project) => project.status === 10).length
|
||||||
}
|
}
|
||||||
${caseOfNum(
|
${caseOfNum(
|
||||||
projects?.filter((project) => project.status === 10)
|
projects.filter((project) => project.status === 10)
|
||||||
.length,
|
.length,
|
||||||
"projects"
|
"projects"
|
||||||
)}`}
|
)}`}
|
||||||
@ -391,9 +513,9 @@ export const Tracker = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="archive__tasksWrapper">
|
<div className="archive__tasksWrapper">
|
||||||
{Boolean(
|
{Boolean(
|
||||||
projects?.filter((project) => project.status === 10).length
|
projects.filter((project) => project.status === 10).length
|
||||||
) ? (
|
) ? (
|
||||||
projects?.map((project, index) => {
|
projects.map((project, index) => {
|
||||||
return project.status === 10 ? (
|
return project.status === 10 ? (
|
||||||
<div
|
<div
|
||||||
className="archive__completeTask-project"
|
className="archive__completeTask-project"
|
||||||
|
|||||||
@ -1545,6 +1545,122 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__table {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
height: 65px;
|
||||||
|
background: #f1f1f1;
|
||||||
|
color: #5b6871;
|
||||||
|
|
||||||
|
th {
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 10px;
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
color: #000;
|
||||||
|
tr {
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(241, 241, 241, 0.23);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
height: 65px;
|
||||||
|
border-bottom: 1px solid rgba(241, 241, 241, 1);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
max-width: 275px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #111112;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-status {
|
||||||
|
width: 130px;
|
||||||
|
border: 1px solid #52b709;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title-task {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
transition: 0.4s;
|
||||||
|
max-width: 350px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
width: 15px;
|
||||||
|
min-width: 15px;
|
||||||
|
min-height: 15px;
|
||||||
|
display: flex;
|
||||||
|
background-color: #000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 90px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
transition: 0.4s;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__name-project {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: 0.4s;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin: 0;
|
||||||
|
color: #807777;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #000;
|
||||||
|
margin-top: -5px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__time {
|
&__time {
|
||||||
padding: 30px 40px 20px 40px;
|
padding: 30px 40px 20px 40px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
@ -1770,6 +1886,11 @@
|
|||||||
transition: 0.4s;
|
transition: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.open-desc-item {
|
||||||
|
transition: 0.4s !important;
|
||||||
|
transform: rotate(45deg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&__archive {
|
&__archive {
|
||||||
max-width: 1160px;
|
max-width: 1160px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
@ -1811,6 +1932,59 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__table {
|
||||||
|
margin: 29px 0 0 0;
|
||||||
|
height: 67px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: #f1f1f1;
|
||||||
|
color: #5b6871;
|
||||||
|
border-radius: 12px;
|
||||||
|
height: 65px;
|
||||||
|
background: #f1f1f1;
|
||||||
|
color: #5b6871;
|
||||||
|
|
||||||
|
th {
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 10px;
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
color: #000;
|
||||||
|
tr {
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(241, 241, 241, 0.23);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
height: 65px;
|
||||||
|
border-bottom: 1px solid rgba(241, 241, 241, 1);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
max-width: 275px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #111112;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__tasksWrapper {
|
&__tasksWrapper {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1943,13 +2117,6 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
color: #6f6f6f;
|
color: #6f6f6f;
|
||||||
|
|
||||||
p {
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 260px;
|
|
||||||
max-height: 120px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user