Merge pull request #142 from apuc/out-click-modals
create task with tags
This commit is contained in:
NikoM1k
@@ -933,7 +933,7 @@ export const ModalTiсket = ({
|
||||
className="tags__select"
|
||||
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
||||
>
|
||||
<span>Выберите тег</span>
|
||||
<span>Выберете тег</span>
|
||||
<img
|
||||
className={selectTagsOpen ? "open" : ""}
|
||||
src={arrowDown}
|
||||
|
||||
@@ -1126,7 +1126,7 @@ export const TicketFullScreen = () => {
|
||||
className="tags__select"
|
||||
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
||||
>
|
||||
<span>Выберите тег</span>
|
||||
<span>Выберете тег</span>
|
||||
<img
|
||||
className={selectTagsOpen ? "open" : ""}
|
||||
src={arrowDown}
|
||||
|
||||
@@ -35,6 +35,7 @@ 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";
|
||||
|
||||
@@ -51,6 +52,7 @@ export const TrackerModal = ({
|
||||
projectId,
|
||||
priorityTask,
|
||||
projectUsers,
|
||||
projectMarks,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
@@ -76,6 +78,9 @@ export const TrackerModal = ({
|
||||
);
|
||||
const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
|
||||
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
|
||||
const [correctProjectTags, setCorrectProjectTags] = useState([]);
|
||||
const [taskTags, setTaskTags] = useState([]);
|
||||
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
|
||||
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
|
||||
useState(false);
|
||||
const { showNotification } = useNotification();
|
||||
@@ -135,6 +140,18 @@ export const TrackerModal = ({
|
||||
type: "error",
|
||||
});
|
||||
} else {
|
||||
for (let i = 0; i < taskTags.length; i++) {
|
||||
apiRequest("/mark/attach", {
|
||||
method: "POST",
|
||||
data: {
|
||||
mark_id: taskTags[i].id,
|
||||
entity_type: 2,
|
||||
entity_id: res.id,
|
||||
},
|
||||
}).then(() => {
|
||||
setTaskTags([]);
|
||||
});
|
||||
}
|
||||
if (selectedExecutorTask.user_id) {
|
||||
apiRequest("/task/update-task", {
|
||||
method: "PUT",
|
||||
@@ -306,6 +323,18 @@ export const TrackerModal = ({
|
||||
}
|
||||
}, [active]);
|
||||
|
||||
useEffect(() => {
|
||||
let tagIds = taskTags.map((tag) => tag.id);
|
||||
if (projectMarks) {
|
||||
setCorrectProjectTags(
|
||||
projectMarks.reduce((acc, cur) => {
|
||||
if (!tagIds.includes(cur.id)) acc.push(cur);
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
}
|
||||
}, [taskTags, projectMarks]);
|
||||
|
||||
return (
|
||||
<ModalLayout
|
||||
active={active}
|
||||
@@ -404,11 +433,22 @@ export const TrackerModal = ({
|
||||
<>
|
||||
<div className="title-project">
|
||||
<div className="createTaskHead">
|
||||
<span>Этап</span>
|
||||
<div className="createTaskHead__selectColumn">
|
||||
<span>Backlog</span>
|
||||
<img src={arrowCreateTask} alt="arrow" />
|
||||
<div className="createTaskBody__right__owner">
|
||||
<p>Создатель : {profileInfo?.fio}</p>
|
||||
<img
|
||||
src={
|
||||
profileInfo.photo
|
||||
? urlForLocal(profileInfo.photo)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
{/*<span>Этап</span>*/}
|
||||
{/*<div className="createTaskHead__selectColumn">*/}
|
||||
{/* <span>Backlog</span>*/}
|
||||
{/* <img src={arrowCreateTask} alt="arrow" />*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
<div className="createTaskBody">
|
||||
<div className="createTaskBody__left">
|
||||
@@ -445,16 +485,73 @@ export const TrackerModal = ({
|
||||
/>
|
||||
</div>
|
||||
<div className="createTaskBody__right">
|
||||
<div className="createTaskBody__right__owner">
|
||||
<p>Создатель : {profileInfo?.fio}</p>
|
||||
<img
|
||||
src={
|
||||
profileInfo.photo
|
||||
? urlForLocal(profileInfo.photo)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
<div className="createTaskBody__right__tags">
|
||||
<div className="tags__selected">
|
||||
<div className="tags__selected__items">
|
||||
{taskTags.map((tag) => {
|
||||
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
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div
|
||||
className="tags__selected__name"
|
||||
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
|
||||
>
|
||||
Выберете тег
|
||||
<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)}
|
||||
/>
|
||||
{correctProjectTags.map((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>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
onClick={() =>
|
||||
|
||||
@@ -357,7 +357,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 9.5px;
|
||||
margin-bottom: 30px;
|
||||
p {
|
||||
color: #2D4A17;
|
||||
font-size: 14px;
|
||||
@@ -371,6 +370,127 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.tags {
|
||||
&__selected {
|
||||
width: 393px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 17.5px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
|
||||
&__name {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e4e4;
|
||||
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.arrow--open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
max-width: 393px;
|
||||
|
||||
.selectedTag {
|
||||
display: flex;
|
||||
padding: 3px 5px 3px 8px;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
|
||||
p {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
line-height: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__dropDown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e4e4;
|
||||
top: 90%;
|
||||
z-index: 101;
|
||||
padding: 20px 10px 10px;
|
||||
background: white;
|
||||
row-gap: 8px;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tag__item {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.noTags {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select__executor {
|
||||
background: #F1F1F1;
|
||||
width: 393px;
|
||||
|
||||
@@ -469,6 +469,7 @@ export const ProjectTracker = () => {
|
||||
selectedTab={selectedTab}
|
||||
priorityTask={priorityTask}
|
||||
projectUsers={projectBoard.projectUsers}
|
||||
projectMarks={projectBoard.mark}
|
||||
/>
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
|
||||
Reference in New Issue
Block a user