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:26 +03:00
parent fc9d18a380
commit 1fc6cc3f73
3 changed files with 131 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -30,6 +30,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
import archive from "assets/icons/archive.svg"; import archive from "assets/icons/archive.svg";
import arrow from "assets/icons/arrows/arrowStart.png"; import arrow from "assets/icons/arrows/arrowStart.png";
import fullScreen from "assets/icons/arrows/inFullScreen.svg"; import fullScreen from "assets/icons/arrows/inFullScreen.svg";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import calendarIcon from "assets/icons/calendar.svg"; import calendarIcon from "assets/icons/calendar.svg";
import category from "assets/icons/category.svg"; import category from "assets/icons/category.svg";
import close from "assets/icons/closeProjectPersons.svg"; import close from "assets/icons/closeProjectPersons.svg";
@ -39,7 +40,6 @@ import file from "assets/icons/fileModal.svg";
import link from "assets/icons/link.svg"; import link from "assets/icons/link.svg";
import send from "assets/icons/send.svg"; import send from "assets/icons/send.svg";
import watch from "assets/icons/watch.svg"; import watch from "assets/icons/watch.svg";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import avatarMok from "assets/images/avatarMok.png"; import avatarMok from "assets/images/avatarMok.png";
import { getCorrectDate } from "../../../Calendar/calendarHelper"; import { getCorrectDate } from "../../../Calendar/calendarHelper";
@ -55,7 +55,7 @@ export const ModalTiсket = ({
projectName, projectName,
projectUsers, projectUsers,
projectOwnerId, projectOwnerId,
projectMarks projectMarks,
}) => { }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [addSubtask, setAddSubtask] = useState(false); const [addSubtask, setAddSubtask] = useState(false);
@ -75,7 +75,7 @@ export const ModalTiсket = ({
const [dropListMembersOpen, setDropListMembersOpen] = useState(false); const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
const [executor, setExecutor] = useState(task.executor); const [executor, setExecutor] = useState(task.executor);
const [members, setMembers] = useState(task.taskUsers); const [members, setMembers] = useState(task.taskUsers);
const [taskTags, setTaskTags] = useState(task.mark) const [taskTags, setTaskTags] = useState(task.mark);
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
const [timerStart, setTimerStart] = useState(false); const [timerStart, setTimerStart] = useState(false);
const [timerInfo, setTimerInfo] = useState({}); const [timerInfo, setTimerInfo] = useState({});
@ -88,11 +88,11 @@ export const ModalTiсket = ({
const [timerId, setTimerId] = useState(null); const [timerId, setTimerId] = useState(null);
const [taskFiles, setTaskFiles] = useState([]); const [taskFiles, setTaskFiles] = useState([]);
const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers); const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
const [correctProjectTags, setCorrectProjectTags] = useState([]) const [correctProjectTags, setCorrectProjectTags] = useState([]);
const [executorId, setExecutorId] = useState(task.executor_id); const [executorId, setExecutorId] = useState(task.executor_id);
const profileInfo = useSelector(getProfileInfo); const profileInfo = useSelector(getProfileInfo);
const [acceptModalOpen, setAcceptModalOpen] = useState(false); const [acceptModalOpen, setAcceptModalOpen] = useState(false);
const [selectTagsOpen, setSelectTagsOpen] = useState(false) const [selectTagsOpen, setSelectTagsOpen] = useState(false);
const { showNotification } = useNotification(); const { showNotification } = useNotification();
function deleteTask() { function deleteTask() {
@ -353,12 +353,14 @@ export const ModalTiсket = ({
}, []); }, []);
useEffect(() => { useEffect(() => {
let tagIds = taskTags.map((tag) => tag.id) let tagIds = taskTags.map((tag) => tag.id);
setCorrectProjectTags(projectMarks.reduce((acc, cur) => { setCorrectProjectTags(
if (!tagIds.includes(cur.id)) acc.push(cur) projectMarks.reduce((acc, cur) => {
return acc if (!tagIds.includes(cur.id)) acc.push(cur);
}, [])) return acc;
}, [taskTags]) }, [])
);
}, [taskTags]);
async function handleUpload(event) { async function handleUpload(event) {
const formData = new FormData(); const formData = new FormData();
@ -473,13 +475,13 @@ export const ModalTiсket = ({
data: { data: {
mark_id: tagId, mark_id: tagId,
entity_type: 2, entity_type: 2,
entity_id: task.id entity_id: task.id,
} },
}).then((data) => { }).then((data) => {
setSelectTagsOpen(false) setSelectTagsOpen(false);
setTaskTags((prevValue) => [...prevValue, data.mark]) setTaskTags((prevValue) => [...prevValue, data.mark]);
dispatch(setProjectBoardFetch(projectId)); dispatch(setProjectBoardFetch(projectId));
}) });
} }
function deleteTagFromTask(tagId) { function deleteTagFromTask(tagId) {
@ -488,12 +490,12 @@ export const ModalTiсket = ({
data: { data: {
mark_id: tagId, mark_id: tagId,
entity_type: 2, entity_type: 2,
entity_id: task.id entity_id: task.id,
} },
}).then(() => { }).then(() => {
setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId)) setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId));
dispatch(setProjectBoardFetch(projectId)); dispatch(setProjectBoardFetch(projectId));
}) });
} }
function closeAcceptModal() { function closeAcceptModal() {
@ -854,41 +856,62 @@ export const ModalTiсket = ({
</div> </div>
<div className="workers_box-bottom"> <div className="workers_box-bottom">
<div className='tags'> <div className="tags">
<div className='tags__selected'> <div className="tags__selected">
{taskTags.map((tag) => { {taskTags.map((tag) => {
return <div className='tags__selected__item' key={tag.id} style={{background: tag.color}}> return (
<p> <div
{tag.slug} className="tags__selected__item"
</p> key={tag.id}
<img src={close} className='delete' alt='delete' onClick={() => deleteTagFromTask(tag.id)} /> style={{ background: tag.color }}
</div> >
}) <p>{tag.slug}</p>
} <img
src={close}
className="delete"
alt="delete"
onClick={() => deleteTagFromTask(tag.id)}
/>
</div>
);
})}
</div> </div>
<div className='tags__select' onClick={() => setSelectTagsOpen(!selectTagsOpen)}> <div
className="tags__select"
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
>
<span>Выберите тег</span> <span>Выберите тег</span>
<img <img
className={selectTagsOpen ? "open" : ""} className={selectTagsOpen ? "open" : ""}
src={arrowDown} src={arrowDown}
alt="arrow" alt="arrow"
/> />
</div> </div>
{selectTagsOpen && {selectTagsOpen && (
<div className='tags__dropDown'> <div className="tags__dropDown">
<img onClick={() => setSelectTagsOpen(false)} className='tags__dropDown__close' src={close} alt="close" /> <img
{correctProjectTags.map((tag) => { onClick={() => setSelectTagsOpen(false)}
return <div className='tagItem' key={tag.id} onClick={() => addTagToTask(tag.id)}> className="tags__dropDown__close"
src={close}
alt="close"
/>
{correctProjectTags.map((tag) => {
return (
<div
className="tagItem"
key={tag.id}
onClick={() => addTagToTask(tag.id)}
>
<p>{tag.slug}</p> <p>{tag.slug}</p>
<span style={{background: tag.color}} /> <span style={{ background: tag.color }} />
</div> </div>
}) );
} })}
{!Boolean(correctProjectTags.length) && {!Boolean(correctProjectTags.length) && (
<p className='tags__dropDown__noItem'>Нет тегов</p> <p className="tags__dropDown__noItem">Нет тегов</p>
} )}
</div> </div>
} )}
</div> </div>
<div <div
className={editOpen ? "edit" : ""} className={editOpen ? "edit" : ""}

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

@ -7,12 +7,12 @@ import {
activeLoader, activeLoader,
addNewTagToProject, addNewTagToProject,
deletePersonOnProject, deletePersonOnProject,
deleteTagProject,
filterCreatedByMe, filterCreatedByMe,
filteredExecutorTasks, filteredExecutorTasks,
filteredParticipateTasks, filteredParticipateTasks,
getBoarderLoader, getBoarderLoader,
getProjectBoard, getProjectBoard,
deleteTagProject,
modalToggle, modalToggle,
movePositionProjectTask, movePositionProjectTask,
moveProjectTask, moveProjectTask,
@ -72,7 +72,7 @@ export const ProjectTracker = () => {
const [tags, setTags] = useState({ const [tags, setTags] = useState({
open: false, open: false,
add: false, add: false,
edit: false edit: false,
}); });
const [color, setColor] = useState("#aabbcc"); const [color, setColor] = useState("#aabbcc");
const [tagInfo, setTagInfo] = useState({ description: "", name: "" }); const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
@ -327,15 +327,15 @@ export const ProjectTracker = () => {
mark_id: tagInfo.editMarkId, mark_id: tagInfo.editMarkId,
title: tagInfo.description, title: tagInfo.description,
slug: tagInfo.name, slug: tagInfo.name,
color: color color: color,
} },
}).then(() => { }).then(() => {
dispatch(setProjectBoardFetch(projectId.id)) dispatch(setProjectBoardFetch(projectId.id));
setTags((prevState) => ({ setTags((prevState) => ({
...prevState, ...prevState,
edit: false, edit: false,
})); }));
}) });
} }
function deleteTag(tagId) { function deleteTag(tagId) {
@ -345,10 +345,10 @@ export const ProjectTracker = () => {
mark_id: tagId, mark_id: tagId,
entity_type: 1, entity_type: 1,
entity_id: projectId.id, entity_id: projectId.id,
} },
}).then(() => { }).then(() => {
dispatch(deleteTagProject(tagId)) dispatch(deleteTagProject(tagId));
}) });
} }
return ( return (
@ -622,13 +622,13 @@ export const ProjectTracker = () => {
setTags({ setTags({
open: false, open: false,
add: false, add: false,
edit: false edit: false,
}); });
setTagInfo({ setTagInfo({
description: '', description: "",
name: '' name: "",
}) });
setColor("#aabbcc") setColor("#aabbcc");
}} }}
/> />
{!tags.add && !tags.edit && ( {!tags.add && !tags.edit && (
@ -648,20 +648,29 @@ export const ProjectTracker = () => {
style={{ background: tag.color }} style={{ background: tag.color }}
/> />
</div> </div>
<div className='tagItem__images'> <div className="tagItem__images">
<img src={edit} alt='edit' onClick={() => { <img
setTags((prevState) => ({ src={edit}
...prevState, alt="edit"
edit: true, onClick={() => {
})) setTags((prevState) => ({
setTagInfo({ ...prevState,
description: tag.title, edit: true,
name: tag.slug, }));
editMarkId: tag.id setTagInfo({
}) description: tag.title,
setColor(tag.color) name: tag.slug,
}} /> editMarkId: tag.id,
<img onClick={() => deleteTag(tag.id)} className='delete' src={close} alt='delete' /> });
setColor(tag.color);
}}
/>
<img
onClick={() => deleteTag(tag.id)}
className="delete"
src={close}
alt="delete"
/>
</div> </div>
</div> </div>
); );
@ -690,13 +699,13 @@ export const ProjectTracker = () => {
setTags((prevState) => ({ setTags((prevState) => ({
...prevState, ...prevState,
add: false, add: false,
edit: false edit: false,
})); }));
setTagInfo({ setTagInfo({
description: '', description: "",
name: '' name: "",
}) });
setColor("#aabbcc") setColor("#aabbcc");
}} }}
/> />
<input <input
@ -726,16 +735,15 @@ export const ProjectTracker = () => {
<HexColorPicker color={color} onChange={setColor} /> <HexColorPicker color={color} onChange={setColor} />
<button <button
onClick={() => { onClick={() => {
tags.add ? addNewTag() : editTag() tags.add ? addNewTag() : editTag();
} }}
}
className={ className={
tagInfo.name && tagInfo.description tagInfo.name && tagInfo.description
? "formTag__btn" ? "formTag__btn"
: "formTag__btn disable" : "formTag__btn disable"
} }
> >
{tags.add ? 'Добавить' : 'Изменить'} {tags.add ? "Добавить" : "Изменить"}
</button> </button>
</div> </div>
)} )}
@ -891,14 +899,21 @@ export const ProjectTracker = () => {
/> />
)} )}
</div> </div>
{Boolean(task.mark.length) && {Boolean(task.mark.length) && (
<div className='tasks__board__item__tags'> <div className="tasks__board__item__tags">
{task.mark.map((tag) => { {task.mark.map((tag) => {
return <div className='tagItem' key={tag.id} style={{background: tag.color}}><p>{tag.slug}</p></div> return (
}) <div
} className="tagItem"
key={tag.id}
style={{ background: tag.color }}
>
<p>{tag.slug}</p>
</div>
);
})}
</div> </div>
} )}
{task.dead_line && ( {task.dead_line && (
<div className="tasks__board__item__deadLine"> <div className="tasks__board__item__deadLine">
<p>Срок исполнения:</p> <p>Срок исполнения:</p>

4
src/redux/projectsTrackerSlice.js
View File

@ -43,7 +43,9 @@ export const projectsTrackerSlice = createSlice({
); );
}, },
deleteTagProject: (state, action) => { deleteTagProject: (state, action) => {
state.projectBoard.mark = state.projectBoard.mark.filter((tag) => tag.id !== action.payload) state.projectBoard.mark = state.projectBoard.mark.filter(
(tag) => tag.id !== action.payload
);
}, },
addPersonToProject: (state, action) => { addPersonToProject: (state, action) => {
state.projectBoard.projectUsers.push(action.payload); state.projectBoard.projectUsers.push(action.payload);