From 836d16691afb0db04975e7ece7a14866597261fa Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 27 Jun 2023 17:14:22 +0300 Subject: [PATCH 1/3] 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 | 43 +++++++++++------ src/components/ProjectTiket/ProjectTiket.jsx | 6 ++- src/pages/ProjectTracker/ProjectTracker.js | 48 +++++++++++++------ 5 files changed, 75 insertions(+), 34 deletions(-) diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index cab390d0..c1d86bfe 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -334,8 +334,10 @@ export const ModalTiсket = ({ ); }, [members]); - function copyProjectLink () { - navigator.clipboard.writeText(`https://itguild.info/tracker/project/${projectId}`) + 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 6db4239c..676a0ed0 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -210,8 +210,10 @@ export const TicketFullScreen = () => { dispatch(setToggleTab(index)); }; - function copyTicketLink () { - navigator.clipboard.writeText(`https://itguild.info/tracker/task/${taskInfo.id}`) + function copyTicketLink() { + navigator.clipboard.writeText( + `https://itguild.info/tracker/task/${taskInfo.id}` + ); } return ( diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 4d03f1ea..30b537e6 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -51,8 +51,11 @@ 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) + const [selectColumnPriority, setSelectColumnPriority] = useState( + "Выберите приоритет колонки" + ); + const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = + useState(false); function createTab() { if (!valueColumn) { @@ -386,19 +389,31 @@ export const TrackerModal = ({ />

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

-
setSelectColumnPriorityOpen(!selectColumnPriorityOpen)}> - {selectColumnPriority} - arrow - {selectColumnPriorityOpen && -
- {projectBoard.columns.map((column, index) => { - return { - setSelectColumnPriority(index + 1) - dispatch(setColumnPriority(index + 1)) - }}>{index + 1} - })} -
+
+ setSelectColumnPriorityOpen(!selectColumnPriorityOpen) } + > + {selectColumnPriority} + arrow + {selectColumnPriorityOpen && ( +
+ {projectBoard.columns.map((column, index) => { + return ( + { + setSelectColumnPriority(index + 1); + dispatch(setColumnPriority(index + 1)); + }} + > + {index + 1} + + ); + })} +
+ )}
{/*
*/} {/* { }); } - function copyProjectLink () { - navigator.clipboard.writeText(`https://itguild.info/tracker/project/${project.id}`) + function copyProjectLink() { + navigator.clipboard.writeText( + `https://itguild.info/tracker/project/${project.id}` + ); } return ( diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 393dc043..4ff1b352 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -324,12 +324,26 @@ export const ProjectTracker = () => { {projectBoard.projectUsers?.length} -
+
{projectBoard.projectUsers?.length && - projectBoard.projectUsers.slice(0, projectBoard.length > 3 ? 3 : projectBoard.length).map((person) => { - return avatar - }) - } + projectBoard.projectUsers + .slice( + 0, + projectBoard.length > 3 ? 3 : projectBoard.length + ) + .map((person) => { + return ( + avatar + ); + })}
{ className="tasks__board__item__description" >

- {task.executor?.fio ? task.executor?.fio : 'Исполнитель не назначен'} - {task.executor?.avatar && - avatar - } + + {task.executor?.fio + ? task.executor?.fio + : "Исполнитель не назначен"} + + {task.executor?.avatar && ( + avatar + )}
From 7c622d63a1292f459b5cf85341640ca57a48110b Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 27 Jun 2023 18:35:44 +0300 Subject: [PATCH 2/3] select executor on create task --- .../Tracker/TrackerModal/TrackerModal.jsx | 84 +++++++++++++++++-- .../Tracker/TrackerModal/trackerModal.scss | 79 ++++++++++++++++- src/components/ProjectTiket/ProjectTiket.jsx | 1 + src/pages/ProjectTracker/ProjectTracker.js | 1 + 4 files changed, 155 insertions(+), 10 deletions(-) diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 30b537e6..35d55407 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -16,6 +16,8 @@ import { setProjectBoardFetch, } from "@redux/projectsTrackerSlice"; +import {getProfileInfo} from "@redux/outstaffingSlice"; + import { urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; @@ -35,12 +37,14 @@ export const TrackerModal = ({ titleProject, projectId, priorityTask, + projectUsers }) => { const dispatch = useDispatch(); const projectBoard = useSelector(getProjectBoard); const columnName = useSelector(getColumnName); const columnId = useSelector(getColumnId); const columnPriority = useSelector(getColumnPriority); + const profileInfo = useSelector(getProfileInfo); const modalType = useSelector(getValueModalType); const [projectName, setProjectName] = useState(defautlInput); @@ -54,6 +58,9 @@ export const TrackerModal = ({ const [selectColumnPriority, setSelectColumnPriority] = useState( "Выберите приоритет колонки" ); + const [selectedExecutorTask, setSelectedExecutorTask] = useState('Выберите исполнителя задачи') + const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false) + const [correctProjectUsers, setCorrectProjectUsers] = useState([]); const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = useState(false); @@ -94,13 +101,28 @@ export const TrackerModal = ({ column_id: selectedTab, priority: priorityTask, }, - }).then(() => { - dispatch(setProjectBoardFetch(projectBoard.id)); + }).then((res) => { + if (selectedExecutorTask.user_id) { + apiRequest("/task/update-task", { + method: "PUT", + data: { + task_id: res.id, + executor_id: selectedExecutorTask.user_id, + }, + }).then(() => { + dispatch(setProjectBoardFetch(projectBoard.id)); + setActive(false); + setValueTiket(""); + setDescriptionTicket(""); + setSelectedExecutorTask('Выберите исполнителя задачи') + }) + } else { + setActive(false); + setValueTiket(""); + setDescriptionTicket(""); + dispatch(setProjectBoardFetch(projectBoard.id)); + } }); - - setActive(false); - setValueTiket(""); - setDescriptionTicket(""); } function editProject() { @@ -214,6 +236,22 @@ export const TrackerModal = ({ ); }) : ""; + if ( + localStorage.getItem("role_status") !== "18" && projectUsers && Boolean(!projectUsers.find((item) => item.user_id === profileInfo.id_user)) + ) { + setCorrectProjectUsers( [ + ...projectUsers, + { + user: { + avatar: profileInfo.photo, + fio: profileInfo.fio, + }, + user_id: profileInfo.id_user, + }, + ]); + } else { + setCorrectProjectUsers(projectUsers) + } }, [active]); return ( @@ -283,7 +321,7 @@ export const TrackerModal = ({
)} {modalType === "createTiketProject" && ( -
+ <>

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

@@ -302,11 +340,39 @@ export const TrackerModal = ({ placeholder="Описание задачи" />
+
setSelectExecutorTaskOpen(!selectExecutorTaskOpen)} + className={selectExecutorTaskOpen ? 'select__executor select__executor--open' : 'select__executor'}> +
+ {selectedExecutorTask.user_id ? + <> + {selectedExecutorTask.user.fio} + avatar + + : {selectedExecutorTask} + } +
+ arrow + {selectExecutorTaskOpen && +
+ {correctProjectUsers.length ? + correctProjectUsers.map((person) => { + return
setSelectedExecutorTask(person)} className='executor' key={person.user_id}> + {person.user.fio} + avatar +
+ }) + : Нет пользователей + + } +
+ } +
Создать -
+ )} {modalType === "editProject" && (
@@ -390,7 +456,7 @@ export const TrackerModal = ({

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

setSelectColumnPriorityOpen(!selectColumnPriorityOpen) } diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index c0a776df..f8eb408d 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -48,6 +48,7 @@ img { width: 15px; height: 15px; + transition: all 0.3s ease; } &__dropDown { @@ -68,6 +69,12 @@ } } } + + &--open { + img { + transform: rotate(180deg); + } + } } .input-container { @@ -75,13 +82,83 @@ height: 35px; background: #ffffff; border-radius: 8px; - margin: 12px 0; + margin: 5px 0; input::-webkit-inner-spin-button { -webkit-appearance: none; } } + .select__executor { + width: 287px; + background: white; + border-radius: 8px; + margin: 5px 0; + display: flex; + justify-content: space-between; + align-items: center; + padding: 9.5px 12px; + font-size: 14px; + cursor: pointer; + position: relative; + + .arrow { + transition: all 0.3s ease; + width: 16px; + height: 16px; + } + + &--open { + .arrow { + transform: rotate(180deg); + } + } + + .selected__executor { + display: flex; + align-items: center; + + span { + max-width: 205px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + img { + margin-left: 15px; + } + } + + .avatar { + width: 20px; + height: 20px; + } + + &__dropDown { + position: absolute; + background: white; + border-radius: 8px; + top: 50px; + left: 0; + width: 100%; + padding: 9.5px 12px; + display: flex; + flex-direction: column; + row-gap: 10px; + + .executor { + display: flex; + justify-content: space-between; + + &:hover { + span { + font-weight: 600; + } + } + } + } + } + h4 { font-weight: 500; font-size: 22px; diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx index cefb1f1e..98a28635 100644 --- a/src/components/ProjectTiket/ProjectTiket.jsx +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -25,6 +25,7 @@ export const ProjectTiket = ({ project, index }) => { initListeners(); }, []); + function initListeners() { document.addEventListener("click", closeByClickingOut); } diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 4ff1b352..8982f294 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -291,6 +291,7 @@ export const ProjectTracker = () => { setActive={setModalAdd} selectedTab={selectedTab} priorityTask={priorityTask} + projectUsers={projectBoard.projectUsers} /> {loader && } From bd3e2288edacc133fa8f3ceeb20b2ddc675a3749 Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 27 Jun 2023 18:35:59 +0300 Subject: [PATCH 3/3] select executor on create task --- .../Tracker/TrackerModal/TrackerModal.jsx | 101 +++++++++++------- src/components/ProjectTiket/ProjectTiket.jsx | 1 - 2 files changed, 65 insertions(+), 37 deletions(-) diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 35d55407..99475330 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { getProfileInfo } from "@redux/outstaffingSlice"; import { addPersonToProject, editColumnName, @@ -16,8 +17,6 @@ import { setProjectBoardFetch, } from "@redux/projectsTrackerSlice"; -import {getProfileInfo} from "@redux/outstaffingSlice"; - import { urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; @@ -37,7 +36,7 @@ export const TrackerModal = ({ titleProject, projectId, priorityTask, - projectUsers + projectUsers, }) => { const dispatch = useDispatch(); const projectBoard = useSelector(getProjectBoard); @@ -58,8 +57,10 @@ export const TrackerModal = ({ const [selectColumnPriority, setSelectColumnPriority] = useState( "Выберите приоритет колонки" ); - const [selectedExecutorTask, setSelectedExecutorTask] = useState('Выберите исполнителя задачи') - const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false) + const [selectedExecutorTask, setSelectedExecutorTask] = useState( + "Выберите исполнителя задачи" + ); + const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false); const [correctProjectUsers, setCorrectProjectUsers] = useState([]); const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] = useState(false); @@ -114,8 +115,8 @@ export const TrackerModal = ({ setActive(false); setValueTiket(""); setDescriptionTicket(""); - setSelectedExecutorTask('Выберите исполнителя задачи') - }) + setSelectedExecutorTask("Выберите исполнителя задачи"); + }); } else { setActive(false); setValueTiket(""); @@ -237,9 +238,13 @@ export const TrackerModal = ({ }) : ""; if ( - localStorage.getItem("role_status") !== "18" && projectUsers && Boolean(!projectUsers.find((item) => item.user_id === profileInfo.id_user)) + localStorage.getItem("role_status") !== "18" && + projectUsers && + Boolean( + !projectUsers.find((item) => item.user_id === profileInfo.id_user) + ) ) { - setCorrectProjectUsers( [ + setCorrectProjectUsers([ ...projectUsers, { user: { @@ -250,7 +255,7 @@ export const TrackerModal = ({ }, ]); } else { - setCorrectProjectUsers(projectUsers) + setCorrectProjectUsers(projectUsers); } }, [active]); @@ -341,32 +346,52 @@ export const TrackerModal = ({ />
setSelectExecutorTaskOpen(!selectExecutorTaskOpen)} - className={selectExecutorTaskOpen ? 'select__executor select__executor--open' : 'select__executor'}> -
- {selectedExecutorTask.user_id ? - <> - {selectedExecutorTask.user.fio} - avatar - - : {selectedExecutorTask} - } -
- arrow - {selectExecutorTaskOpen && -
- {correctProjectUsers.length ? - correctProjectUsers.map((person) => { - return
setSelectedExecutorTask(person)} className='executor' key={person.user_id}> - {person.user.fio} - avatar -
- }) - : Нет пользователей - - } -
+ onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)} + className={ + selectExecutorTaskOpen + ? "select__executor select__executor--open" + : "select__executor" } + > +
+ {selectedExecutorTask.user_id ? ( + <> + {selectedExecutorTask.user.fio} + avatar + + ) : ( + {selectedExecutorTask} + )} +
+ arrow + {selectExecutorTaskOpen && ( +
+ {correctProjectUsers.length ? ( + correctProjectUsers.map((person) => { + return ( +
setSelectedExecutorTask(person)} + className="executor" + key={person.user_id} + > + {person.user.fio} + avatar +
+ ); + }) + ) : ( + Нет пользователей + )} +
+ )}
@@ -456,7 +481,11 @@ export const TrackerModal = ({

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

setSelectColumnPriorityOpen(!selectColumnPriorityOpen) } diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx index 98a28635..cefb1f1e 100644 --- a/src/components/ProjectTiket/ProjectTiket.jsx +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -25,7 +25,6 @@ export const ProjectTiket = ({ project, index }) => { initListeners(); }, []); - function initListeners() { document.addEventListener("click", closeByClickingOut); }