From e24a08210aede84ff33415a1bdf525e25540355b Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 27 Jun 2023 17:12:58 +0300 Subject: [PATCH] select priority column, project persons avatars, copy links on button, executor on task --- .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 6 +- .../TicketFullScreen/TicketFullScreen.jsx | 6 +- .../Tracker/TrackerModal/TrackerModal.jsx | 386 +++++++++--------- .../Tracker/TrackerModal/trackerModal.scss | 38 ++ src/components/ProjectTiket/ProjectTiket.jsx | 6 +- src/pages/ProjectTracker/ProjectTracker.js | 19 + src/pages/Tracker/tracker.scss | 54 ++- 7 files changed, 315 insertions(+), 200 deletions(-) diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 638cf351..cab390d0 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -334,6 +334,10 @@ export const ModalTiсket = ({ ); }, [members]); + function copyProjectLink () { + navigator.clipboard.writeText(`https://itguild.info/tracker/project/${projectId}`) + } + return (
-

ссылка на проект

+

ссылка на проект

diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 3f2fcf59..6db4239c 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -210,6 +210,10 @@ export const TicketFullScreen = () => { dispatch(setToggleTab(index)); }; + function copyTicketLink () { + navigator.clipboard.writeText(`https://itguild.info/tracker/task/${taskInfo.id}`) + } + return (
@@ -510,7 +514,7 @@ export const TicketFullScreen = () => {
link -

ссылка на проект

+

ссылка на задачу

arch diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index c77c53fe..4d03f1ea 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -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 ( -
{ - setActive(false); - setSelectWorkersOpen(false); - }} + { + // setSelectWorkersOpen(false); + // }} > -
e.stopPropagation()}> - {modalType === "addWorker" && ( -
-
-

Добавьте участника

- {/*
*/} - {/* setEmailWorker(e.target.value)}*/} - {/* />*/} - {/*
*/} -
setSelectWorkersOpen(!selectWorkersOpen)} - > -

- {selectedWorker - ? selectedWorker.employee.fio - : "Выберите пользователя"} -

- arrow - {Boolean(selectWorkersOpen) && ( -
- {Boolean(workers.length) ? ( - workers.map((worker) => { - if (worker === selectedWorker) { - return; - } - return ( -
{ - setSelectedWorker(worker); - }} - > -

{worker.employee.fio}

- avatar -
- ); - }) - ) : ( -
Нет пользователей
- )} -
- )} -
-
- - Добавить - -
- )} - {modalType === "createTiketProject" && ( -
-
-

Введите название и описание задачи

-
- setValueTiket(e.target.value)} - placeholder="Название задачи" - /> -
-
- setDescriptionTicket(e.target.value)} - placeholder="Описание задачи" - /> -
-
- - Создать - -
- )} - {modalType === "editProject" && ( -
-
-

Введите новое название

-
- setProjectName(e.target.value)} - /> -
-
- - - Сохранить - -
- )} - {modalType === "createProject" && ( -
-
-

{titleProject}

-
- setNameProject(e.target.value)} - /> -
- - Создать - -
-
- )} - {modalType === "addSubtask" && ( -
-
-

- Вы добавляете подзадачу{" "} -

в колонку(id) задачи "{defautlInput}"

-

-

Введите текст

-
- -
-
- e.preventDefault()} + {modalType === "addWorker" && ( +
+
+

Добавьте участника

+ {/*
*/} + {/* setEmailWorker(e.target.value)}*/} + {/* />*/} + {/*
*/} +
setSelectWorkersOpen(!selectWorkersOpen)} > - Добавить - -
- )} - {modalType === "createColumn" && ( -
-
-

Введите название колонки

-
- setValueColumn(e.target.value)} - /> -
+

+ {selectedWorker + ? selectedWorker.employee.fio + : "Выберите пользователя"} +

+ arrow + {Boolean(selectWorkersOpen) && ( +
+ {Boolean(workers.length) ? ( + workers.map((worker) => { + if (worker === selectedWorker) { + return; + } + return ( +
{ + setSelectedWorker(worker); + }} + > +

{worker.employee.fio}

+ avatar +
+ ); + }) + ) : ( +
Нет пользователей
+ )} +
+ )}
- +
+ + Добавить + +
+ )} + {modalType === "createTiketProject" && ( +
+
+

Введите название и описание задачи

+
+ setValueTiket(e.target.value)} + placeholder="Название задачи" + /> +
+
+ setDescriptionTicket(e.target.value)} + placeholder="Описание задачи" + /> +
+
+ + Создать + +
+ )} + {modalType === "editProject" && ( +
+
+

Введите новое название

+
+ setProjectName(e.target.value)} + /> +
+
+ + + Сохранить + +
+ )} + {modalType === "createProject" && ( +
+
+

{titleProject}

+
+ setNameProject(e.target.value)} + /> +
+ Создать
- )} - {modalType === "editColumn" && ( -
-
-

Введите новое название

-
- dispatch(setColumnName(e.target.value))} - /> -
-

Приоритет колонки

-
- dispatch(setColumnPriority(e.target.value))} - /> -
+
+ )} + {modalType === "addSubtask" && ( +
+
+

+ Вы добавляете подзадачу{" "} +

в колонку(id) задачи "{defautlInput}"

+

+

Введите текст

+
+
- - Сохранить -
- )} + e.preventDefault()}> + Добавить + +
+ )} + {modalType === "createColumn" && ( +
+
+

Введите название колонки

+
+ setValueColumn(e.target.value)} + /> +
+
+ + Создать + +
+ )} + {modalType === "editColumn" && ( +
+
+

Введите новое название

+
+ dispatch(setColumnName(e.target.value))} + /> +
+

Приоритет колонки

+
setSelectColumnPriorityOpen(!selectColumnPriorityOpen)}> + {selectColumnPriority} + arrow + {selectColumnPriorityOpen && +
+ {projectBoard.columns.map((column, index) => { + return { + setSelectColumnPriority(index + 1) + dispatch(setColumnPriority(index + 1)) + }}>{index + 1} + })} +
+ } +
+ {/*
*/} + {/* dispatch(setColumnPriority(e.target.value))}*/} + {/* />*/} + {/*
*/} +
+ + Сохранить + +
+ )} - setActive(false)}> -
-
+ setActive(false)}> + ); }; diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index 0181b6ef..c0a776df 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -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; diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx index 9eda3bc3..95f88588 100644 --- a/src/components/ProjectTiket/ProjectTiket.jsx +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -52,6 +52,10 @@ export const ProjectTiket = ({ project, index }) => { }); } + function copyProjectLink () { + navigator.clipboard.writeText(`https://itguild.info/tracker/project/${project.id}`) + } + return (
{project.name} @@ -90,7 +94,7 @@ export const ProjectTiket = ({ project, index }) => {
-

ссылка на проект

+

ссылка на проект

diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 83659c0d..393dc043 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -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 = () => { {projectBoard.projectUsers?.length} +
+ {projectBoard.projectUsers?.length && + projectBoard.projectUsers.slice(0, projectBoard.length > 3 ? 3 : projectBoard.length).map((person) => { + return avatar + }) + } +
{ @@ -515,6 +523,17 @@ export const ProjectTracker = () => { }} className="tasks__board__item__description" >

+
+ {task.executor?.fio ? task.executor?.fio : 'Исполнитель не назначен'} + {task.executor?.avatar && + avatar + } +
commentsImg diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 37d72e4a..48764b45 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -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 {