Merge pull request #142 from apuc/out-click-modals

create task with tags
This commit is contained in:
NikoM1k 2023-10-30 01:36:29 +03:00 committed by GitHub
commit 71dfb89b7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 235 additions and 17 deletions

View File

@ -933,7 +933,7 @@ export const ModalTiсket = ({
className="tags__select" className="tags__select"
onClick={() => setSelectTagsOpen(!selectTagsOpen)} onClick={() => setSelectTagsOpen(!selectTagsOpen)}
> >
<span>Выберите тег</span> <span>Выберете тег</span>
<img <img
className={selectTagsOpen ? "open" : ""} className={selectTagsOpen ? "open" : ""}
src={arrowDown} src={arrowDown}

View File

@ -1126,7 +1126,7 @@ export const TicketFullScreen = () => {
className="tags__select" className="tags__select"
onClick={() => setSelectTagsOpen(!selectTagsOpen)} onClick={() => setSelectTagsOpen(!selectTagsOpen)}
> >
<span>Выберите тег</span> <span>Выберете тег</span>
<img <img
className={selectTagsOpen ? "open" : ""} className={selectTagsOpen ? "open" : ""}
src={arrowDown} src={arrowDown}

View File

@ -35,6 +35,7 @@ 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";
@ -51,6 +52,7 @@ export const TrackerModal = ({
projectId, projectId,
priorityTask, priorityTask,
projectUsers, projectUsers,
projectMarks,
}) => { }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
@ -76,6 +78,9 @@ export const TrackerModal = ({
); );
const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false); const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
const [correctProjectUsers, setCorrectProjectUsers] = useState([]); const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
const [correctProjectTags, setCorrectProjectTags] = useState([]);
const [taskTags, setTaskTags] = useState([]);
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
useState(false); useState(false);
const { showNotification } = useNotification(); const { showNotification } = useNotification();
@ -135,6 +140,18 @@ export const TrackerModal = ({
type: "error", type: "error",
}); });
} else { } 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) { if (selectedExecutorTask.user_id) {
apiRequest("/task/update-task", { apiRequest("/task/update-task", {
method: "PUT", method: "PUT",
@ -306,6 +323,18 @@ export const TrackerModal = ({
} }
}, [active]); }, [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 ( return (
<ModalLayout <ModalLayout
active={active} active={active}
@ -404,11 +433,22 @@ export const TrackerModal = ({
<> <>
<div className="title-project"> <div className="title-project">
<div className="createTaskHead"> <div className="createTaskHead">
<span>Этап</span> <div className="createTaskBody__right__owner">
<div className="createTaskHead__selectColumn"> <p>Создатель : {profileInfo?.fio}</p>
<span>Backlog</span> <img
<img src={arrowCreateTask} alt="arrow" /> src={
profileInfo.photo
? urlForLocal(profileInfo.photo)
: avatarMok
}
alt="avatar"
/>
</div> </div>
{/*<span>Этап</span>*/}
{/*<div className="createTaskHead__selectColumn">*/}
{/* <span>Backlog</span>*/}
{/* <img src={arrowCreateTask} alt="arrow" />*/}
{/*</div>*/}
</div> </div>
<div className="createTaskBody"> <div className="createTaskBody">
<div className="createTaskBody__left"> <div className="createTaskBody__left">
@ -445,16 +485,73 @@ export const TrackerModal = ({
/> />
</div> </div>
<div className="createTaskBody__right"> <div className="createTaskBody__right">
<div className="createTaskBody__right__owner"> <div className="createTaskBody__right__tags">
<p>Создатель : {profileInfo?.fio}</p> <div className="tags__selected">
<img <div className="tags__selected__items">
src={ {taskTags.map((tag) => {
profileInfo.photo return (
? urlForLocal(profileInfo.photo) <div
: avatarMok className="selectedTag"
} key={tag.id}
alt="avatar" 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>
<div <div
onClick={() => onClick={() =>

View File

@ -357,7 +357,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: 9.5px; column-gap: 9.5px;
margin-bottom: 30px;
p { p {
color: #2D4A17; color: #2D4A17;
font-size: 14px; 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 { .select__executor {
background: #F1F1F1; background: #F1F1F1;
width: 393px; width: 393px;

View File

@ -469,6 +469,7 @@ export const ProjectTracker = () => {
selectedTab={selectedTab} selectedTab={selectedTab}
priorityTask={priorityTask} priorityTask={priorityTask}
projectUsers={projectBoard.projectUsers} projectUsers={projectBoard.projectUsers}
projectMarks={projectBoard.mark}
/> />
{loader && <Loader style="green" />} {loader && <Loader style="green" />}