marks
This commit is contained in:
Mikola
parent
fc9d18a380
commit
1fc6cc3f73
@ -30,6 +30,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
|
||||
import archive from "assets/icons/archive.svg";
|
||||
import arrow from "assets/icons/arrows/arrowStart.png";
|
||||
import fullScreen from "assets/icons/arrows/inFullScreen.svg";
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
import calendarIcon from "assets/icons/calendar.svg";
|
||||
import category from "assets/icons/category.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 send from "assets/icons/send.svg";
|
||||
import watch from "assets/icons/watch.svg";
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
import avatarMok from "assets/images/avatarMok.png";
|
||||
|
||||
import { getCorrectDate } from "../../../Calendar/calendarHelper";
|
||||
@ -55,7 +55,7 @@ export const ModalTiсket = ({
|
||||
projectName,
|
||||
projectUsers,
|
||||
projectOwnerId,
|
||||
projectMarks
|
||||
projectMarks,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [addSubtask, setAddSubtask] = useState(false);
|
||||
@ -75,7 +75,7 @@ export const ModalTiсket = ({
|
||||
const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
|
||||
const [executor, setExecutor] = useState(task.executor);
|
||||
const [members, setMembers] = useState(task.taskUsers);
|
||||
const [taskTags, setTaskTags] = useState(task.mark)
|
||||
const [taskTags, setTaskTags] = useState(task.mark);
|
||||
const [users, setUsers] = useState([]);
|
||||
const [timerStart, setTimerStart] = useState(false);
|
||||
const [timerInfo, setTimerInfo] = useState({});
|
||||
@ -88,11 +88,11 @@ export const ModalTiсket = ({
|
||||
const [timerId, setTimerId] = useState(null);
|
||||
const [taskFiles, setTaskFiles] = useState([]);
|
||||
const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
|
||||
const [correctProjectTags, setCorrectProjectTags] = useState([])
|
||||
const [correctProjectTags, setCorrectProjectTags] = useState([]);
|
||||
const [executorId, setExecutorId] = useState(task.executor_id);
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
|
||||
const [selectTagsOpen, setSelectTagsOpen] = useState(false)
|
||||
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
|
||||
const { showNotification } = useNotification();
|
||||
|
||||
function deleteTask() {
|
||||
@ -353,12 +353,14 @@ export const ModalTiсket = ({
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let tagIds = taskTags.map((tag) => tag.id)
|
||||
setCorrectProjectTags(projectMarks.reduce((acc, cur) => {
|
||||
if (!tagIds.includes(cur.id)) acc.push(cur)
|
||||
return acc
|
||||
}, []))
|
||||
}, [taskTags])
|
||||
let tagIds = taskTags.map((tag) => tag.id);
|
||||
setCorrectProjectTags(
|
||||
projectMarks.reduce((acc, cur) => {
|
||||
if (!tagIds.includes(cur.id)) acc.push(cur);
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
}, [taskTags]);
|
||||
|
||||
async function handleUpload(event) {
|
||||
const formData = new FormData();
|
||||
@ -473,13 +475,13 @@ export const ModalTiсket = ({
|
||||
data: {
|
||||
mark_id: tagId,
|
||||
entity_type: 2,
|
||||
entity_id: task.id
|
||||
}
|
||||
entity_id: task.id,
|
||||
},
|
||||
}).then((data) => {
|
||||
setSelectTagsOpen(false)
|
||||
setTaskTags((prevValue) => [...prevValue, data.mark])
|
||||
setSelectTagsOpen(false);
|
||||
setTaskTags((prevValue) => [...prevValue, data.mark]);
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function deleteTagFromTask(tagId) {
|
||||
@ -488,12 +490,12 @@ export const ModalTiсket = ({
|
||||
data: {
|
||||
mark_id: tagId,
|
||||
entity_type: 2,
|
||||
entity_id: task.id
|
||||
}
|
||||
entity_id: task.id,
|
||||
},
|
||||
}).then(() => {
|
||||
setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId))
|
||||
setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId));
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function closeAcceptModal() {
|
||||
@ -854,41 +856,62 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
|
||||
<div className="workers_box-bottom">
|
||||
<div className='tags'>
|
||||
<div className='tags__selected'>
|
||||
<div className="tags">
|
||||
<div className="tags__selected">
|
||||
{taskTags.map((tag) => {
|
||||
return <div className='tags__selected__item' key={tag.id} style={{background: tag.color}}>
|
||||
<p>
|
||||
{tag.slug}
|
||||
</p>
|
||||
<img src={close} className='delete' alt='delete' onClick={() => deleteTagFromTask(tag.id)} />
|
||||
</div>
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="tags__selected__item"
|
||||
key={tag.id}
|
||||
style={{ background: tag.color }}
|
||||
>
|
||||
<p>{tag.slug}</p>
|
||||
<img
|
||||
src={close}
|
||||
className="delete"
|
||||
alt="delete"
|
||||
onClick={() => deleteTagFromTask(tag.id)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className='tags__select' onClick={() => setSelectTagsOpen(!selectTagsOpen)}>
|
||||
<div
|
||||
className="tags__select"
|
||||
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
||||
>
|
||||
<span>Выберите тег</span>
|
||||
<img
|
||||
className={selectTagsOpen ? "open" : ""}
|
||||
src={arrowDown}
|
||||
alt="arrow"
|
||||
className={selectTagsOpen ? "open" : ""}
|
||||
src={arrowDown}
|
||||
alt="arrow"
|
||||
/>
|
||||
</div>
|
||||
{selectTagsOpen &&
|
||||
<div className='tags__dropDown'>
|
||||
<img onClick={() => setSelectTagsOpen(false)} className='tags__dropDown__close' src={close} alt="close" />
|
||||
{correctProjectTags.map((tag) => {
|
||||
return <div className='tagItem' key={tag.id} onClick={() => addTagToTask(tag.id)}>
|
||||
{selectTagsOpen && (
|
||||
<div className="tags__dropDown">
|
||||
<img
|
||||
onClick={() => setSelectTagsOpen(false)}
|
||||
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>
|
||||
<span style={{background: tag.color}} />
|
||||
<span style={{ background: tag.color }} />
|
||||
</div>
|
||||
})
|
||||
}
|
||||
{!Boolean(correctProjectTags.length) &&
|
||||
<p className='tags__dropDown__noItem'>Нет тегов</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
);
|
||||
})}
|
||||
{!Boolean(correctProjectTags.length) && (
|
||||
<p className="tags__dropDown__noItem">Нет тегов</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={editOpen ? "edit" : ""}
|
||||
|
||||
@ -7,12 +7,12 @@ import {
|
||||
activeLoader,
|
||||
addNewTagToProject,
|
||||
deletePersonOnProject,
|
||||
deleteTagProject,
|
||||
filterCreatedByMe,
|
||||
filteredExecutorTasks,
|
||||
filteredParticipateTasks,
|
||||
getBoarderLoader,
|
||||
getProjectBoard,
|
||||
deleteTagProject,
|
||||
modalToggle,
|
||||
movePositionProjectTask,
|
||||
moveProjectTask,
|
||||
@ -72,7 +72,7 @@ export const ProjectTracker = () => {
|
||||
const [tags, setTags] = useState({
|
||||
open: false,
|
||||
add: false,
|
||||
edit: false
|
||||
edit: false,
|
||||
});
|
||||
const [color, setColor] = useState("#aabbcc");
|
||||
const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
|
||||
@ -327,15 +327,15 @@ export const ProjectTracker = () => {
|
||||
mark_id: tagInfo.editMarkId,
|
||||
title: tagInfo.description,
|
||||
slug: tagInfo.name,
|
||||
color: color
|
||||
}
|
||||
color: color,
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(setProjectBoardFetch(projectId.id))
|
||||
dispatch(setProjectBoardFetch(projectId.id));
|
||||
setTags((prevState) => ({
|
||||
...prevState,
|
||||
edit: false,
|
||||
}));
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function deleteTag(tagId) {
|
||||
@ -345,10 +345,10 @@ export const ProjectTracker = () => {
|
||||
mark_id: tagId,
|
||||
entity_type: 1,
|
||||
entity_id: projectId.id,
|
||||
}
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(deleteTagProject(tagId))
|
||||
})
|
||||
dispatch(deleteTagProject(tagId));
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
@ -622,13 +622,13 @@ export const ProjectTracker = () => {
|
||||
setTags({
|
||||
open: false,
|
||||
add: false,
|
||||
edit: false
|
||||
edit: false,
|
||||
});
|
||||
setTagInfo({
|
||||
description: '',
|
||||
name: ''
|
||||
})
|
||||
setColor("#aabbcc")
|
||||
description: "",
|
||||
name: "",
|
||||
});
|
||||
setColor("#aabbcc");
|
||||
}}
|
||||
/>
|
||||
{!tags.add && !tags.edit && (
|
||||
@ -648,20 +648,29 @@ 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 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>
|
||||
);
|
||||
@ -690,13 +699,13 @@ export const ProjectTracker = () => {
|
||||
setTags((prevState) => ({
|
||||
...prevState,
|
||||
add: false,
|
||||
edit: false
|
||||
edit: false,
|
||||
}));
|
||||
setTagInfo({
|
||||
description: '',
|
||||
name: ''
|
||||
})
|
||||
setColor("#aabbcc")
|
||||
description: "",
|
||||
name: "",
|
||||
});
|
||||
setColor("#aabbcc");
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
@ -726,16 +735,15 @@ export const ProjectTracker = () => {
|
||||
<HexColorPicker color={color} onChange={setColor} />
|
||||
<button
|
||||
onClick={() => {
|
||||
tags.add ? addNewTag() : editTag()
|
||||
}
|
||||
}
|
||||
tags.add ? addNewTag() : editTag();
|
||||
}}
|
||||
className={
|
||||
tagInfo.name && tagInfo.description
|
||||
? "formTag__btn"
|
||||
: "formTag__btn disable"
|
||||
}
|
||||
>
|
||||
{tags.add ? 'Добавить' : 'Изменить'}
|
||||
{tags.add ? "Добавить" : "Изменить"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@ -891,14 +899,21 @@ export const ProjectTracker = () => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{Boolean(task.mark.length) &&
|
||||
<div className='tasks__board__item__tags'>
|
||||
{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>
|
||||
})
|
||||
}
|
||||
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>
|
||||
|
||||
@ -43,7 +43,9 @@ export const projectsTrackerSlice = createSlice({
|
||||
);
|
||||
},
|
||||
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) => {
|
||||
state.projectBoard.projectUsers.push(action.payload);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user