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

select priority column, project persons avatars, copy links on button, executor on task

Browse Source
This commit is contained in:
Николай Полтщук 2023-06-27 17:12:58 +03:00
parent 30353e45e5
commit e24a08210a
7 changed files with 315 additions and 200 deletions
Show Stats 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]); }, [members]);
function copyProjectLink () {
navigator.clipboard.writeText(`https://itguild.info/tracker/project/${projectId}`)
}
return ( return (
<div <div
className={active ? "modal-tiket active" : "modal-tiket"} className={active ? "modal-tiket active" : "modal-tiket"}
@ -614,7 +618,7 @@ export const ModalTiсket = ({
</div> </div>
<div> <div>
<img src={link}></img> <img src={link}></img>
<p>ссылка на проект</p> <p onClick={copyProjectLink}>ссылка на проект</p>
</div> </div>
<div onClick={deleteTask}> <div onClick={deleteTask}>
<img src={archive}></img> <img src={archive}></img>

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

@ -210,6 +210,10 @@ export const TicketFullScreen = () => {
dispatch(setToggleTab(index)); dispatch(setToggleTab(index));
}; };
function copyTicketLink () {
navigator.clipboard.writeText(`https://itguild.info/tracker/task/${taskInfo.id}`)
}
return ( return (
<section className="ticket-full-screen"> <section className="ticket-full-screen">
<ProfileHeader /> <ProfileHeader />
@ -510,7 +514,7 @@ export const TicketFullScreen = () => {
</div> </div>
<div> <div>
<img src={link} alt="link"></img> <img src={link} alt="link"></img>
<p>ссылка на проект</p> <p onClick={copyTicketLink}>ссылка на задачу</p>
</div> </div>
<div> <div>
<img src={archive2} alt="arch"></img> <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 { apiRequest } from "@api/request";
import BaseButton from "@components/Common/BaseButton/BaseButton"; import BaseButton from "@components/Common/BaseButton/BaseButton";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrowDown from "assets/icons/arrows/selectArrow.png"; import arrowDown from "assets/icons/arrows/selectArrow.png";
@ -50,6 +51,8 @@ export const TrackerModal = ({
const [workers, setWorkers] = useState([]); const [workers, setWorkers] = useState([]);
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false); const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
const [selectedWorker, setSelectedWorker] = useState(null); const [selectedWorker, setSelectedWorker] = useState(null);
const [selectColumnPriority, setSelectColumnPriority] = useState('Выберите приоритет колонки')
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = useState(false)
function createTab() { function createTab() {
if (!valueColumn) { if (!valueColumn) {
@ -211,202 +214,211 @@ export const TrackerModal = ({
}, [active]); }, [active]);
return ( return (
<div <ModalLayout
className={active ? "modal-add active" : "modal-add"} active={active}
onClick={() => { setActive={setActive}
setActive(false); // onClick={() => {
setSelectWorkersOpen(false); // setSelectWorkersOpen(false);
}} // }}
> >
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}> {modalType === "addWorker" && (
{modalType === "addWorker" && ( <div>
<div> <div className="title-project">
<div className="title-project"> <h4>Добавьте участника</h4>
<h4>Добавьте участника</h4> {/*<div className="input-container">*/}
{/*<div className="input-container">*/} {/* <input*/}
{/* <input*/} {/* className="name-project"*/}
{/* className="name-project"*/} {/* value={emailWorker}*/}
{/* value={emailWorker}*/} {/* onChange={(e) => setEmailWorker(e.target.value)}*/}
{/* onChange={(e) => setEmailWorker(e.target.value)}*/} {/* />*/}
{/* />*/} {/*</div>*/}
{/*</div>*/} <div
<div className={
className={ selectWorkersOpen ? "select__worker open" : "select__worker"
selectWorkersOpen ? "select__worker open" : "select__worker" }
} onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
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()}
> >
Добавить <p>
</BaseButton> {selectedWorker
</div> ? selectedWorker.employee.fio
)} : "Выберите пользователя"}
{modalType === "createColumn" && ( </p>
<div> <img className="arrow" src={arrowDown} alt="arrow" />
<div className="title-project"> {Boolean(selectWorkersOpen) && (
<h4>Введите название колонки</h4> <div className="select__worker__dropDown">
<div className="input-container"> {Boolean(workers.length) ? (
<input workers.map((worker) => {
className="name-project" if (worker === selectedWorker) {
value={valueColumn} return;
onChange={(e) => setValueColumn(e.target.value)} }
/> return (
</div> <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={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> </BaseButton>
</div> </div>
)} </div>
{modalType === "editColumn" && ( )}
<div> {modalType === "addSubtask" && (
<div className="title-project"> <div>
<h4>Введите новое название</h4> <div className="title-project subtask">
<div className="input-container"> <h4>
<input Вы добавляете подзадачу{" "}
className="name-project" <p>в колонку(id) задачи "{defautlInput}"</p>
value={columnName} </h4>
onChange={(e) => dispatch(setColumnName(e.target.value))} <p className="title-project__decs">Введите текст</p>
/> <div>
</div> <textarea className="title-project__textarea"></textarea>
<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> </div>
<BaseButton styles={"button-add"} onClick={changeColumnParams}>
Сохранить
</BaseButton>
</div> </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> <span className="exit" onClick={() => setActive(false)}></span>
</div> </ModalLayout>
</div>
); );
}; };

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

@ -32,6 +32,44 @@
flex-direction: column; flex-direction: column;
margin: 0 0 15px 0; 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 { .input-container {
width: 287px; width: 287px;
height: 35px; 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 ( return (
<div className="project" key={index}> <div className="project" key={index}>
<Link to={`/tracker/project/${project.id}`}>{project.name}</Link> <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
@ -90,7 +94,7 @@ export const ProjectTiket = ({ project, index }) => {
</div> </div>
<div> <div>
<img src={link}></img> <img src={link}></img>
<p>ссылка на проект</p> <p onClick={copyProjectLink}>ссылка на проект</p>
</div> </div>
<div> <div>
<img src={archiveSet}></img> <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 project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg"; import tasks from "assets/icons/trackerTasks.svg";
import accept from "assets/images/accept.png"; import accept from "assets/images/accept.png";
import avatarMok from "assets/images/avatarMok.png";
export const ProjectTracker = () => { export const ProjectTracker = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -323,6 +324,13 @@ export const ProjectTracker = () => {
<span className="countPersons"> <span className="countPersons">
{projectBoard.projectUsers?.length} {projectBoard.projectUsers?.length}
</span> </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 <span
className="addPerson" className="addPerson"
onClick={() => { onClick={() => {
@ -515,6 +523,17 @@ export const ProjectTracker = () => {
}} }}
className="tasks__board__item__description" className="tasks__board__item__description"
></p> ></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">
<div className="tasks__board__item__info__more"> <div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" /> <img src={commentsBoard} alt="commentsImg" />

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

@ -255,14 +255,27 @@
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
img { .projectPersons {
display: flex;
position: relative; position: relative;
width: 32px; left: -10px;
height: 32px; img {
} position: relative;
display: flex;
width: 32px;
height: 32px;
}
img:nth-child(2) { img:nth-child(1) {
right: 12px; left: -5px;
}
img:nth-child(2) {
left: -10px;
}
img:nth-child(3) {
left: -15px;
}
} }
span { span {
@ -282,15 +295,14 @@
color: #252c32; color: #252c32;
border: 1px solid #dde2e4; border: 1px solid #dde2e4;
background: white; background: white;
left: -18px; left: -5px;
z-index: 2;
} }
.addPerson { .addPerson {
background: #00c5a8; background: #00c5a8;
color: white; color: white;
font-size: 14px; font-size: 14px;
left: -30px; left: -28px;
z-index: 2; z-index: 2;
} }
@ -586,7 +598,7 @@
} }
&__description { &__description {
margin: 8px 0 15px; margin: 8px 0 4px;
color: #5c6165; color: #5c6165;
font-weight: 400; font-weight: 400;
font-size: 14px; 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 { .openItems {