apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tracker

Browse Source
This commit is contained in:
Николай Полтщук
2023-03-13 23:33:12 +03:00
parent bf5873e5e8
commit ca9702ecb7
8 changed files with 369 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/pages/Tracker/Tracker.js
View File

@ -13,6 +13,7 @@ import avatarTest from "../../images/AvatarTest .png";
import selectArrow from "../../images/select.svg";
import commentsBoard from "../../images/commentsBoard.svg";
import filesBoard from "../../images/filesBoard.svg";
import search from "../../images/search.svg"
import "./tracker.scss";
@ -35,6 +36,7 @@ export const Tracker = () => {
const [tabTaskMok, setTabTaskMok] = useState([
{
name: "Открытые",
open: false,
tasks: [
{
task: "PR - 2245",
@ -58,6 +60,7 @@ export const Tracker = () => {
},
{
name: "В процессе",
open: false,
tasks: [
{
task: "PR - 2245",
@ -72,6 +75,7 @@ export const Tracker = () => {
},
{
name: "На проверке",
open: false,
tasks: [
{
task: "PR - 2245",
@ -100,10 +104,20 @@ export const Tracker = () => {
avatarDo: avatarTest,
id: 6
},
{
task: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
comments: 12,
files: 0,
avatarCreated: avatarTest,
avatarDo: avatarTest,
id: 9
},
],
},
{
name: "Готово",
open: false,
tasks: [
{
task: "PR - 2245",
@ -127,6 +141,107 @@ export const Tracker = () => {
},
]);
const [completeTasks] = useState([
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PR - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PK - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PE - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PA - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PB - 2245",
description: "Верстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PC - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PD - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
{
name: "PA - 2245",
description: "Сверстать часть таблицы. Сверстать часть таблицы",
dateComplete: '07/мар/23',
avatarDo: avatarTest,
},
])
const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks)
const [modalActiveTicket, setModalActiveTicket] = useState(false);
const [modalActiveProject, setModalActiveProject] = useState(false);
const [startWrapperIndex, setStartWrapperIndex] = useState(null)
@ -136,6 +251,16 @@ export const Tracker = () => {
setToggleTab(index);
};
function toggleMoreTasks (wrapperIndex) {
setTabTaskMok(prevArray => prevArray.map((elem, index) => {
if (wrapperIndex === index) {
return {...elem, open: !elem.open}
} else {
return elem
}
}))
}
function dragStartHandler(e, task, wrapperIndex) {
setStartWrapperIndex({task: task, index: wrapperIndex})
setTimeout(() => {
@ -189,6 +314,17 @@ export const Tracker = () => {
}))
}
function filterArchiveTasks(e) {
setFilterCompleteTasks(completeTasks.filter((item) => {
if (!e.target.value) {
return item
}
if (item.name.toLowerCase().startsWith(e.target.value.toLowerCase()) || item.description.toLowerCase().startsWith(e.target.value.toLowerCase())) {
return item
}
}))
}
return (
<div className="tracker">
<ProfileHeader />
@ -298,6 +434,11 @@ export const Tracker = () => {
</div>
</div>
{section.tasks.map((task, index) => {
if (index > 2) {
if (!section.open) {
return
}
}
return (
<div
key={index}
@ -331,14 +472,44 @@ export const Tracker = () => {
</div>
);
})}
{section.tasks.length >= 3 && (
<span className="moreItems">+</span>
{section.tasks.length > 3 && (
<span className={section.open ? 'lessItems openItems' : 'moreItems openItems'} onClick={() => toggleMoreTasks(wrapperIndex)}>{section.open ? '-' : '+'}</span>
)}
</div>
);
})}
</div>
</div>
<div
className={
toggleTab === 3
? "tracker__tabs__content__archive tasks active__content"
: "tracker__tabs__content__projects"
}
>
<div className='archive__title'>
<h3>Архив:</h3>
<p>{filterCompleteTasks.length} задач(а)</p>
<div className='archive__search'>
<input type='text' onChange={(event) => filterArchiveTasks(event)} />
<img src={search} alt='search' />
</div>
</div>
<div className='archive__tasksWrapper'>
{filterCompleteTasks.map((task, index) => {
return <div className='archive__completeTask' key={index}>
<div className='archive__completeTask__description'>
<p>{task.description}</p>
<p className='date'>{task.dateComplete}</p>
</div>
<div className='archive__completeTask__info'>
<img src={task.avatarDo} alt='avatar' />
<p>{task.name}</p>
</div>
</div>
})}
</div>
</div>
</div>
</div>
</div>

176
src/pages/Tracker/tracker.scss
View File

@ -77,6 +77,14 @@
display: none;
align-items: center;
@media (max-width: 785px) {
justify-content: center;
}
@media (max-width: 460px) {
padding: 15px;
}
.project {
width: 48%;
background: #F1F1F1;
@ -84,6 +92,18 @@
padding: 17px 26px 16px;
cursor: pointer;
@media (max-width: 1068px) {
width: 47%;
}
@media (max-width: 785px) {
width: 100%;
}
@media (max-width: 430px) {
padding: 8px 13px 8px;
}
h3 {
font-weight: 700;
font-size: 16px;
@ -97,6 +117,10 @@
align-items: center;
position: relative;
@media (max-width: 430px) {
justify-content: space-between;
}
p {
color: #6F6F6F;
font-weight: 500;
@ -124,6 +148,10 @@
color: #6F6F6F;
font-size: 17px;
margin: 0 25px 0 auto;
@media (max-width: 430px) {
display: none;
}
}
&:after {
@ -133,6 +161,10 @@
color: #6F6F6F;
right: 0;
top: -35%;
@media (max-width: 430px) {
display: none;
}
}
}
}
@ -348,6 +380,7 @@
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
&__more {
cursor: pointer;
@ -373,9 +406,8 @@
}
}
.moreItems {
.openItems {
cursor: pointer;
background: #8BCC60;
border-radius: 44px;
width: 33px;
height: 33px;
@ -384,9 +416,17 @@
align-items: center;
position: absolute;
bottom: -15px;
color: white;
font-size: 20px;
left: 165px;
color: white;
}
.moreItems {
background: #8BCC60;
}
.lessItems {
background: #f92828;
}
&__more {
@ -430,6 +470,136 @@
.active__content {
display: flex;
}
&__archive {
background: white;
border-radius: 12px;
padding: 26px 24px 40px;
min-height: 774px;
display: flex;
flex-direction: column;
.archive {
&__title {
padding-bottom: 8px;
border-bottom: 1px solid #DDE2E4;
display: flex;
align-items: center;
h3 {
color: #111112;
font-weight: 700;
font-size: 16px;
line-height: 32px;
margin-bottom: 0;
}
p {
margin: 0 0 0 10px;
font-weight: 500;
font-size: 14px;
}
}
&__search {
border: 2px solid;
border-color: var(--ds-border-input, #DFE1E6);
margin-left: auto;
padding: 5px;
display: flex;
align-items: center;
input {
outline: none;
border: none;
font-size: 16px;
font-weight: 500;
}
img {
width: 20px;
height: 20px;
}
}
&__tasksWrapper {
margin-top: 10px;
display: flex;
flex-direction: column;
row-gap: 3px;
max-height: 649px;
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,.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;
border: 1px solid var(--ds-border,#dfe1e6);
padding: 8px 10px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: var(--ds-background-neutral-subtle-hovered,#f4f5f7);
}
p {
margin-bottom: 0;
}
&__description {
font-size: 14px;
font-weight: 500;
.date {
font-weight: 400;
font-size: 12px;
}
}
&__info {
display: flex;
align-items: center;
img {
width: 36px;
height: 36px;
}
p {
margin-left: 10px;
text-decoration: line-through;
font-size: 11px;
font-weight: 500;
}
}
}
}
}
}
}
}