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-24 22:58:45 +03:00
parent c4a4fa1333
commit 33b70c7fbd
2 changed files with 117 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,12 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { HexColorPicker } from "react-colorful";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import {
HexColorPicker
} from "react-colorful";
import { import {
activeLoader, activeLoader,
deletePersonOnProject,
addNewTagToProject, addNewTagToProject,
deletePersonOnProject,
filterCreatedByMe, filterCreatedByMe,
filteredExecutorTasks, filteredExecutorTasks,
filteredParticipateTasks, filteredParticipateTasks,
@ -55,7 +53,6 @@ import accept from "assets/images/accept.png";
import archive from "assets/images/archiveIcon.png"; import archive from "assets/images/archiveIcon.png";
import avatarMok from "assets/images/avatarMok.png"; import avatarMok from "assets/images/avatarMok.png";
import { getCorrectDate } from "../../components/Calendar/calendarHelper"; import { getCorrectDate } from "../../components/Calendar/calendarHelper";
export const ProjectTracker = () => { export const ProjectTracker = () => {
@ -73,10 +70,10 @@ export const ProjectTracker = () => {
const [personListOpen, setPersonListOpen] = useState(false); const [personListOpen, setPersonListOpen] = useState(false);
const [tags, setTags] = useState({ const [tags, setTags] = useState({
open: false, open: false,
add: false add: false,
}) });
const [color, setColor] = useState("#aabbcc"); const [color, setColor] = useState("#aabbcc");
const [tagInfo, setTagInfo] = useState({description: '', name: ''}) const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
useState(false); useState(false);
const [filteredNoTasks, setFilteredNoTasks] = useState(false); const [filteredNoTasks, setFilteredNoTasks] = useState(false);
@ -294,14 +291,14 @@ export const ProjectTracker = () => {
dispatch(setProjectBoardFetch(projectId.id)); dispatch(setProjectBoardFetch(projectId.id));
} }
function addNewTag () { function addNewTag() {
apiRequest("/mark/create", { apiRequest("/mark/create", {
method: "POST", method: "POST",
data: { data: {
title: tagInfo.description, title: tagInfo.description,
slug: tagInfo.name, slug: tagInfo.name,
color: color, color: color,
status: 1 status: 1,
}, },
}).then((data) => { }).then((data) => {
apiRequest("/mark/attach", { apiRequest("/mark/attach", {
@ -309,16 +306,16 @@ export const ProjectTracker = () => {
data: { data: {
mark_id: data.id, mark_id: data.id,
entity_type: 1, entity_type: 1,
entity_id: projectId.id entity_id: projectId.id,
} },
}).then((data) => { }).then((data) => {
dispatch(addNewTagToProject(data.mark)) dispatch(addNewTagToProject(data.mark));
setTags((prevState) => ({ setTags((prevState) => ({
...prevState, ...prevState,
add: false add: false,
})) }));
}) });
}) });
} }
return ( return (
@ -570,85 +567,117 @@ export const ProjectTracker = () => {
</div> </div>
)} )}
<div className="tasks__head__tags"> <div className="tasks__head__tags">
<div className='tags__add' onClick={() => { <div
setTags((prevState) => ({ className="tags__add"
...prevState, onClick={() => {
open: !tags.open setTags((prevState) => ({
})) ...prevState,
}}> open: !tags.open,
}));
}}
>
<p>Список тегов</p> <p>Список тегов</p>
<span>+</span> <span>+</span>
</div> </div>
{tags.open && {tags.open && (
<div className='tags__list'> <div className="tags__list">
<img src={close} className='close' alt='close' onClick={() => { <img
setTags((prevState) => ({ src={close}
...prevState, className="close"
open: false alt="close"
})) onClick={() => {
}} /> setTags((prevState) => ({
{!tags.add && ...prevState,
<div className='tags__list__created'> open: false,
{projectBoard.mark.map((tag) => { }));
return <div className='tagItem' key={tag.id}> }}
<p className='tagItem__description'> />
{tag.title} {!tags.add && (
</p> <div className="tags__list__created">
<div className='tagItem__info'> {projectBoard.mark.map((tag) => {
<span className='tagItem__info__name'>{tag.slug}</span> return (
<span className='tagItem__info__color' style={{background: tag.color}}/> <div className="tagItem" key={tag.id}>
<p className="tagItem__description">
{tag.title}
</p>
<div className="tagItem__info">
<span className="tagItem__info__name">
{tag.slug}
</span>
<span
className="tagItem__info__color"
style={{ background: tag.color }}
/>
</div> </div>
</div> </div>
}) );
} })}
<div className='addNewTag' onClick={() => setTags((prevState) => ({...prevState, add: true}))}> <div
<p> className="addNewTag"
Добавить новый тег onClick={() =>
</p>
<span>
+
</span>
</div>
</div>
}
{tags.add &&
<div className='formTag'>
<img src={arrow} className='arrow' alt='arrow' onClick={() => {
setTags((prevState) => ({ setTags((prevState) => ({
...prevState, ...prevState,
add: false add: true,
})) }))
}}/> }
<input >
className='formTag__input' <p>Добавить новый тег</p>
placeholder='Описание метки' <span>+</span>
maxLength="25"
value={tagInfo.description}
onChange={(e) => setTagInfo(prevState => ({
...prevState,
description: e.target.value
}))}
/>
<input
className='formTag__input'
placeholder='Тег'
value={tagInfo.name}
maxLength="10"
onChange={(e) => setTagInfo(prevState => ({
...prevState,
name: e.target.value
}))}
/>
<HexColorPicker color={color} onChange={setColor} />
<button
onClick={addNewTag}
className={tagInfo.name && tagInfo.description ? 'formTag__btn' : 'formTag__btn disable'}>
Добавить
</button>
</div> </div>
} </div>
)}
{tags.add && (
<div className="formTag">
<img
src={arrow}
className="arrow"
alt="arrow"
onClick={() => {
setTags((prevState) => ({
...prevState,
add: false,
}));
}}
/>
<input
className="formTag__input"
placeholder="Описание метки"
maxLength="25"
value={tagInfo.description}
onChange={(e) =>
setTagInfo((prevState) => ({
...prevState,
description: e.target.value,
}))
}
/>
<input
className="formTag__input"
placeholder="Тег"
value={tagInfo.name}
maxLength="10"
onChange={(e) =>
setTagInfo((prevState) => ({
...prevState,
name: e.target.value,
}))
}
/>
<HexColorPicker color={color} onChange={setColor} />
<button
onClick={addNewTag}
className={
tagInfo.name && tagInfo.description
? "formTag__btn"
: "formTag__btn disable"
}
>
Добавить
</button>
</div>
)}
</div> </div>
} )}
</div> </div>
<Link to="/profile/tracker" className="tasks__head__back"> <Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p> <p>Вернуться на проекты</p>

2
src/redux/projectsTrackerSlice.js
View File

@ -46,7 +46,7 @@ export const projectsTrackerSlice = createSlice({
state.projectBoard.projectUsers.push(action.payload); state.projectBoard.projectUsers.push(action.payload);
}, },
addNewTagToProject: (state, action) => { addNewTagToProject: (state, action) => {
state.projectBoard.mark.push(action.payload) state.projectBoard.mark.push(action.payload);
}, },
activeLoader: (state) => { activeLoader: (state) => {
state.boardLoader = true; state.boardLoader = true;