NikoM1k
GitHub
commit
64374a4aff
10
package-lock.json
generated
10
package-lock.json
generated
@ -26,6 +26,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-app-polyfill": "^2.0.0",
|
||||
"react-bootstrap": "^1.6.0",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-datepicker": "^4.10.0",
|
||||
"react-dev-utils": "^12.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
@ -20725,6 +20726,15 @@
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-colorful": {
|
||||
"version": "5.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
|
||||
"integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-datepicker": {
|
||||
"version": "4.10.0",
|
||||
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.10.0.tgz",
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-app-polyfill": "^2.0.0",
|
||||
"react-bootstrap": "^1.6.0",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-datepicker": "^4.10.0",
|
||||
"react-dev-utils": "^12.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
|
||||
@ -30,6 +30,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
|
||||
import archive from "assets/icons/archive.svg";
|
||||
import arrow from "assets/icons/arrows/arrowStart.png";
|
||||
import fullScreen from "assets/icons/arrows/inFullScreen.svg";
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
import calendarIcon from "assets/icons/calendar.svg";
|
||||
import category from "assets/icons/category.svg";
|
||||
import close from "assets/icons/closeProjectPersons.svg";
|
||||
@ -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,16 @@ 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 +469,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 +522,6 @@ export const ModalTiсket = ({
|
||||
<img src={fullScreen}></img>
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
<div className="content__task">
|
||||
{editOpen ? (
|
||||
<input
|
||||
@ -813,6 +856,63 @@ 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;
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
|
||||
import {
|
||||
activeLoader,
|
||||
addNewTagToProject,
|
||||
deletePersonOnProject,
|
||||
deleteTagProject,
|
||||
filterCreatedByMe,
|
||||
filteredExecutorTasks,
|
||||
filteredParticipateTasks,
|
||||
@ -66,6 +69,13 @@ export const ProjectTracker = () => {
|
||||
const [modalActiveTicket, setModalActiveTicket] = useState(false);
|
||||
const [selectedTicket, setSelectedTicket] = useState({});
|
||||
const [personListOpen, setPersonListOpen] = useState(false);
|
||||
const [tags, setTags] = useState({
|
||||
open: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
});
|
||||
const [color, setColor] = useState("#aabbcc");
|
||||
const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
|
||||
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
|
||||
useState(false);
|
||||
const [filteredNoTasks, setFilteredNoTasks] = useState(false);
|
||||
@ -283,6 +293,64 @@ export const ProjectTracker = () => {
|
||||
dispatch(setProjectBoardFetch(projectId.id));
|
||||
}
|
||||
|
||||
function addNewTag() {
|
||||
apiRequest("/mark/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
title: tagInfo.description,
|
||||
slug: tagInfo.name,
|
||||
color: color,
|
||||
status: 1,
|
||||
},
|
||||
}).then((data) => {
|
||||
apiRequest("/mark/attach", {
|
||||
method: "POST",
|
||||
data: {
|
||||
mark_id: data.id,
|
||||
entity_type: 1,
|
||||
entity_id: projectId.id,
|
||||
},
|
||||
}).then((data) => {
|
||||
dispatch(addNewTagToProject(data.mark));
|
||||
setTags((prevState) => ({
|
||||
...prevState,
|
||||
add: false,
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function editTag() {
|
||||
apiRequest("/mark/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
mark_id: tagInfo.editMarkId,
|
||||
title: tagInfo.description,
|
||||
slug: tagInfo.name,
|
||||
color: color,
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(setProjectBoardFetch(projectId.id));
|
||||
setTags((prevState) => ({
|
||||
...prevState,
|
||||
edit: false,
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
function deleteTag(tagId) {
|
||||
apiRequest("/mark/detach", {
|
||||
method: "DELETE",
|
||||
data: {
|
||||
mark_id: tagId,
|
||||
entity_type: 1,
|
||||
entity_id: projectId.id,
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(deleteTagProject(tagId));
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tracker">
|
||||
<ProfileHeader />
|
||||
@ -531,6 +599,157 @@ export const ProjectTracker = () => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="tasks__head__tags">
|
||||
<div
|
||||
className="tags__add"
|
||||
onClick={() => {
|
||||
setTags((prevState) => ({
|
||||
...prevState,
|
||||
open: !tags.open,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<p>Список тегов</p>
|
||||
<span>+</span>
|
||||
</div>
|
||||
{tags.open && (
|
||||
<div className="tags__list">
|
||||
<img
|
||||
src={close}
|
||||
className="close"
|
||||
alt="close"
|
||||
onClick={() => {
|
||||
setTags({
|
||||
open: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
});
|
||||
setTagInfo({
|
||||
description: "",
|
||||
name: "",
|
||||
});
|
||||
setColor("#aabbcc");
|
||||
}}
|
||||
/>
|
||||
{!tags.add && !tags.edit && (
|
||||
<div className="tags__list__created">
|
||||
{projectBoard.mark.map((tag) => {
|
||||
return (
|
||||
<div className="tagItem" key={tag.id}>
|
||||
<p className="tagItem__description">
|
||||
{tag.title}
|
||||
</p>
|
||||
<div className="tagItem__info">
|
||||
<span className="tagItem__info__name">
|
||||
{tag.slug}
|
||||
</span>
|
||||
<span
|
||||
className="tagItem__info__color"
|
||||
style={{ background: tag.color }}
|
||||
/>
|
||||
</div>
|
||||
<div className="tagItem__images">
|
||||
<img
|
||||
src={edit}
|
||||
alt="edit"
|
||||
onClick={() => {
|
||||
setTags((prevState) => ({
|
||||
...prevState,
|
||||
edit: true,
|
||||
}));
|
||||
setTagInfo({
|
||||
description: tag.title,
|
||||
name: tag.slug,
|
||||
editMarkId: tag.id,
|
||||
});
|
||||
setColor(tag.color);
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
onClick={() => deleteTag(tag.id)}
|
||||
className="delete"
|
||||
src={close}
|
||||
alt="delete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div
|
||||
className="addNewTag"
|
||||
onClick={() =>
|
||||
setTags((prevState) => ({
|
||||
...prevState,
|
||||
add: true,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<p>Добавить новый тег</p>
|
||||
<span>+</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(tags.add || tags.edit) && (
|
||||
<div className="formTag">
|
||||
<img
|
||||
src={arrow}
|
||||
className="arrow"
|
||||
alt="arrow"
|
||||
onClick={() => {
|
||||
setTags((prevState) => ({
|
||||
...prevState,
|
||||
add: false,
|
||||
edit: false,
|
||||
}));
|
||||
setTagInfo({
|
||||
description: "",
|
||||
name: "",
|
||||
});
|
||||
setColor("#aabbcc");
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
className="formTag__input"
|
||||
placeholder="Описание метки"
|
||||
maxLength="25"
|
||||
value={tagInfo.description}
|
||||
onChange={(e) =>
|
||||
setTagInfo((prevState) => ({
|
||||
...prevState,
|
||||
description: e.target.value,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<input
|
||||
className="formTag__input"
|
||||
placeholder="Тег"
|
||||
value={tagInfo.name}
|
||||
maxLength="10"
|
||||
onChange={(e) =>
|
||||
setTagInfo((prevState) => ({
|
||||
...prevState,
|
||||
name: e.target.value,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<HexColorPicker color={color} onChange={setColor} />
|
||||
<button
|
||||
onClick={() => {
|
||||
tags.add ? addNewTag() : editTag();
|
||||
}}
|
||||
className={
|
||||
tagInfo.name && tagInfo.description
|
||||
? "formTag__btn"
|
||||
: "formTag__btn disable"
|
||||
}
|
||||
>
|
||||
{tags.add ? "Добавить" : "Изменить"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Link to="/profile/tracker" className="tasks__head__back">
|
||||
<p>Вернуться на проекты</p>
|
||||
<img src={arrow} alt="arrow" />
|
||||
@ -547,6 +766,7 @@ export const ProjectTracker = () => {
|
||||
projectName={projectBoard.name}
|
||||
projectUsers={projectBoard.projectUsers}
|
||||
projectOwnerId={projectBoard.owner_id}
|
||||
projectMarks={projectBoard.mark}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -679,6 +899,21 @@ export const ProjectTracker = () => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{Boolean(task.mark.length) && (
|
||||
<div className="tasks__board__item__tags">
|
||||
{task.mark.map((tag) => {
|
||||
return (
|
||||
<div
|
||||
className="tagItem"
|
||||
key={tag.id}
|
||||
style={{ background: tag.color }}
|
||||
>
|
||||
<p>{tag.slug}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{task.dead_line && (
|
||||
<div className="tasks__board__item__deadLine">
|
||||
<p>Срок исполнения:</p>
|
||||
|
||||
@ -236,7 +236,7 @@
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
max-width: 1280px;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
justify-content: space-between;
|
||||
@ -386,7 +386,7 @@
|
||||
|
||||
.persons__list {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
z-index: 8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
|
||||
@ -746,6 +746,181 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__tags {
|
||||
position: relative;
|
||||
.tags {
|
||||
&__add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
column-gap: 5px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e3e2e2;
|
||||
max-height: 30px;
|
||||
p {
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
}
|
||||
span {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
border-radius: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
background: #cbd9f9;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
}
|
||||
&__list {
|
||||
position: absolute;
|
||||
background: #f8f9fa;
|
||||
z-index: 8;
|
||||
border-radius: 8px;
|
||||
padding: 20px 10px 10px;
|
||||
top: 30px;
|
||||
width: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.close {
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
&__created {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
margin-top: 8px;
|
||||
|
||||
.tagItem {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
border: 1px solid #e3e2e2;
|
||||
border-radius: 8px;
|
||||
|
||||
&__description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
|
||||
&__name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__color {
|
||||
border: 1px solid #e3e2e2;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__images {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
display: flex;
|
||||
column-gap: 3px;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addNewTag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
background: #52b709;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.formTag {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 8px;
|
||||
row-gap: 8px;
|
||||
.arrow {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&__input {
|
||||
outline: none;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e3e2e2;
|
||||
font-size: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: #6f6f6f;
|
||||
color: whitesmoke;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.disable {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
@ -842,7 +1017,6 @@
|
||||
|
||||
&__item {
|
||||
width: 328px;
|
||||
max-height: 250px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
|
||||
@ -990,6 +1164,21 @@
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 6px;
|
||||
row-gap: 3px;
|
||||
margin: 5px 0 10px;
|
||||
|
||||
.tagItem {
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.openItems {
|
||||
|
||||
@ -42,9 +42,17 @@ export const projectsTrackerSlice = createSlice({
|
||||
(person) => person.user_id !== action.payload
|
||||
);
|
||||
},
|
||||
deleteTagProject: (state, action) => {
|
||||
state.projectBoard.mark = state.projectBoard.mark.filter(
|
||||
(tag) => tag.id !== action.payload
|
||||
);
|
||||
},
|
||||
addPersonToProject: (state, action) => {
|
||||
state.projectBoard.projectUsers.push(action.payload);
|
||||
},
|
||||
addNewTagToProject: (state, action) => {
|
||||
state.projectBoard.mark.push(action.payload);
|
||||
},
|
||||
activeLoader: (state) => {
|
||||
state.boardLoader = true;
|
||||
},
|
||||
@ -178,7 +186,9 @@ export const {
|
||||
setColumnId,
|
||||
setColumnPriority,
|
||||
deletePersonOnProject,
|
||||
deleteTagProject,
|
||||
addPersonToProject,
|
||||
addNewTagToProject,
|
||||
filterCreatedByMe,
|
||||
filteredParticipateTasks,
|
||||
filteredExecutorTasks,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user