Merge pull request #109 from apuc/select-priority-column
Select priority column
This commit is contained in:
NikoM1k
GitHub
commit
73bcd58d05
@ -335,7 +335,9 @@ export const ModalTiсket = ({
|
||||
}, [members]);
|
||||
|
||||
function copyProjectLink() {
|
||||
navigator.clipboard.writeText(`https://itguild.info/tracker/project/${projectId}`)
|
||||
navigator.clipboard.writeText(
|
||||
`https://itguild.info/tracker/project/${projectId}`
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -211,7 +211,9 @@ export const TicketFullScreen = () => {
|
||||
};
|
||||
|
||||
function copyTicketLink() {
|
||||
navigator.clipboard.writeText(`https://itguild.info/tracker/task/${taskInfo.id}`)
|
||||
navigator.clipboard.writeText(
|
||||
`https://itguild.info/tracker/task/${taskInfo.id}`
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import { getProfileInfo } from "@redux/outstaffingSlice";
|
||||
import {
|
||||
addPersonToProject,
|
||||
editColumnName,
|
||||
@ -35,12 +36,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);
|
||||
@ -51,8 +54,16 @@ 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 [selectedExecutorTask, setSelectedExecutorTask] = useState(
|
||||
"Выберите исполнителя задачи"
|
||||
);
|
||||
const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
|
||||
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
|
||||
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
|
||||
useState(false);
|
||||
|
||||
function createTab() {
|
||||
if (!valueColumn) {
|
||||
@ -91,13 +102,28 @@ export const TrackerModal = ({
|
||||
column_id: selectedTab,
|
||||
priority: priorityTask,
|
||||
},
|
||||
}).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));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function editProject() {
|
||||
@ -211,6 +237,26 @@ 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 (
|
||||
@ -280,7 +326,7 @@ export const TrackerModal = ({
|
||||
</div>
|
||||
)}
|
||||
{modalType === "createTiketProject" && (
|
||||
<div>
|
||||
<>
|
||||
<div className="title-project">
|
||||
<h4>Введите название и описание задачи</h4>
|
||||
<div className="input-container">
|
||||
@ -299,11 +345,59 @@ export const TrackerModal = ({
|
||||
placeholder="Описание задачи"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)}
|
||||
className={
|
||||
selectExecutorTaskOpen
|
||||
? "select__executor select__executor--open"
|
||||
: "select__executor"
|
||||
}
|
||||
>
|
||||
<div className="selected__executor">
|
||||
{selectedExecutorTask.user_id ? (
|
||||
<>
|
||||
<span>{selectedExecutorTask.user.fio}</span>
|
||||
<img
|
||||
className="avatar"
|
||||
src={urlForLocal(selectedExecutorTask.user.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<span>{selectedExecutorTask}</span>
|
||||
)}
|
||||
</div>
|
||||
<img className="arrow" src={arrowDown} alt="arrow" />
|
||||
{selectExecutorTaskOpen && (
|
||||
<div className="select__executor__dropDown">
|
||||
{correctProjectUsers.length ? (
|
||||
correctProjectUsers.map((person) => {
|
||||
return (
|
||||
<div
|
||||
onClick={() => setSelectedExecutorTask(person)}
|
||||
className="executor"
|
||||
key={person.user_id}
|
||||
>
|
||||
<span>{person.user.fio}</span>
|
||||
<img
|
||||
className="avatar"
|
||||
src={urlForLocal(person.user.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span>Нет пользователей</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton styles={"button-add"} onClick={createTiket}>
|
||||
Создать
|
||||
</BaseButton>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{modalType === "editProject" && (
|
||||
<div>
|
||||
@ -386,19 +480,35 @@ export const TrackerModal = ({
|
||||
/>
|
||||
</div>
|
||||
<h4>Приоритет колонки</h4>
|
||||
<div className='select-priority' onClick={() => setSelectColumnPriorityOpen(!selectColumnPriorityOpen)}>
|
||||
<div
|
||||
className={
|
||||
selectColumnPriorityOpen
|
||||
? "select-priority select-priority--open"
|
||||
: "select-priority"
|
||||
}
|
||||
onClick={() =>
|
||||
setSelectColumnPriorityOpen(!selectColumnPriorityOpen)
|
||||
}
|
||||
>
|
||||
<span>{selectColumnPriority}</span>
|
||||
<img src={arrowDown} alt='arrow' />
|
||||
{selectColumnPriorityOpen &&
|
||||
<div className='select-priority__dropDown'>
|
||||
<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>
|
||||
return (
|
||||
<span
|
||||
key={column.id}
|
||||
onClick={() => {
|
||||
setSelectColumnPriority(index + 1);
|
||||
dispatch(setColumnPriority(index + 1));
|
||||
}}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
{/*<div className="input-container">*/}
|
||||
{/* <input*/}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -53,7 +53,9 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
}
|
||||
|
||||
function copyProjectLink() {
|
||||
navigator.clipboard.writeText(`https://itguild.info/tracker/project/${project.id}`)
|
||||
navigator.clipboard.writeText(
|
||||
`https://itguild.info/tracker/project/${project.id}`
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -291,6 +291,7 @@ export const ProjectTracker = () => {
|
||||
setActive={setModalAdd}
|
||||
selectedTab={selectedTab}
|
||||
priorityTask={priorityTask}
|
||||
projectUsers={projectBoard.projectUsers}
|
||||
/>
|
||||
|
||||
{loader && <Loader style="green" />}
|
||||
@ -324,12 +325,26 @@ export const ProjectTracker = () => {
|
||||
<span className="countPersons">
|
||||
{projectBoard.projectUsers?.length}
|
||||
</span>
|
||||
<div className='projectPersons'>
|
||||
<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' />
|
||||
})
|
||||
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"
|
||||
@ -524,15 +539,21 @@ 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 &&
|
||||
<span>
|
||||
{task.executor?.fio
|
||||
? task.executor?.fio
|
||||
: "Исполнитель не назначен"}
|
||||
</span>
|
||||
{task.executor?.avatar && (
|
||||
<img
|
||||
src={
|
||||
task.executor?.avatar ? urlForLocal(task.executor?.avatar) : avatarMok
|
||||
task.executor?.avatar
|
||||
? urlForLocal(task.executor?.avatar)
|
||||
: avatarMok
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<div className="tasks__board__item__info">
|
||||
<div className="tasks__board__item__info__more">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user