Refactor file structure
This commit is contained in:
MaxOvs19
parent
2ab994b439
commit
6d4eebfbd4
12
package-lock.json
generated
12
package-lock.json
generated
@ -49,7 +49,7 @@
|
||||
"semver": "7.3.2",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sweetalert2": "^11.4.8",
|
||||
"ts-loader": "^9.4.2"
|
||||
"ts-loader": "^9.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.12",
|
||||
@ -23194,7 +23194,6 @@
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
|
||||
"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
@ -24250,14 +24249,15 @@
|
||||
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
|
||||
},
|
||||
"node_modules/ts-loader": {
|
||||
"version": "9.4.2",
|
||||
"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz",
|
||||
"integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==",
|
||||
"version": "9.5.1",
|
||||
"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
|
||||
"integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==",
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.0",
|
||||
"enhanced-resolve": "^5.0.0",
|
||||
"micromatch": "^4.0.0",
|
||||
"semver": "^7.3.4"
|
||||
"semver": "^7.3.4",
|
||||
"source-map": "^0.7.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
"semver": "7.3.2",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sweetalert2": "^11.4.8",
|
||||
"ts-loader": "^9.4.2"
|
||||
"ts-loader": "^9.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.12",
|
||||
|
||||
@ -138,8 +138,6 @@ const App = () => {
|
||||
element={<PartnerEmployees />}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
|
||||
<Route exact path="profile-candidate/:id">
|
||||
<Route index element={<ProfileCandidate />} />
|
||||
</Route>
|
||||
|
||||
@ -25,7 +25,7 @@ import { useNotification } from "@hooks/useNotification";
|
||||
import FileTracker from "@components/FileTracker/FileTracker";
|
||||
import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
|
||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
|
||||
import TrackerTaskComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
import archive from "assets/icons/archive.svg";
|
||||
import arrow from "assets/icons/arrows/arrowStart.png";
|
||||
|
||||
@ -29,7 +29,7 @@ import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
|
||||
import TrackerTaskComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
||||
import arrowStart from "assets/icons/arrows/arrowStart.png";
|
||||
|
||||
130
src/components/TrackerComponents/Archive/Archive.jsx
Normal file
130
src/components/TrackerComponents/Archive/Archive.jsx
Normal file
@ -0,0 +1,130 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import { getProjects } from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { caseOfNum } from "@utils/helper";
|
||||
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
|
||||
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
||||
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
||||
import search from "assets/icons/serchIcon.png";
|
||||
import mockAvatar from "assets/images/avatarMok.png";
|
||||
|
||||
import ArchiveTableTracker from "../ArchiveTableTracker/ArchiveTableTracker";
|
||||
import "./archive.scss";
|
||||
|
||||
const Archive = ({
|
||||
loader,
|
||||
allCompletedTasks,
|
||||
projects,
|
||||
filterCompleteTasks,
|
||||
setFilterCompleteTasks
|
||||
}) => {
|
||||
function filterArchiveTasks(e) {
|
||||
setFilterCompleteTasks(
|
||||
allCompletedTasks.filter((item) => {
|
||||
if (!e.target.value) {
|
||||
return item;
|
||||
}
|
||||
if (
|
||||
item?.title.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
|
||||
item?.description
|
||||
.toLowerCase()
|
||||
.startsWith(e.target.value.toLowerCase())
|
||||
) {
|
||||
return item;
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="archive__tasks">
|
||||
<div className="archive__title">
|
||||
<h3>Архив задач:</h3>
|
||||
<p>
|
||||
{`${filterCompleteTasks.length}
|
||||
${caseOfNum(filterCompleteTasks.length, "tasks")}`}
|
||||
</p>
|
||||
|
||||
<div className="archive__tasks-period">
|
||||
<div className="buttons-month">
|
||||
<button>
|
||||
<img src={arrowViewReport} alt="<"></img>
|
||||
</button>
|
||||
<button>
|
||||
<img src={arrowViewReport} alt=">"></img>
|
||||
</button>
|
||||
</div>
|
||||
<div className="month-period">
|
||||
<h2>Сентябрь,</h2>
|
||||
<h3>2023</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="archive__tasks__search">
|
||||
<img src={search} alt="search" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Найти задачу"
|
||||
onChange={(event) => filterArchiveTasks(event)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
|
||||
<ArchiveTableTracker
|
||||
loader={loader}
|
||||
filterCompleteTasks={filterCompleteTasks}
|
||||
/>
|
||||
</div>
|
||||
<div className="archive__projects">
|
||||
<div className="archive__projects-title">
|
||||
<h3>Архив проектов:</h3>
|
||||
<p>
|
||||
{`${projects?.filter((project) => project.status === 10).length}
|
||||
${caseOfNum(
|
||||
projects?.filter((project) => project.status === 10).length,
|
||||
"projects"
|
||||
)}`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="archive__tasksWrapper">
|
||||
{Boolean(
|
||||
projects?.filter((project) => project.status === 10).length
|
||||
) ? (
|
||||
projects?.map((project, index) => {
|
||||
return project.status === 10 ? (
|
||||
<div className="archive__completeTask-project" key={index}>
|
||||
<div className="archive__completeTask__description">
|
||||
<p className="project-title-archive">{project.name}</p>
|
||||
<p className="date">{project.date}</p>
|
||||
</div>
|
||||
<div className="archive__completeTask__creator">
|
||||
<img src={mockAvatar} alt="#" />
|
||||
<div className="creator-title">
|
||||
<h4>Создатель проекта:</h4>
|
||||
<p>{"Василий Тарасов"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="archive__noItem-project">
|
||||
<img src={archiveTrackerProjects} alt="#" />
|
||||
<p>В архиве проектов нет</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Archive;
|
||||
382
src/components/TrackerComponents/Archive/archive.scss
Normal file
382
src/components/TrackerComponents/Archive/archive.scss
Normal file
@ -0,0 +1,382 @@
|
||||
.archive {
|
||||
&__title {
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
min-height: 48px;
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 590px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 0 10px;
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
|
||||
@media (max-width: 590px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__tasksWrapper {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
overflow-y: auto;
|
||||
margin-right: -16px;
|
||||
padding-right: 10px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background: 0 0;
|
||||
box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd9f9;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #c5c0c6;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__completeTask {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background: #f1f1f1;
|
||||
border-radius: 12px;
|
||||
padding: 12px 15px 7px 16px;
|
||||
|
||||
p {
|
||||
max-width: 420px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 0;
|
||||
color: #111112;
|
||||
}
|
||||
|
||||
.completeTask__title {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&__time {
|
||||
p {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&__project {
|
||||
margin-left: 17px;
|
||||
span {
|
||||
color: #807777;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
}
|
||||
p {
|
||||
color: #1a1919;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-project {
|
||||
background: #f1f1f1;
|
||||
width: 328px;
|
||||
max-width: 328px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 23px 23px 23px 33px;
|
||||
transition: 0.4s;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.project-title-archive {
|
||||
width: 274px;
|
||||
max-width: 274px;
|
||||
color: #111112;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(0.99);
|
||||
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
width: 270px;
|
||||
max-width: 270px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
.date {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #6f6f6f;
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
max-width: 260px;
|
||||
max-height: 120px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__creator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
|
||||
img {
|
||||
width: 31.366px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #5b6871;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #2d4a17;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
flex-direction: column;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__tasks {
|
||||
padding-right: 15px;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-period {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 73px;
|
||||
|
||||
.buttons-month {
|
||||
display: flex;
|
||||
gap: 34px;
|
||||
|
||||
button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #8dc63f;
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.month-period {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 62px;
|
||||
|
||||
h2 {
|
||||
color: #1458dd;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #252c32;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__search {
|
||||
margin-left: auto;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dde2e4;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 6px;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
&:focus-within {
|
||||
border: 1px solid #0000004d;
|
||||
}
|
||||
|
||||
@media (max-width: 590px) {
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
margin-left: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__projects {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
background: #e1fccf;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 66px;
|
||||
border-radius: 12px;
|
||||
margin: 25px 0 0 0;
|
||||
padding-left: 15px;
|
||||
color: #000;
|
||||
font-style: normal;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__noItem {
|
||||
padding: 23px 0 19px;
|
||||
color: #6f6f6f;
|
||||
|
||||
p {
|
||||
font-size: 17px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&-project {
|
||||
background: #f1f1f1;
|
||||
width: 328px;
|
||||
height: 108px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
gap: 21px;
|
||||
padding: 23px;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
width: 105px;
|
||||
color: #6f6f6f;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,7 @@ import { urlForLocal } from "@utils/helper";
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||||
import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment";
|
||||
import TrackerTaskSubComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
import del from "assets/icons/delete.svg";
|
||||
import edit from "assets/icons/edit.svg";
|
||||
@ -23,7 +23,6 @@ import {
|
||||
} from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { urlForLocal } from "@utils/helper";
|
||||
import { caseOfNum } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
@ -39,7 +38,7 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
|
||||
import TrackerSelectColumn from "@components/TrackerComponents/TrackerSelectColumn/TrackerSelectColumn";
|
||||
|
||||
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
|
||||
@ -9,8 +9,6 @@ import {
|
||||
setToggleTab
|
||||
} from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { caseOfNum } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
@ -20,19 +18,17 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
import ProjectTicket from "@components/ProjectTicket/ProjectTicket";
|
||||
import AllTaskTableTracker from "@components/TrackerComponents/AllTaskTableTracker/AllTaskTableTracker";
|
||||
import ArchiveTableTracker from "@components/TrackerComponents/ArchiveTableTracker/ArchiveTableTracker";
|
||||
import Archive from "@components/TrackerComponents/Archive/Archive";
|
||||
import ProjectTicket from "@components/TrackerComponents/ProjectTicket/ProjectTicket";
|
||||
|
||||
import addProjectImg from "assets/icons/addProjectImg.svg";
|
||||
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
||||
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
||||
import filterIcon from "assets/icons/filterIcon.svg";
|
||||
import search from "assets/icons/serchIcon.png";
|
||||
import project from "assets/icons/trackerProject.svg";
|
||||
import tasks from "assets/icons/trackerTasks.svg";
|
||||
import archive from "assets/images/archiveIcon.png";
|
||||
import mockAvatar from "assets/images/avatarMok.png";
|
||||
import downloadExcel from "assets/images/downloadExcel.svg";
|
||||
import noProjects from "assets/images/noProjects.png";
|
||||
import statusTimeTask from "assets/images/statusTimeTask.svg";
|
||||
@ -106,24 +102,6 @@ export const Tracker = () => {
|
||||
);
|
||||
}
|
||||
|
||||
function filterArchiveTasks(e) {
|
||||
setFilterCompleteTasks(
|
||||
allCompletedTasks.filter((item) => {
|
||||
if (!e.target.value) {
|
||||
return item;
|
||||
}
|
||||
if (
|
||||
item.title.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
|
||||
item.description
|
||||
.toLowerCase()
|
||||
.startsWith(e.target.value.toLowerCase())
|
||||
) {
|
||||
return item;
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tracker">
|
||||
<ProfileHeader />
|
||||
@ -328,95 +306,13 @@ export const Tracker = () => {
|
||||
: "tracker__tabs__content__projects"
|
||||
}
|
||||
>
|
||||
<div className="archive__tasks">
|
||||
<div className="archive__title">
|
||||
<h3>Архив задач:</h3>
|
||||
<p>
|
||||
{`${filterCompleteTasks.length}
|
||||
${caseOfNum(filterCompleteTasks.length, "tasks")}`}
|
||||
</p>
|
||||
|
||||
<div className="archive__tasks-period">
|
||||
<div className="buttons-month">
|
||||
<button>
|
||||
<img src={arrowViewReport} alt="<"></img>
|
||||
</button>
|
||||
<button>
|
||||
<img src={arrowViewReport} alt=">"></img>
|
||||
</button>
|
||||
</div>
|
||||
<div className="month-period">
|
||||
<h2>Сентябрь,</h2>
|
||||
<h3>2023</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="archive__tasks__search">
|
||||
<img src={search} alt="search" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Найти задачу"
|
||||
onChange={(event) => filterArchiveTasks(event)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
|
||||
<ArchiveTableTracker
|
||||
loader={loader}
|
||||
filterCompleteTasks={filterCompleteTasks}
|
||||
/>
|
||||
</div>
|
||||
<div className="archive__projects">
|
||||
<div className="archive__projects-title">
|
||||
<h3>Архив проектов:</h3>
|
||||
<p>
|
||||
{`${
|
||||
projects?.filter((project) => project.status === 10).length
|
||||
}
|
||||
${caseOfNum(
|
||||
projects?.filter((project) => project.status === 10)
|
||||
.length,
|
||||
"projects"
|
||||
)}`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="archive__tasksWrapper">
|
||||
{Boolean(
|
||||
projects?.filter((project) => project.status === 10).length
|
||||
) ? (
|
||||
projects?.map((project, index) => {
|
||||
return project.status === 10 ? (
|
||||
<div
|
||||
className="archive__completeTask-project"
|
||||
key={index}
|
||||
>
|
||||
<div className="archive__completeTask__description">
|
||||
<p className="project-title-archive">
|
||||
{project.name}
|
||||
</p>
|
||||
<p className="date">{project.date}</p>
|
||||
</div>
|
||||
<div className="archive__completeTask__creator">
|
||||
<img src={mockAvatar} alt="#" />
|
||||
<div className="creator-title">
|
||||
<h4>Создатель проекта:</h4>
|
||||
<p>{"Василий Тарасов"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="archive__noItem-project">
|
||||
<img src={archiveTrackerProjects} alt="#" />
|
||||
<p>В архиве проектов нет</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Archive
|
||||
projects={projects}
|
||||
loader={loader}
|
||||
filterCompleteTasks={filterCompleteTasks}
|
||||
allCompletedTasks={allCompletedTasks}
|
||||
setFilterCompleteTasks={setFilterCompleteTasks}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1513,389 +1513,6 @@
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.archive {
|
||||
&__title {
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
min-height: 48px;
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 590px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 0 10px;
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
|
||||
@media (max-width: 590px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__tasksWrapper {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
overflow-y: auto;
|
||||
margin-right: -16px;
|
||||
padding-right: 10px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background: 0 0;
|
||||
box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd9f9;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #c5c0c6;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__completeTask {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background: #f1f1f1;
|
||||
border-radius: 12px;
|
||||
padding: 12px 15px 7px 16px;
|
||||
|
||||
p {
|
||||
max-width: 420px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 0;
|
||||
color: #111112;
|
||||
}
|
||||
|
||||
.completeTask__title {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&__time {
|
||||
p {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&__project {
|
||||
margin-left: 17px;
|
||||
span {
|
||||
color: #807777;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
}
|
||||
p {
|
||||
color: #1a1919;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-project {
|
||||
background: #f1f1f1;
|
||||
width: 328px;
|
||||
max-width: 328px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 23px 23px 23px 33px;
|
||||
transition: 0.4s;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.project-title-archive {
|
||||
width: 274px;
|
||||
max-width: 274px;
|
||||
color: #111112;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(0.99);
|
||||
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
width: 270px;
|
||||
max-width: 270px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
.date {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #6f6f6f;
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
max-width: 260px;
|
||||
max-height: 120px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__creator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
|
||||
img {
|
||||
width: 31.366px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #5b6871;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #2d4a17;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
flex-direction: column;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__tasks {
|
||||
padding-right: 15px;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-period {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 73px;
|
||||
|
||||
.buttons-month {
|
||||
display: flex;
|
||||
gap: 34px;
|
||||
|
||||
button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #8dc63f;
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.month-period {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 62px;
|
||||
|
||||
h2 {
|
||||
color: #1458dd;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #252c32;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__search {
|
||||
margin-left: auto;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dde2e4;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 6px;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
&:focus-within {
|
||||
border: 1px solid #0000004d;
|
||||
}
|
||||
|
||||
@media (max-width: 590px) {
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
margin-left: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__projects {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
background: #e1fccf;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 66px;
|
||||
border-radius: 12px;
|
||||
margin: 25px 0 0 0;
|
||||
padding-left: 15px;
|
||||
color: #000;
|
||||
font-style: normal;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__noItem {
|
||||
padding: 23px 0 19px;
|
||||
color: #6f6f6f;
|
||||
|
||||
p {
|
||||
font-size: 17px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&-project {
|
||||
background: #f1f1f1;
|
||||
width: 328px;
|
||||
height: 108px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
gap: 21px;
|
||||
padding: 23px;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
width: 105px;
|
||||
color: #6f6f6f;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user