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

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

Browse Source 
Select priority column
This commit is contained in:
NikoM1k
2023-06-27 18:36:42 +03:00
committed by GitHub
parent 6ec8be4ecd bd3e2288ed
commit 73bcd58d05
6 changed files with 257 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -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*/}

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

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

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

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

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

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