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

marks

Browse Source
This commit is contained in:
Mikola
2023-10-25 16:33:08 +03:00
parent 33b70c7fbd
commit fc9d18a380
5 changed files with 320 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ import {
filteredParticipateTasks,
getBoarderLoader,
getProjectBoard,
deleteTagProject,
modalToggle,
movePositionProjectTask,
moveProjectTask,
@ -71,6 +72,7 @@ export const ProjectTracker = () => {
const [tags, setTags] = useState({
open: false,
add: false,
edit: false
});
const [color, setColor] = useState("#aabbcc");
const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
@ -318,6 +320,37 @@ export const ProjectTracker = () => {
});
}
function editTag() {
apiRequest("/mark/update", {
method: "PUT",
data: {
mark_id: tagInfo.editMarkId,
title: tagInfo.description,
slug: tagInfo.name,
color: color
}
}).then(() => {
dispatch(setProjectBoardFetch(projectId.id))
setTags((prevState) => ({
...prevState,
edit: false,
}));
})
}
function deleteTag(tagId) {
apiRequest("/mark/detach", {
method: "DELETE",
data: {
mark_id: tagId,
entity_type: 1,
entity_id: projectId.id,
}
}).then(() => {
dispatch(deleteTagProject(tagId))
})
}
return (
<div className="tracker">
<ProfileHeader />
@ -586,13 +619,19 @@ export const ProjectTracker = () => {
className="close"
alt="close"
onClick={() => {
setTags((prevState) => ({
...prevState,
setTags({
open: false,
}));
add: false,
edit: false
});
setTagInfo({
description: '',
name: ''
})
setColor("#aabbcc")
}}
/>
{!tags.add && (
{!tags.add && !tags.edit && (
<div className="tags__list__created">
{projectBoard.mark.map((tag) => {
return (
@ -609,6 +648,21 @@ export const ProjectTracker = () => {
style={{ background: tag.color }}
/>
</div>
<div className='tagItem__images'>
<img src={edit} alt='edit' onClick={() => {
setTags((prevState) => ({
...prevState,
edit: true,
}))
setTagInfo({
description: tag.title,
name: tag.slug,
editMarkId: tag.id
})
setColor(tag.color)
}} />
<img onClick={() => deleteTag(tag.id)} className='delete' src={close} alt='delete' />
</div>
</div>
);
})}
@ -626,7 +680,7 @@ export const ProjectTracker = () => {
</div>
</div>
)}
{tags.add && (
{(tags.add || tags.edit) && (
<div className="formTag">
<img
src={arrow}
@ -636,7 +690,13 @@ export const ProjectTracker = () => {
setTags((prevState) => ({
...prevState,
add: false,
edit: false
}));
setTagInfo({
description: '',
name: ''
})
setColor("#aabbcc")
}}
/>
<input
@ -665,14 +725,17 @@ export const ProjectTracker = () => {
/>
<HexColorPicker color={color} onChange={setColor} />
<button
onClick={addNewTag}
onClick={() => {
tags.add ? addNewTag() : editTag()
}
}
className={
tagInfo.name && tagInfo.description
? "formTag__btn"
: "formTag__btn disable"
}
>
Добавить
{tags.add ? 'Добавить' : 'Изменить'}
</button>
</div>
)}
@ -695,6 +758,7 @@ export const ProjectTracker = () => {
projectName={projectBoard.name}
projectUsers={projectBoard.projectUsers}
projectOwnerId={projectBoard.owner_id}
projectMarks={projectBoard.mark}
/>
)}
@ -827,6 +891,14 @@ export const ProjectTracker = () => {
/>
)}
</div>
{Boolean(task.mark.length) &&
<div className='tasks__board__item__tags'>
{task.mark.map((tag) => {
return <div className='tagItem' key={tag.id} style={{background: tag.color}}><p>{tag.slug}</p></div>
})
}
</div>
}
{task.dead_line && (
<div className="tasks__board__item__deadLine">
<p>Срок исполнения:</p>

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

@ -386,7 +386,7 @@
.persons__list {
position: absolute;
z-index: 20;
z-index: 8;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
@ -784,7 +784,7 @@
&__list {
position: absolute;
background: #f8f9fa;
z-index: 20;
z-index: 8;
border-radius: 8px;
padding: 20px 10px 10px;
top: 30px;
@ -808,6 +808,7 @@
margin-top: 8px;
.tagItem {
position: relative;
display: flex;
flex-direction: column;
padding: 5px;
@ -835,6 +836,23 @@
border-radius: 50px;
}
}
&__images {
position: absolute;
right: 5px;
top: 3px;
display: flex;
column-gap: 3px;
img {
cursor: pointer;
}
.delete {
width: 14px;
height: 14px;
}
}
}
}
@ -999,7 +1017,6 @@
&__item {
width: 328px;
max-height: 250px;
padding: 16px;
position: relative;
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
@ -1147,6 +1164,21 @@
height: 25px;
}
}
&__tags {
display: flex;
flex-wrap: wrap;
column-gap: 6px;
row-gap: 3px;
margin: 5px 0 10px;
.tagItem {
padding: 3px 10px;
border-radius: 10px;
color: white;
font-size: 12px;
}
}
}
.openItems {