fixed-pages #2
12
package-lock.json
generated
12
package-lock.json
generated
@ -33,6 +33,7 @@
|
||||
"react-inlinesvg": "3.0.1",
|
||||
"react-loader-spinner": "^4.0.0",
|
||||
"react-outside-click-handler": "^1.3.0",
|
||||
"react-paginate": "^8.2.0",
|
||||
"react-phone-input-2": "^2.14.0",
|
||||
"react-redux": "^7.2.4",
|
||||
"react-router": "latest",
|
||||
@ -21020,6 +21021,17 @@
|
||||
"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": {
|
||||
"version": "2.15.1",
|
||||
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"react-inlinesvg": "3.0.1",
|
||||
"react-loader-spinner": "^4.0.0",
|
||||
"react-outside-click-handler": "^1.3.0",
|
||||
"react-paginate": "^8.2.0",
|
||||
"react-phone-input-2": "^2.14.0",
|
||||
"react-redux": "^7.2.4",
|
||||
"react-router": "latest",
|
||||
|
||||
38
src/components/ArchiveTableTracker/ArchiveTableTracker.jsx
Normal file
38
src/components/ArchiveTableTracker/ArchiveTableTracker.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import ReactPaginate from "react-paginate";
|
||||
|
||||
import AllMyTasksItem from "@components/Common/AllMyTasksItem/AllMyTasksItem";
|
||||
|
||||
const ArchiveTableTracker = ({ filterCompleteTasks, projects, 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) => {
|
||||
<AllMyTasksItem task={task} projects={projects} />;
|
||||
})
|
||||
) : (
|
||||
<div className="archive__noItem">
|
||||
<p>В данном месяце у вас не было задач</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArchiveTableTracker;
|
||||
54
src/components/ArchiveTableTracker/archiveTableTracker.scss
Normal file
54
src/components/ArchiveTableTracker/archiveTableTracker.scss
Normal file
@ -0,0 +1,54 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
src/components/Common/AllMyTasksItem/AllMyTasksItem.jsx
Normal file
60
src/components/Common/AllMyTasksItem/AllMyTasksItem.jsx
Normal file
@ -0,0 +1,60 @@
|
||||
import React from "react";
|
||||
|
||||
import "./allMyTasksItem.scss";
|
||||
|
||||
const AllMyTasksItem = ({ task, projects, currentItems }) => {
|
||||
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 (
|
||||
<tr key={task.id}>
|
||||
<td>
|
||||
<div className="taskList__table__title-task">
|
||||
<p>
|
||||
{task.title}#{currentItems}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllMyTasksItem;
|
||||
50
src/components/Common/PaginatedItems/PaginatedItems.jsx
Normal file
50
src/components/Common/PaginatedItems/PaginatedItems.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
|
||||
const PaginatedItems = ({ itemsPerPage, items }) => {
|
||||
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 (
|
||||
<>
|
||||
{/* <Items currentItems={currentItems} /> */}
|
||||
<ReactPaginate
|
||||
nextLabel=">"
|
||||
onPageChange={handlePageClick}
|
||||
pageRangeDisplayed={3}
|
||||
marginPagesDisplayed={2}
|
||||
pageCount={pageCount}
|
||||
previousLabel="<"
|
||||
pageClassName="page-item"
|
||||
pageLinkClassName="page-link"
|
||||
previousClassName="page-item"
|
||||
previousLinkClassName="page-link"
|
||||
nextClassName="page-item"
|
||||
nextLinkClassName="page-link"
|
||||
breakLabel="..."
|
||||
breakClassName="page-item"
|
||||
breakLinkClassName="page-link"
|
||||
containerClassName="pagination"
|
||||
activeClassName="active"
|
||||
renderOnZeroPageCount={null}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaginatedItems;
|
||||
@ -1012,7 +1012,7 @@ export const ModalTiсket = ({
|
||||
>
|
||||
<span>
|
||||
{typeof taskPriority === "number"
|
||||
? priority[taskPriority]
|
||||
? `Приоритет: ${priority[taskPriority]}`
|
||||
: "Выберите приоритет"}
|
||||
</span>
|
||||
<img
|
||||
|
||||
@ -23,9 +23,14 @@
|
||||
max-height: 700px;
|
||||
// overflow-y: auto;
|
||||
|
||||
@media (max-width: 990px) {
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
max-height: none;
|
||||
overflow-y: inherit;
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -576,6 +581,14 @@
|
||||
//&:focus-within {
|
||||
// border: 1px solid #0000004d;
|
||||
//}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1089,6 +1102,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-priority {
|
||||
|
||||
@ -1206,7 +1206,7 @@ export const TicketFullScreen = () => {
|
||||
>
|
||||
<span>
|
||||
{typeof taskPriority === "number"
|
||||
? priority[taskPriority]
|
||||
? `Приоритет: ${priority[taskPriority]}`
|
||||
: "Выберите приоритет"}
|
||||
</span>
|
||||
<img
|
||||
|
||||
@ -612,7 +612,7 @@ export const TrackerModal = ({
|
||||
>
|
||||
{selectedPriority
|
||||
? `Приоритет: ${selectedPriority.name}`
|
||||
: "Выберити приоритет"}
|
||||
: "Выберите приоритет"}
|
||||
<img
|
||||
className={selectPriority ? "arrow arrow--open" : "arrow"}
|
||||
src={arrowDown}
|
||||
|
||||
@ -9,10 +9,11 @@ import {
|
||||
setToggleTab,
|
||||
} from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { caseOfNum, urlForLocal } from "@utils/helper";
|
||||
import { caseOfNum } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
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";
|
||||
@ -438,64 +439,12 @@ export const Tracker = () => {
|
||||
</div>
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
<table className="archive__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Задача</th>
|
||||
<th>Потраченное время</th>
|
||||
<th>Дата окончания</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{!loader && (
|
||||
<>
|
||||
{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,
|
||||
}}
|
||||
<ArchiveTableTracker
|
||||
loader={loader}
|
||||
filterCompleteTasks={filterCompleteTasks}
|
||||
projects={projects}
|
||||
/>
|
||||
</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 className="archive__projects">
|
||||
<div className="archive__projects-title">
|
||||
|
||||
@ -1932,59 +1932,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__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 {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
@ -2117,6 +2064,13 @@
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #6f6f6f;
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
max-width: 260px;
|
||||
max-height: 120px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user