create task with tags

This commit is contained in:
Mikola 2023-10-30 01:35:28 +03:00
parent c2c57e3791
commit 512a8c6121

View File

@ -35,11 +35,11 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg";
import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import close from "assets/icons/close.png";
import calendarImg from "assets/icons/createTaskCalendar.svg";
import avatarMok from "assets/images/avatarMok.png";
import "./trackerModal.scss";
import close from "assets/icons/close.png";
registerLocale("ru", ru);
@ -52,7 +52,7 @@ export const TrackerModal = ({
projectId,
priorityTask,
projectUsers,
projectMarks
projectMarks,
}) => {
const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard);
@ -80,7 +80,7 @@ export const TrackerModal = ({
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
const [correctProjectTags, setCorrectProjectTags] = useState([]);
const [taskTags, setTaskTags] = useState([]);
const [selectTagsOpen, setSelectTagsOpen] = useState(false)
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
useState(false);
const { showNotification } = useNotification();
@ -146,10 +146,10 @@ export const TrackerModal = ({
data: {
mark_id: taskTags[i].id,
entity_type: 2,
entity_id: res.id
entity_id: res.id,
},
}).then(() => {
setTaskTags([])
setTaskTags([]);
});
}
if (selectedExecutorTask.user_id) {
@ -486,39 +486,72 @@ export const TrackerModal = ({
</div>
<div className="createTaskBody__right">
<div className="createTaskBody__right__tags">
<div className='tags__selected'>
<div className='tags__selected__items'>
<div className="tags__selected">
<div className="tags__selected__items">
{taskTags.map((tag) => {
return <div className='selectedTag' key={tag.id} style={{ background: tag.color }}>
return (
<div
className="selectedTag"
key={tag.id}
style={{ background: tag.color }}
>
<p>{tag.slug}</p>
<img
src={close}
className="delete"
alt="delete"
onClick={() => setTaskTags((prevState) => prevState.filter((prevTag) => prevTag.id !== tag.id))}
onClick={() =>
setTaskTags((prevState) =>
prevState.filter(
(prevTag) => prevTag.id !== tag.id
)
)
}
/>
</div>
})
}
);
})}
</div>
<div className='tags__selected__name' onClick={() => setSelectTagsOpen(!selectTagsOpen)}>
<div
className="tags__selected__name"
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
>
Выберете тег
<img className={selectTagsOpen ? 'arrow arrow--open' : 'arrow'} src={arrowDown} alt="arrow" />
<img
className={
selectTagsOpen ? "arrow arrow--open" : "arrow"
}
src={arrowDown}
alt="arrow"
/>
</div>
</div>
{selectTagsOpen &&
<div className='tags__dropDown'>
<img src={close} className='close' onClick={() => setSelectTagsOpen(false)}/>
{selectTagsOpen && (
<div className="tags__dropDown">
<img
src={close}
className="close"
onClick={() => setSelectTagsOpen(false)}
/>
{correctProjectTags.map((tag) => {
return <div className='tag__item' key={tag.id} onClick={() => setTaskTags((prevState) => ([...prevState, tag]))}>
return (
<div
className="tag__item"
key={tag.id}
onClick={() =>
setTaskTags((prevState) => [...prevState, tag])
}
>
<p>{tag.slug}</p>
<span style={{ background: tag.color }} />
</div>
})
}
{Boolean(!correctProjectTags.length) && <p className='noTags'>Нет тегов</p>}
);
})}
{Boolean(!correctProjectTags.length) && (
<p className="noTags">Нет тегов</p>
)}
</div>
}
)}
</div>
<div
onClick={() =>