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-05-23 23:02:39 +03:00
parent a443bad839
commit c55376ecb3
8 changed files with 427 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -5,6 +5,7 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
import { Footer } from "../../components/Footer/Footer";
import { Navigation } from "../../components/Navigation/Navigation";
import { Loader } from "../../components/Loader/Loader";
import { urlForLocal } from '../../helper'
import { useDispatch, useSelector } from "react-redux";
import { apiRequest } from "../../api/request";
@ -18,6 +19,7 @@ import {
activeLoader,
setColumnName,
setColumnId,
deletePersonOnProject
} from "../../redux/projectsTrackerSlice";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@ -32,6 +34,7 @@ import filesBoard from "../../images/filesBoard.svg";
import arrow from "../../images/arrowCalendar.png";
import del from "../../images/delete.svg";
import edit from "../../images/edit.svg";
import close from "../../images/closeProjectPersons.svg"
export const ProjectTracker = () => {
const dispatch = useDispatch();
@ -44,6 +47,7 @@ export const ProjectTracker = () => {
const [modalAdd, setModalAdd] = useState(false);
const [modalActiveTicket, setModalActiveTicket] = useState(false);
const [selectedTicket, setSelectedTicket] = useState({});
const [personListOpen, setPersonListOpen] = useState(false)
const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard);
@ -151,6 +155,18 @@ export const ProjectTracker = () => {
});
}
function deletePerson(userId) {
apiRequest("/project/del-user", {
method: "DELETE",
data: {
project_id: projectBoard.id,
user_id: userId
},
}).then((res) => {
dispatch(deletePersonOnProject(userId))
});
}
return (
<div className="tracker">
<ProfileHeader />
@ -226,13 +242,39 @@ export const ProjectTracker = () => {
<span
className="addPerson"
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAdd(true);
setPersonListOpen(true)
}}
>
+
</span>
<p>добавить участника</p>
{personListOpen &&
<div className='persons__list'>
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
<div className='persons__list__items'>
{projectBoard.projectUsers?.map((person) => {
return <div className='persons__list__item' key={person.user_id}>
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
<span>{person.user.fio}</span>
<img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
</div>
})
}
</div>
<div className='persons__list__add'
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAdd(true);
setPersonListOpen(false)
}}
>
<span className='addPerson'>+</span>
<p>Добавить участников</p>
</div>
</div>
}
</div>
<div className="tasks__head__select">
<span>Участвую</span>

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

@ -309,6 +309,118 @@
line-height: 17px;
max-width: 125px;
}
.persons__list {
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEB 100%);
border-radius: 40px;
padding: 33px 24px 44px 34px;
width: 425px;
cursor: default;
&__close {
cursor: pointer;
width: 8px;
height: 8px;
margin-left: auto;
}
&__count {
display: flex;
align-items: end;
color: #1458DD;
font-size: 22px;
margin-top: 10px;
span {
font-size: 44px;
font-weight: 700;
line-height: 40px;
width: auto;
height: auto;
margin-right: 5px;
}
}
&__info {
display: flex;
font-size: 18px;
line-height: 22px;
color: #263238;
font-weight: 500;
margin: 13px 0 32px;
span {
width: auto;
height: auto;
color: #1458DD;
font-weight: 600;
font-size: 18px;
line-height: 22px;
}
}
&__items {
display: flex;
flex-wrap: wrap;
row-gap: 60px;
column-gap: 35px;
margin-bottom: 38px;
}
&__item {
width: 145px;
display: flex;
justify-content: space-between;
align-items: center;
.avatar {
width: 22px;
height: 22px;
}
span {
display: block;
font-weight: 400;
font-size: 12px;
line-height: initial;
color: #807777;
width: auto;
height: auto;
max-width: 85px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.delete {
cursor: pointer;
width: 14px;
height: 14px;
}
}
&__add {
display: flex;
cursor: pointer;
span {
background: #8BCC60;
left: 0;
}
p {
margin-left: 17px;
color: #000000;
font-weight: 400;
font-size: 12px;
line-height: 32px;
position: initial;
}
}
}
}
&__select {