apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #108 from apuc/select-priority-column

Browse Source 
select priority column, project persons avatars, copy links on button…
This commit is contained in:
NikoM1k
2023-06-27 17:16:47 +03:00
committed by GitHub
parent 30353e45e5 e24a08210a
commit 6ec8be4ecd
7 changed files with 315 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@@ -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>

6
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@@ -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>

386
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
View File

@@ -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,202 +214,211 @@ 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">
<h4>Добавьте участника</h4>
{/*<div className="input-container">*/}
{/* <input*/}
{/* className="name-project"*/}
{/* value={emailWorker}*/}
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
{/* />*/}
{/*</div>*/}
<div
className={
selectWorkersOpen ? "select__worker open" : "select__worker"
}
onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
>
<p>
{selectedWorker
? selectedWorker.employee.fio
: "Выберите пользователя"}
</p>
<img className="arrow" src={arrowDown} alt="arrow" />
{Boolean(selectWorkersOpen) && (
<div className="select__worker__dropDown">
{Boolean(workers.length) ? (
workers.map((worker) => {
if (worker === selectedWorker) {
return;
}
return (
<div
className="worker"
key={worker.id}
onClick={() => {
setSelectedWorker(worker);
}}
>
<p>{worker.employee.fio}</p>
<img
src={urlForLocal(worker.employee.avatar)}
alt="avatar"
/>
</div>
);
})
) : (
<div>Нет пользователей</div>
)}
</div>
)}
</div>
</div>
<BaseButton styles={"button-add"} onClick={addUserToProject}>
Добавить
</BaseButton>
</div>
)}
{modalType === "createTiketProject" && (
<div>
<div className="title-project">
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
placeholder="Название задачи"
/>
</div>
<div className="input-container">
<input
className="name-project"
value={descriptionTicket}
onChange={(e) => setDescriptionTicket(e.target.value)}
placeholder="Описание задачи"
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div>
)}
{modalType === "editProject" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
<input
className="name-project"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={editProject}>
Сохранить
</BaseButton>
</div>
)}
{modalType === "createProject" && (
<div>
<div className="title-project">
<h4>{titleProject}</h4>
<div className="input-container">
<input
className="name-project"
value={nameProject}
onChange={(e) => setNameProject(e.target.value)}
/>
</div>
<BaseButton styles={"button-add"} onClick={createProject}>
Создать
</BaseButton>
</div>
</div>
)}
{modalType === "addSubtask" && (
<div>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу{" "}
<p>в колонку(id) задачи "{defautlInput}"</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<BaseButton
styles={"button-add"}
onClick={(e) => e.preventDefault()}
{modalType === "addWorker" && (
<div>
<div className="title-project">
<h4>Добавьте участника</h4>
{/*<div className="input-container">*/}
{/* <input*/}
{/* className="name-project"*/}
{/* value={emailWorker}*/}
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
{/* />*/}
{/*</div>*/}
<div
className={
selectWorkersOpen ? "select__worker open" : "select__worker"
}
onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
>
Добавить
</BaseButton>
</div>
)}
{modalType === "createColumn" && (
<div>
<div className="title-project">
<h4>Введите название колонки</h4>
<div className="input-container">
<input
className="name-project"
value={valueColumn}
onChange={(e) => setValueColumn(e.target.value)}
/>
</div>
<p>
{selectedWorker
? selectedWorker.employee.fio
: "Выберите пользователя"}
</p>
<img className="arrow" src={arrowDown} alt="arrow" />
{Boolean(selectWorkersOpen) && (
<div className="select__worker__dropDown">
{Boolean(workers.length) ? (
workers.map((worker) => {
if (worker === selectedWorker) {
return;
}
return (
<div
className="worker"
key={worker.id}
onClick={() => {
setSelectedWorker(worker);
}}
>
<p>{worker.employee.fio}</p>
<img
src={urlForLocal(worker.employee.avatar)}
alt="avatar"
/>
</div>
);
})
) : (
<div>Нет пользователей</div>
)}
</div>
)}
</div>
<BaseButton styles={"button-add"} onClick={createTab}>
</div>
<BaseButton styles={"button-add"} onClick={addUserToProject}>
Добавить
</BaseButton>
</div>
)}
{modalType === "createTiketProject" && (
<div>
<div className="title-project">
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
placeholder="Название задачи"
/>
</div>
<div className="input-container">
<input
className="name-project"
value={descriptionTicket}
onChange={(e) => setDescriptionTicket(e.target.value)}
placeholder="Описание задачи"
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div>
)}
{modalType === "editProject" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
<input
className="name-project"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={editProject}>
Сохранить
</BaseButton>
</div>
)}
{modalType === "createProject" && (
<div>
<div className="title-project">
<h4>{titleProject}</h4>
<div className="input-container">
<input
className="name-project"
value={nameProject}
onChange={(e) => setNameProject(e.target.value)}
/>
</div>
<BaseButton styles={"button-add"} onClick={createProject}>
Создать
</BaseButton>
</div>
)}
{modalType === "editColumn" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
<input
className="name-project"
value={columnName}
onChange={(e) => dispatch(setColumnName(e.target.value))}
/>
</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>
</div>
)}
{modalType === "addSubtask" && (
<div>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу{" "}
<p>в колонку(id) задачи "{defautlInput}"</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
<BaseButton styles={"button-add"} onClick={changeColumnParams}>
Сохранить
</BaseButton>
</div>
)}
<BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
Добавить
</BaseButton>
</div>
)}
{modalType === "createColumn" && (
<div>
<div className="title-project">
<h4>Введите название колонки</h4>
<div className="input-container">
<input
className="name-project"
value={valueColumn}
onChange={(e) => setValueColumn(e.target.value)}
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={createTab}>
Создать
</BaseButton>
</div>
)}
{modalType === "editColumn" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
<input
className="name-project"
value={columnName}
onChange={(e) => dispatch(setColumnName(e.target.value))}
/>
</div>
<h4>Приоритет колонки</h4>
<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}>
Сохранить
</BaseButton>
</div>
)}
<span className="exit" onClick={() => setActive(false)}></span>
</div>
</div>
<span className="exit" onClick={() => setActive(false)}></span>
</ModalLayout>
);
};

38
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@@ -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;

6
src/components/ProjectTiket/ProjectTiket.jsx
View File

@@ -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>

19
src/pages/ProjectTracker/ProjectTracker.js
View File

@@ -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" />

54
src/pages/Tracker/tracker.scss
View File

@@ -255,14 +255,27 @@
cursor: pointer;
align-items: center;
img {
.projectPersons {
display: flex;
position: relative;
width: 32px;
height: 32px;
}
left: -10px;
img {
position: relative;
display: flex;
width: 32px;
height: 32px;
}
img:nth-child(2) {
right: 12px;
img:nth-child(1) {
left: -5px;
}
img:nth-child(2) {
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 {