marks
This commit is contained in:
Mikola
@ -39,6 +39,7 @@ 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";
|
||||
@ -54,6 +55,7 @@ export const ModalTiсket = ({
|
||||
projectName,
|
||||
projectUsers,
|
||||
projectOwnerId,
|
||||
projectMarks
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [addSubtask, setAddSubtask] = useState(false);
|
||||
@ -73,6 +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 [users, setUsers] = useState([]);
|
||||
const [timerStart, setTimerStart] = useState(false);
|
||||
const [timerInfo, setTimerInfo] = useState({});
|
||||
@ -85,9 +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 [executorId, setExecutorId] = useState(task.executor_id);
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
|
||||
const [selectTagsOpen, setSelectTagsOpen] = useState(false)
|
||||
const { showNotification } = useNotification();
|
||||
|
||||
function deleteTask() {
|
||||
@ -347,6 +352,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])
|
||||
|
||||
async function handleUpload(event) {
|
||||
const formData = new FormData();
|
||||
formData.append("uploadFile", event.target.files[0]);
|
||||
@ -454,6 +467,35 @@ export const ModalTiсket = ({
|
||||
});
|
||||
}
|
||||
|
||||
function addTagToTask(tagId) {
|
||||
apiRequest("/mark/attach", {
|
||||
method: "POST",
|
||||
data: {
|
||||
mark_id: tagId,
|
||||
entity_type: 2,
|
||||
entity_id: task.id
|
||||
}
|
||||
}).then((data) => {
|
||||
setSelectTagsOpen(false)
|
||||
setTaskTags((prevValue) => [...prevValue, data.mark])
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
})
|
||||
}
|
||||
|
||||
function deleteTagFromTask(tagId) {
|
||||
apiRequest("/mark/detach", {
|
||||
method: "DELETE",
|
||||
data: {
|
||||
mark_id: tagId,
|
||||
entity_type: 2,
|
||||
entity_id: task.id
|
||||
}
|
||||
}).then(() => {
|
||||
setTaskTags((prevValue) => prevValue.filter((tag) => tag.id !== tagId))
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
})
|
||||
}
|
||||
|
||||
function closeAcceptModal() {
|
||||
setAcceptModalOpen(false);
|
||||
}
|
||||
@ -478,7 +520,6 @@ export const ModalTiсket = ({
|
||||
<img src={fullScreen}></img>
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
<div className="content__task">
|
||||
{editOpen ? (
|
||||
<input
|
||||
@ -813,6 +854,42 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
|
||||
<div className="workers_box-bottom">
|
||||
<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>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className='tags__select' onClick={() => setSelectTagsOpen(!selectTagsOpen)}>
|
||||
<span>Выберите тег</span>
|
||||
<img
|
||||
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)}>
|
||||
<p>{tag.slug}</p>
|
||||
<span style={{background: tag.color}} />
|
||||
</div>
|
||||
})
|
||||
}
|
||||
{!Boolean(correctProjectTags.length) &&
|
||||
<p className='tags__dropDown__noItem'>Нет тегов</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
className={editOpen ? "edit" : ""}
|
||||
onClick={() => {
|
||||
|
||||
@ -971,7 +971,7 @@
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
padding: 20px 110px 35px 56px;
|
||||
padding: 10px 110px 15px 56px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
@ -991,6 +991,129 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
row-gap: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e0e0e0;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&__selected {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
max-width: 200px;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
padding: 3px 5px 3px 8px;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
cursor: default;
|
||||
|
||||
p {
|
||||
font-weight: 600;
|
||||
text-decoration: none !important;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
line-height: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__select {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid gray;
|
||||
padding: 5px 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__dropDown {
|
||||
position: absolute;
|
||||
padding: 15px 10px 10px;
|
||||
background: white;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e4e4;
|
||||
top: 110%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 4px;
|
||||
z-index: 10;
|
||||
|
||||
&__close {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.tagItem {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
column-gap: 8px;
|
||||
padding: 5px;
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__noItem {
|
||||
line-height: 20px;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
text-decoration: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
background: #52b709;
|
||||
border-radius: 50px;
|
||||
|
||||
Reference in New Issue
Block a user