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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ProfileCalendar/ProfileCalendarComponent.js
View File

@ -70,7 +70,7 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
<div className='calendar-component__header-info'>
<h3>Мои отчеты:</h3>
<p className='calendar__hours'>
{month} <span> {totalHours} {hourOfNum(totalHours)} </span>
{month}&nbsp;<span>{totalHours} {hourOfNum(totalHours)} </span>
</p>
</div>
<div className='calendar-component__header-switcher'>

3
src/components/ReportForm/ReportForm.js
View File

@ -18,7 +18,6 @@ import {getReportDate} from '../../redux/reportSlice'
import calendarIcon from '../../images/calendar_icon.png'
import ellipse from '../../images/ellipse.png'
import remove from '../../images/remove.png'
import addIcon from '../../images/addIcon.png'
import arrow from "../../images/right-arrow.png";
import './reportForm.scss'
@ -191,7 +190,7 @@ const ReportForm = () => {
})}
<div className='report-form__form-add'>
<img onClick={addInput} src={addIcon} alt=''/>
<p className='addMore' onClick={addInput}>+</p>
<span>Добавить еще </span>
</div>
</div>

17
src/components/ReportForm/reportForm.scss
View File

@ -189,6 +189,8 @@
img {
cursor: pointer;
width: 23px;
height: 23px;
}
}
@ -273,6 +275,21 @@
&__form-add {
margin-left: 28px;
display: flex;
align-items: center;
.addMore {
display: flex;
align-items: center;
justify-content: center;
color: #4CAF50;
width: 38px;
height: 38px;
background: #E8E8E8;
margin-bottom: 0;
border-radius: 50px;
font-size: 32px;
}
span {
font-family: 'GT Eesti Pro Display';

BIN
src/images/remove.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 15 KiB

3
src/images/search.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path style="fill: black" d="M19.7192 18.3139L16.0114 14.6333C17.4506 12.8374 18.1476 10.5579 17.959 8.26356C17.7705 5.96919 16.7106 3.83432 14.9975 2.29792C13.2844 0.761532 11.0481 -0.0595993 8.74862 0.00337152C6.44911 0.0663423 4.26109 1.00863 2.63448 2.63648C1.00786 4.26433 0.066292 6.454 0.00336896 8.75527C-0.059554 11.0565 0.760954 13.2945 2.29618 15.0089C3.83141 16.7233 5.96466 17.784 8.25729 17.9727C10.5499 18.1614 12.8277 17.4639 14.6222 16.0235L18.3 19.7042C18.3929 19.7979 18.5035 19.8723 18.6253 19.9231C18.747 19.9739 18.8777 20 19.0096 20C19.1415 20 19.2722 19.9739 19.3939 19.9231C19.5157 19.8723 19.6263 19.7979 19.7192 19.7042C19.8993 19.5177 20 19.2684 20 19.009C20 18.7497 19.8993 18.5004 19.7192 18.3139ZM9.01554 16.0235C7.63189 16.0235 6.27932 15.6129 5.12886 14.8436C3.9784 14.0743 3.08172 12.9809 2.55223 11.7016C2.02273 10.4223 1.88419 9.01462 2.15412 7.65653C2.42406 6.29844 3.09035 5.05095 4.06873 4.07183C5.04712 3.0927 6.29366 2.4259 7.65072 2.15576C9.00778 1.88562 10.4144 2.02426 11.6927 2.55417C12.9711 3.08407 14.0637 3.98142 14.8324 5.13276C15.6011 6.28409 16.0114 7.63769 16.0114 9.02239C16.0114 10.8792 15.2743 12.66 13.9623 13.973C12.6504 15.2859 10.871 16.0235 9.01554 16.0235Z" fill="#FF9900"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

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;
}
}
}
}
}
}
}
}

2
src/pages/ViewReport/ViewReport.js
View File

@ -135,7 +135,7 @@ export const ViewReport = () => {
})}
<tr>
<td></td>
<td><span>Всего: {totalHours} часов</span></td>
<td><span>Всего: {totalHours} {hourOfNum(totalHours)}</span></td>
</tr>
</tbody>
</table>