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

create task with tags

Browse Source
This commit is contained in:
Mikola 2023-10-30 01:35:28 +03:00
parent c2c57e3791
commit 512a8c6121
1 changed files with 70 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
View File

@ -35,11 +35,11 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg"; import arrowCreateTask from "assets/icons/arrows/arrowCreateTask.svg";
import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg"; import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
import arrowDown from "assets/icons/arrows/selectArrow.png"; import arrowDown from "assets/icons/arrows/selectArrow.png";
import close from "assets/icons/close.png";
import calendarImg from "assets/icons/createTaskCalendar.svg"; import calendarImg from "assets/icons/createTaskCalendar.svg";
import avatarMok from "assets/images/avatarMok.png"; import avatarMok from "assets/images/avatarMok.png";
import "./trackerModal.scss"; import "./trackerModal.scss";
import close from "assets/icons/close.png";
registerLocale("ru", ru); registerLocale("ru", ru);
@ -52,7 +52,7 @@ export const TrackerModal = ({
projectId, projectId,
priorityTask, priorityTask,
projectUsers, projectUsers,
projectMarks projectMarks,
}) => { }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
@ -80,7 +80,7 @@ export const TrackerModal = ({
const [correctProjectUsers, setCorrectProjectUsers] = useState([]); const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
const [correctProjectTags, setCorrectProjectTags] = useState([]); const [correctProjectTags, setCorrectProjectTags] = useState([]);
const [taskTags, setTaskTags] = useState([]); const [taskTags, setTaskTags] = useState([]);
const [selectTagsOpen, setSelectTagsOpen] = useState(false) const [selectTagsOpen, setSelectTagsOpen] = useState(false);
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
useState(false); useState(false);
const { showNotification } = useNotification(); const { showNotification } = useNotification();
@ -146,10 +146,10 @@ export const TrackerModal = ({
data: { data: {
mark_id: taskTags[i].id, mark_id: taskTags[i].id,
entity_type: 2, entity_type: 2,
entity_id: res.id entity_id: res.id,
}, },
}).then(() => { }).then(() => {
setTaskTags([]) setTaskTags([]);
}); });
} }
if (selectedExecutorTask.user_id) { if (selectedExecutorTask.user_id) {
@ -327,10 +327,10 @@ export const TrackerModal = ({
let tagIds = taskTags.map((tag) => tag.id); let tagIds = taskTags.map((tag) => tag.id);
if (projectMarks) { if (projectMarks) {
setCorrectProjectTags( setCorrectProjectTags(
projectMarks.reduce((acc, cur) => { projectMarks.reduce((acc, cur) => {
if (!tagIds.includes(cur.id)) acc.push(cur); if (!tagIds.includes(cur.id)) acc.push(cur);
return acc; return acc;
}, []) }, [])
); );
} }
}, [taskTags, projectMarks]); }, [taskTags, projectMarks]);
@ -436,12 +436,12 @@ export const TrackerModal = ({
<div className="createTaskBody__right__owner"> <div className="createTaskBody__right__owner">
<p>Создатель : {profileInfo?.fio}</p> <p>Создатель : {profileInfo?.fio}</p>
<img <img
src={ src={
profileInfo.photo profileInfo.photo
? urlForLocal(profileInfo.photo) ? urlForLocal(profileInfo.photo)
: avatarMok : avatarMok
} }
alt="avatar" alt="avatar"
/> />
</div> </div>
{/*<span>Этап</span>*/} {/*<span>Этап</span>*/}
@ -486,39 +486,72 @@ export const TrackerModal = ({
</div> </div>
<div className="createTaskBody__right"> <div className="createTaskBody__right">
<div className="createTaskBody__right__tags"> <div className="createTaskBody__right__tags">
<div className='tags__selected'> <div className="tags__selected">
<div className='tags__selected__items'> <div className="tags__selected__items">
{taskTags.map((tag) => { {taskTags.map((tag) => {
return <div className='selectedTag' key={tag.id} style={{ background: tag.color }}> return (
<p>{tag.slug}</p> <div
<img className="selectedTag"
key={tag.id}
style={{ background: tag.color }}
>
<p>{tag.slug}</p>
<img
src={close} src={close}
className="delete" className="delete"
alt="delete" alt="delete"
onClick={() => setTaskTags((prevState) => prevState.filter((prevTag) => prevTag.id !== tag.id))} onClick={() =>
/> setTaskTags((prevState) =>
</div> prevState.filter(
}) (prevTag) => prevTag.id !== tag.id
} )
)
}
/>
</div>
);
})}
</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>
</div> </div>
{selectTagsOpen && {selectTagsOpen && (
<div className='tags__dropDown'> <div className="tags__dropDown">
<img src={close} className='close' onClick={() => setSelectTagsOpen(false)}/> <img
{correctProjectTags.map((tag) => { src={close}
return <div className='tag__item' key={tag.id} onClick={() => setTaskTags((prevState) => ([...prevState, tag]))}> className="close"
onClick={() => setSelectTagsOpen(false)}
/>
{correctProjectTags.map((tag) => {
return (
<div
className="tag__item"
key={tag.id}
onClick={() =>
setTaskTags((prevState) => [...prevState, tag])
}
>
<p>{tag.slug}</p> <p>{tag.slug}</p>
<span style={{ background: tag.color }} /> <span style={{ background: tag.color }} />
</div> </div>
}) );
} })}
{Boolean(!correctProjectTags.length) && <p className='noTags'>Нет тегов</p>} {Boolean(!correctProjectTags.length) && (
</div> <p className="noTags">Нет тегов</p>
} )}
</div>
)}
</div> </div>
<div <div
onClick={() => onClick={() =>