select priority column, project persons avatars, copy links on button, executor on task
This commit is contained in:
parent
30353e45e5
commit
e24a08210a
@ -334,6 +334,10 @@ export const ModalTiсket = ({
|
||||
);
|
||||
}, [members]);
|
||||
|
||||
function copyProjectLink () {
|
||||
navigator.clipboard.writeText(`https://itguild.info/tracker/project/${projectId}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={active ? "modal-tiket active" : "modal-tiket"}
|
||||
@ -614,7 +618,7 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
<div>
|
||||
<img src={link}></img>
|
||||
<p>ссылка на проект</p>
|
||||
<p onClick={copyProjectLink}>ссылка на проект</p>
|
||||
</div>
|
||||
<div onClick={deleteTask}>
|
||||
<img src={archive}></img>
|
||||
|
||||
@ -210,6 +210,10 @@ export const TicketFullScreen = () => {
|
||||
dispatch(setToggleTab(index));
|
||||
};
|
||||
|
||||
function copyTicketLink () {
|
||||
navigator.clipboard.writeText(`https://itguild.info/tracker/task/${taskInfo.id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="ticket-full-screen">
|
||||
<ProfileHeader />
|
||||
@ -510,7 +514,7 @@ export const TicketFullScreen = () => {
|
||||
</div>
|
||||
<div>
|
||||
<img src={link} alt="link"></img>
|
||||
<p>ссылка на проект</p>
|
||||
<p onClick={copyTicketLink}>ссылка на задачу</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={archive2} alt="arch"></img>
|
||||
|
||||
@ -21,6 +21,7 @@ import { urlForLocal } from "@utils/helper";
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
||||
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
|
||||
@ -50,6 +51,8 @@ export const TrackerModal = ({
|
||||
const [workers, setWorkers] = useState([]);
|
||||
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
|
||||
const [selectedWorker, setSelectedWorker] = useState(null);
|
||||
const [selectColumnPriority, setSelectColumnPriority] = useState('Выберите приоритет колонки')
|
||||
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = useState(false)
|
||||
|
||||
function createTab() {
|
||||
if (!valueColumn) {
|
||||
@ -211,14 +214,13 @@ export const TrackerModal = ({
|
||||
}, [active]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={active ? "modal-add active" : "modal-add"}
|
||||
onClick={() => {
|
||||
setActive(false);
|
||||
setSelectWorkersOpen(false);
|
||||
}}
|
||||
<ModalLayout
|
||||
active={active}
|
||||
setActive={setActive}
|
||||
// onClick={() => {
|
||||
// setSelectWorkersOpen(false);
|
||||
// }}
|
||||
>
|
||||
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
|
||||
{modalType === "addWorker" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
@ -350,10 +352,7 @@ export const TrackerModal = ({
|
||||
<textarea className="title-project__textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton
|
||||
styles={"button-add"}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
<BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
|
||||
Добавить
|
||||
</BaseButton>
|
||||
</div>
|
||||
@ -387,16 +386,30 @@ export const TrackerModal = ({
|
||||
/>
|
||||
</div>
|
||||
<h4>Приоритет колонки</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
placeholder="Приоритет колонки"
|
||||
type="number"
|
||||
step="1"
|
||||
value={columnPriority}
|
||||
onChange={(e) => dispatch(setColumnPriority(e.target.value))}
|
||||
/>
|
||||
<div className='select-priority' onClick={() => setSelectColumnPriorityOpen(!selectColumnPriorityOpen)}>
|
||||
<span>{selectColumnPriority}</span>
|
||||
<img src={arrowDown} alt='arrow' />
|
||||
{selectColumnPriorityOpen &&
|
||||
<div className='select-priority__dropDown'>
|
||||
{projectBoard.columns.map((column, index) => {
|
||||
return <span key={column.id} onClick={() => {
|
||||
setSelectColumnPriority(index + 1)
|
||||
dispatch(setColumnPriority(index + 1))
|
||||
}}>{index + 1}</span>
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{/*<div className="input-container">*/}
|
||||
{/* <input*/}
|
||||
{/* className="name-project"*/}
|
||||
{/* placeholder="Приоритет колонки"*/}
|
||||
{/* type="number"*/}
|
||||
{/* step="1"*/}
|
||||
{/* value={columnPriority}*/}
|
||||
{/* onChange={(e) => dispatch(setColumnPriority(e.target.value))}*/}
|
||||
{/* />*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
<BaseButton styles={"button-add"} onClick={changeColumnParams}>
|
||||
Сохранить
|
||||
@ -405,8 +418,7 @@ export const TrackerModal = ({
|
||||
)}
|
||||
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
</div>
|
||||
</ModalLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -32,6 +32,44 @@
|
||||
flex-direction: column;
|
||||
margin: 0 0 15px 0;
|
||||
|
||||
.select-priority {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
margin: 12px 0;
|
||||
padding: 10px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&__dropDown {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: white;
|
||||
left: 0;
|
||||
padding: 8px;
|
||||
top: 50px;
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
row-gap: 5px;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
&:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 287px;
|
||||
height: 35px;
|
||||
|
||||
@ -52,6 +52,10 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
});
|
||||
}
|
||||
|
||||
function copyProjectLink () {
|
||||
navigator.clipboard.writeText(`https://itguild.info/tracker/project/${project.id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="project" key={index}>
|
||||
<Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
|
||||
@ -90,7 +94,7 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
</div>
|
||||
<div>
|
||||
<img src={link}></img>
|
||||
<p>ссылка на проект</p>
|
||||
<p onClick={copyProjectLink}>ссылка на проект</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={archiveSet}></img>
|
||||
|
||||
@ -43,6 +43,7 @@ import filesBoard from "assets/icons/filesBoard.svg";
|
||||
import project from "assets/icons/trackerProject.svg";
|
||||
import tasks from "assets/icons/trackerTasks.svg";
|
||||
import accept from "assets/images/accept.png";
|
||||
import avatarMok from "assets/images/avatarMok.png";
|
||||
|
||||
export const ProjectTracker = () => {
|
||||
const dispatch = useDispatch();
|
||||
@ -323,6 +324,13 @@ export const ProjectTracker = () => {
|
||||
<span className="countPersons">
|
||||
{projectBoard.projectUsers?.length}
|
||||
</span>
|
||||
<div className='projectPersons'>
|
||||
{projectBoard.projectUsers?.length &&
|
||||
projectBoard.projectUsers.slice(0, projectBoard.length > 3 ? 3 : projectBoard.length).map((person) => {
|
||||
return <img key={person.user_id} src={person.user?.avatar ? urlForLocal(person.user.avatar) : avatarMok} alt='avatar' />
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<span
|
||||
className="addPerson"
|
||||
onClick={() => {
|
||||
@ -515,6 +523,17 @@ export const ProjectTracker = () => {
|
||||
}}
|
||||
className="tasks__board__item__description"
|
||||
></p>
|
||||
<div className="tasks__board__item__executor">
|
||||
<span>{task.executor?.fio ? task.executor?.fio : 'Исполнитель не назначен'}</span>
|
||||
{task.executor?.avatar &&
|
||||
<img
|
||||
src={
|
||||
task.executor?.avatar ? urlForLocal(task.executor?.avatar) : avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className="tasks__board__item__info">
|
||||
<div className="tasks__board__item__info__more">
|
||||
<img src={commentsBoard} alt="commentsImg" />
|
||||
|
||||
@ -255,14 +255,27 @@
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
|
||||
.projectPersons {
|
||||
display: flex;
|
||||
position: relative;
|
||||
left: -10px;
|
||||
img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
img:nth-child(1) {
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
img:nth-child(2) {
|
||||
right: 12px;
|
||||
left: -10px;
|
||||
}
|
||||
img:nth-child(3) {
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@ -282,15 +295,14 @@
|
||||
color: #252c32;
|
||||
border: 1px solid #dde2e4;
|
||||
background: white;
|
||||
left: -18px;
|
||||
z-index: 2;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.addPerson {
|
||||
background: #00c5a8;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
left: -30px;
|
||||
left: -28px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@ -586,7 +598,7 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 8px 0 15px;
|
||||
margin: 8px 0 4px;
|
||||
color: #5c6165;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -629,6 +641,28 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__executor {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0 15px;
|
||||
padding-right: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
span {
|
||||
max-width: 210px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.openItems {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user