Merge pull request #106 from apuc/fix-modal-and-effects
Fixed modals conflict
This commit is contained in:
MaxOvs19
GitHub
commit
0f63b597f2
@ -352,7 +352,7 @@
|
|||||||
outline: none;
|
outline: none;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
border-radius: 44px;
|
border-radius: 44px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -259,7 +259,7 @@ export const TicketFullScreen = () => {
|
|||||||
<div className="tracker__tabs__content content-tabs">
|
<div className="tracker__tabs__content content-tabs">
|
||||||
<div className="tasks__head">
|
<div className="tasks__head">
|
||||||
<div className="tasks__head__wrapper">
|
<div className="tasks__head__wrapper">
|
||||||
<h4>Проект : {projectBoard.name}</h4>
|
<h5>Проект : {projectBoard.name}</h5>
|
||||||
|
|
||||||
<TrackerModal
|
<TrackerModal
|
||||||
active={modalAddWorker}
|
active={modalAddWorker}
|
||||||
|
|||||||
@ -21,7 +21,6 @@ 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";
|
||||||
|
|
||||||
@ -212,197 +211,202 @@ export const TrackerModal = ({
|
|||||||
}, [active]);
|
}, [active]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalLayout
|
<div
|
||||||
active={active}
|
className={active ? "modal-add active" : "modal-add"}
|
||||||
setActive={setActive}
|
onClick={() => {
|
||||||
// onClick={() => {
|
setActive(false);
|
||||||
// setSelectWorkersOpen(false);
|
setSelectWorkersOpen(false);
|
||||||
// }}
|
}}
|
||||||
>
|
>
|
||||||
{modalType === "addWorker" && (
|
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
|
||||||
<div>
|
{modalType === "addWorker" && (
|
||||||
<div className="title-project">
|
<div>
|
||||||
<h4>Добавьте участника</h4>
|
<div className="title-project">
|
||||||
{/*<div className="input-container">*/}
|
<h4>Добавьте участника</h4>
|
||||||
{/* <input*/}
|
{/*<div className="input-container">*/}
|
||||||
{/* className="name-project"*/}
|
{/* <input*/}
|
||||||
{/* value={emailWorker}*/}
|
{/* className="name-project"*/}
|
||||||
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
|
{/* value={emailWorker}*/}
|
||||||
{/* />*/}
|
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
|
||||||
{/*</div>*/}
|
{/* />*/}
|
||||||
<div
|
{/*</div>*/}
|
||||||
className={
|
<div
|
||||||
selectWorkersOpen ? "select__worker open" : "select__worker"
|
className={
|
||||||
}
|
selectWorkersOpen ? "select__worker open" : "select__worker"
|
||||||
onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
|
}
|
||||||
>
|
onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
|
||||||
<p>
|
>
|
||||||
{selectedWorker
|
<p>
|
||||||
? selectedWorker.employee.fio
|
{selectedWorker
|
||||||
: "Выберите пользователя"}
|
? selectedWorker.employee.fio
|
||||||
</p>
|
: "Выберите пользователя"}
|
||||||
<img className="arrow" src={arrowDown} alt="arrow" />
|
</p>
|
||||||
{Boolean(selectWorkersOpen) && (
|
<img className="arrow" src={arrowDown} alt="arrow" />
|
||||||
<div className="select__worker__dropDown">
|
{Boolean(selectWorkersOpen) && (
|
||||||
{Boolean(workers.length) ? (
|
<div className="select__worker__dropDown">
|
||||||
workers.map((worker) => {
|
{Boolean(workers.length) ? (
|
||||||
if (worker === selectedWorker) {
|
workers.map((worker) => {
|
||||||
return;
|
if (worker === selectedWorker) {
|
||||||
}
|
return;
|
||||||
return (
|
}
|
||||||
<div
|
return (
|
||||||
className="worker"
|
<div
|
||||||
key={worker.id}
|
className="worker"
|
||||||
onClick={() => {
|
key={worker.id}
|
||||||
setSelectedWorker(worker);
|
onClick={() => {
|
||||||
}}
|
setSelectedWorker(worker);
|
||||||
>
|
}}
|
||||||
<p>{worker.employee.fio}</p>
|
>
|
||||||
<img
|
<p>{worker.employee.fio}</p>
|
||||||
src={urlForLocal(worker.employee.avatar)}
|
<img
|
||||||
alt="avatar"
|
src={urlForLocal(worker.employee.avatar)}
|
||||||
/>
|
alt="avatar"
|
||||||
</div>
|
/>
|
||||||
);
|
</div>
|
||||||
})
|
);
|
||||||
) : (
|
})
|
||||||
<div>Нет пользователей</div>
|
) : (
|
||||||
)}
|
<div>Нет пользователей</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<BaseButton styles={"button-add"} onClick={addUserToProject}>
|
||||||
|
Добавить
|
||||||
|
</BaseButton>
|
||||||
</div>
|
</div>
|
||||||
<BaseButton styles={"button-add"} onClick={addUserToProject}>
|
)}
|
||||||
Добавить
|
{modalType === "createTiketProject" && (
|
||||||
</BaseButton>
|
<div>
|
||||||
</div>
|
<div className="title-project">
|
||||||
)}
|
<h4>Введите название и описание задачи</h4>
|
||||||
{modalType === "createTiketProject" && (
|
<div className="input-container">
|
||||||
<div>
|
<input
|
||||||
<div className="title-project">
|
className="name-project"
|
||||||
<h4>Введите название и описание задачи</h4>
|
value={valueTiket}
|
||||||
<div className="input-container">
|
onChange={(e) => setValueTiket(e.target.value)}
|
||||||
<input
|
placeholder="Название задачи"
|
||||||
className="name-project"
|
/>
|
||||||
value={valueTiket}
|
</div>
|
||||||
onChange={(e) => setValueTiket(e.target.value)}
|
<div className="input-container">
|
||||||
placeholder="Название задачи"
|
<input
|
||||||
/>
|
className="name-project"
|
||||||
|
value={descriptionTicket}
|
||||||
|
onChange={(e) => setDescriptionTicket(e.target.value)}
|
||||||
|
placeholder="Описание задачи"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-container">
|
<BaseButton styles={"button-add"} onClick={createTiket}>
|
||||||
<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 === "editProject" && (
|
||||||
{modalType === "addSubtask" && (
|
<div>
|
||||||
<div>
|
<div className="title-project">
|
||||||
<div className="title-project subtask">
|
<h4>Введите новое название</h4>
|
||||||
<h4>
|
<div className="input-container">
|
||||||
Вы добавляете подзадачу{" "}
|
<input
|
||||||
<p>в колонку(id) задачи "{defautlInput}"</p>
|
className="name-project"
|
||||||
</h4>
|
value={projectName}
|
||||||
<p className="title-project__decs">Введите текст</p>
|
onChange={(e) => setProjectName(e.target.value)}
|
||||||
<div>
|
/>
|
||||||
<textarea className="title-project__textarea"></textarea>
|
</div>
|
||||||
</div>
|
</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="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>
|
<BaseButton styles={"button-add"} onClick={editProject}>
|
||||||
</ModalLayout>
|
Сохранить
|
||||||
|
</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()}
|
||||||
|
>
|
||||||
|
Добавить
|
||||||
|
</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="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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,403 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
|
|
||||||
import { apiRequest } from "../../../api/request";
|
|
||||||
import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
|
|
||||||
import {
|
|
||||||
addPersonToProject,
|
|
||||||
editColumnName,
|
|
||||||
editProjectName,
|
|
||||||
getColumnId,
|
|
||||||
getColumnName,
|
|
||||||
getColumnPriority,
|
|
||||||
getProjectBoard,
|
|
||||||
getValueModalType,
|
|
||||||
setColumnName,
|
|
||||||
setColumnPriority,
|
|
||||||
setProject,
|
|
||||||
setProjectBoardFetch,
|
|
||||||
} from "../../../redux/projectsTrackerSlice";
|
|
||||||
import { urlForLocal } from "../../../utils/helper";
|
|
||||||
import "./trackerModal.scss";
|
|
||||||
|
|
||||||
export const TrackerModal = ({
|
|
||||||
active,
|
|
||||||
setActive,
|
|
||||||
selectedTab,
|
|
||||||
defautlInput,
|
|
||||||
titleProject,
|
|
||||||
projectId,
|
|
||||||
priorityTask,
|
|
||||||
}) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const projectBoard = useSelector(getProjectBoard);
|
|
||||||
const columnName = useSelector(getColumnName);
|
|
||||||
const columnId = useSelector(getColumnId);
|
|
||||||
const columnPriority = useSelector(getColumnPriority);
|
|
||||||
|
|
||||||
const modalType = useSelector(getValueModalType);
|
|
||||||
const [projectName, setProjectName] = useState(defautlInput);
|
|
||||||
const [valueColumn, setValueColumn] = useState("");
|
|
||||||
const [nameProject, setNameProject] = useState("");
|
|
||||||
const [valueTiket, setValueTiket] = useState("");
|
|
||||||
const [descriptionTicket, setDescriptionTicket] = useState("");
|
|
||||||
const [workers, setWorkers] = useState([]);
|
|
||||||
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
|
|
||||||
const [selectedWorker, setSelectedWorker] = useState(null);
|
|
||||||
|
|
||||||
function createTab() {
|
|
||||||
if (!valueColumn) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
apiRequest("/project-column/create-column", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
project_id: projectBoard.id,
|
|
||||||
priority: projectBoard.columns.length
|
|
||||||
? projectBoard.columns.at(-1).priority + 1
|
|
||||||
: 1,
|
|
||||||
title: valueColumn,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
|
||||||
});
|
|
||||||
setValueColumn("");
|
|
||||||
setActive(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createTiket() {
|
|
||||||
if (!valueTiket || !descriptionTicket) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
apiRequest("/task/create-task", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
project_id: projectBoard.id,
|
|
||||||
title: valueTiket,
|
|
||||||
description: descriptionTicket,
|
|
||||||
status: 1,
|
|
||||||
user_id: localStorage.getItem("id"),
|
|
||||||
column_id: selectedTab,
|
|
||||||
priority: priorityTask,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
|
||||||
});
|
|
||||||
|
|
||||||
setActive(false);
|
|
||||||
setValueTiket("");
|
|
||||||
setDescriptionTicket("");
|
|
||||||
}
|
|
||||||
|
|
||||||
function editProject() {
|
|
||||||
apiRequest("/project/update", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
project_id: projectId,
|
|
||||||
name: projectName,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
setActive(false);
|
|
||||||
dispatch(editProjectName({ id: projectId, name: projectName }));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeColumnParams() {
|
|
||||||
projectBoard.columns.forEach((column) => {
|
|
||||||
if (column.id === columnId && column.priority !== columnPriority) {
|
|
||||||
const priorityColumns = [
|
|
||||||
{
|
|
||||||
column_id: column.id,
|
|
||||||
priority: Number(columnPriority),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
for (let i = column.priority; i < columnPriority; i++) {
|
|
||||||
const currentColumn = {
|
|
||||||
column_id: projectBoard.columns[i].id,
|
|
||||||
priority: i,
|
|
||||||
};
|
|
||||||
priorityColumns.push(currentColumn);
|
|
||||||
}
|
|
||||||
for (let i = column.priority; i > columnPriority; i--) {
|
|
||||||
const currentColumn = {
|
|
||||||
column_id: projectBoard.columns[i - 2].id,
|
|
||||||
priority: i,
|
|
||||||
};
|
|
||||||
priorityColumns.push(currentColumn);
|
|
||||||
}
|
|
||||||
apiRequest("/project-column/set-priority", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
project_id: projectBoard.id,
|
|
||||||
data: JSON.stringify(priorityColumns),
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
changeColumnTitle();
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeColumnTitle() {
|
|
||||||
apiRequest("/project-column/update-column", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
column_id: columnId,
|
|
||||||
title: columnName,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
setActive(false);
|
|
||||||
dispatch(editColumnName({ id: columnId, title: columnName }));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createProject() {
|
|
||||||
if (nameProject === "") {
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
apiRequest("/project/create", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
user_id: localStorage.getItem("id"),
|
|
||||||
name: nameProject,
|
|
||||||
status: 19,
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
const result = { ...res, columns: [] };
|
|
||||||
dispatch(setProject(result));
|
|
||||||
setActive(false);
|
|
||||||
setNameProject("");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addUserToProject() {
|
|
||||||
apiRequest("/project/add-user", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
user_id: selectedWorker.user_id,
|
|
||||||
project_id: projectBoard.id,
|
|
||||||
},
|
|
||||||
}).then((el) => {
|
|
||||||
dispatch(addPersonToProject(el));
|
|
||||||
setActive(false);
|
|
||||||
setSelectedWorker("");
|
|
||||||
setSelectWorkersOpen(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
modalType === "addWorker"
|
|
||||||
? apiRequest("/project/my-employee").then((el) => {
|
|
||||||
let persons = el.managerEmployees;
|
|
||||||
let ids = projectBoard.projectUsers.map((user) => user.user_id);
|
|
||||||
setWorkers(
|
|
||||||
persons.reduce((acc, cur) => {
|
|
||||||
if (!ids.includes(cur.user_id)) acc.push(cur);
|
|
||||||
return acc;
|
|
||||||
}, [])
|
|
||||||
);
|
|
||||||
})
|
|
||||||
: "";
|
|
||||||
}, [active]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={active ? "modal-add active" : "modal-add"}
|
|
||||||
onClick={() => {
|
|
||||||
setActive(false);
|
|
||||||
setSelectWorkersOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
|
|
||||||
{modalType === "addWorker" && (
|
|
||||||
<div>
|
|
||||||
<div className="title-project">
|
|
||||||
<h4>Добавьте участника</h4>
|
|
||||||
{/*<div className="input-container">*/}
|
|
||||||
{/* <input*/}
|
|
||||||
{/* className="name-project"*/}
|
|
||||||
{/* value={emailWorker}*/}
|
|
||||||
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
|
|
||||||
{/* />*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
selectWorkersOpen ? "select__worker open" : "select__worker"
|
|
||||||
}
|
|
||||||
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>
|
|
||||||
<button className="button-add" onClick={addUserToProject}>
|
|
||||||
Добавить
|
|
||||||
</button>
|
|
||||||
</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>
|
|
||||||
<button className="button-add" onClick={createTiket}>
|
|
||||||
Создать
|
|
||||||
</button>
|
|
||||||
</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>
|
|
||||||
<button className="button-add" onClick={editProject}>
|
|
||||||
Сохранить
|
|
||||||
</button>
|
|
||||||
</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>
|
|
||||||
<button className="button-add" onClick={createProject}>
|
|
||||||
Создать
|
|
||||||
</button>
|
|
||||||
</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>
|
|
||||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
|
||||||
Добавить
|
|
||||||
</button>
|
|
||||||
</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>
|
|
||||||
<button className="button-add" onClick={createTab}>
|
|
||||||
Создать
|
|
||||||
</button>
|
|
||||||
</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="input-container">
|
|
||||||
<input
|
|
||||||
className="name-project"
|
|
||||||
placeholder="Приоритет колонки"
|
|
||||||
type="number"
|
|
||||||
step="1"
|
|
||||||
value={columnPriority}
|
|
||||||
onChange={(e) => dispatch(setColumnPriority(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button className="button-add" onClick={changeColumnParams}>
|
|
||||||
Сохранить
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TrackerModal;
|
|
||||||
@ -1,571 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { useDispatch } from "react-redux";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
import { apiRequest } from "../../../api/request";
|
|
||||||
import archive from "../../../assets/icons/archive.svg";
|
|
||||||
import arrow from "../../../assets/icons/arrows/arrowStart.png";
|
|
||||||
import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
|
|
||||||
import category from "../../../assets/icons/category.svg";
|
|
||||||
import close from "../../../assets/icons/closeProjectPersons.svg";
|
|
||||||
import del from "../../../assets/icons/delete.svg";
|
|
||||||
import edit from "../../../assets/icons/edit.svg";
|
|
||||||
import file from "../../../assets/icons/fileModal.svg";
|
|
||||||
import link from "../../../assets/icons/link.svg";
|
|
||||||
import plus from "../../../assets/icons/plus.svg";
|
|
||||||
import send from "../../../assets/icons/send.svg";
|
|
||||||
import watch from "../../../assets/icons/watch.svg";
|
|
||||||
import TrackerModal from "../../../components/Modal/TrackerModal/TrackerModal";
|
|
||||||
import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
|
|
||||||
import {
|
|
||||||
modalToggle,
|
|
||||||
setProjectBoardFetch,
|
|
||||||
} from "../../../redux/projectsTrackerSlice";
|
|
||||||
import { getCorrectRequestDate, urlForLocal } from "../../../utils/helper";
|
|
||||||
import "./modalTicket.scss";
|
|
||||||
|
|
||||||
export const ModalTiсket = ({
|
|
||||||
active,
|
|
||||||
setActive,
|
|
||||||
task,
|
|
||||||
projectId,
|
|
||||||
projectName,
|
|
||||||
projectUsers,
|
|
||||||
}) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const [addSubtask, setAddSubtask] = useState(false);
|
|
||||||
const [editOpen, setEditOpen] = useState(false);
|
|
||||||
const [inputsValue, setInputsValue] = useState({
|
|
||||||
title: task.title,
|
|
||||||
description: task.description,
|
|
||||||
comment: "",
|
|
||||||
});
|
|
||||||
const [comments, setComments] = useState([]);
|
|
||||||
const [dropListOpen, setDropListOpen] = useState(false);
|
|
||||||
const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
|
|
||||||
const [executor, setExecutor] = useState(task.executor);
|
|
||||||
const [members, setMembers] = useState(task.taskUsers);
|
|
||||||
const [users, setUsers] = useState([]);
|
|
||||||
const [timerStart, setTimerStart] = useState(false);
|
|
||||||
const [timerInfo, setTimerInfo] = useState({});
|
|
||||||
const [currentTimerCount, setCurrentTimerCount] = useState({
|
|
||||||
hours: 0,
|
|
||||||
minute: 0,
|
|
||||||
seconds: 0,
|
|
||||||
});
|
|
||||||
const [timerId, setTimerId] = useState(null);
|
|
||||||
|
|
||||||
function deleteTask() {
|
|
||||||
apiRequest("/task/update-task", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
task_id: task.id,
|
|
||||||
status: 0,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
setActive(false);
|
|
||||||
dispatch(setProjectBoardFetch(projectId));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function editTask() {
|
|
||||||
apiRequest("/task/update-task", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
task_id: task.id,
|
|
||||||
title: inputsValue.title,
|
|
||||||
description: inputsValue.description,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
dispatch(setProjectBoardFetch(projectId));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createComment() {
|
|
||||||
apiRequest("/comment/create", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
text: inputsValue.comment,
|
|
||||||
entity_type: 2,
|
|
||||||
entity_id: task.id,
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
let newComment = res;
|
|
||||||
newComment.created_at = new Date();
|
|
||||||
newComment.subComments = [];
|
|
||||||
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
|
||||||
setComments((prevValue) => [...prevValue, newComment]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function commentDelete(comment) {
|
|
||||||
setComments((prevValue) =>
|
|
||||||
prevValue.filter((item) => item.id !== comment.id)
|
|
||||||
);
|
|
||||||
if (comment.subComments.length) {
|
|
||||||
// promiseAll
|
|
||||||
comment.subComments.forEach((subComment) => {
|
|
||||||
apiRequest("/comment/update", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
comment_id: subComment.id,
|
|
||||||
status: 0,
|
|
||||||
},
|
|
||||||
}).then(() => {});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addSubComment(commentId, subComment) {
|
|
||||||
const addSubComment = comments;
|
|
||||||
addSubComment.forEach((comment) => {
|
|
||||||
if (comment.id === commentId) {
|
|
||||||
comment.subComments.push(subComment);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setComments(addSubComment);
|
|
||||||
}
|
|
||||||
|
|
||||||
function subCommentDelete(subComment) {
|
|
||||||
const deleteSubComment = comments;
|
|
||||||
deleteSubComment.forEach((comment, index) => {
|
|
||||||
if (comment.id === subComment.parent_id) {
|
|
||||||
deleteSubComment[index].subComments = comment.subComments.filter(
|
|
||||||
(item) => item.id !== subComment.id
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setComments([...deleteSubComment]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function startTaskTimer() {
|
|
||||||
apiRequest("/timer/create", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
entity_type: 2,
|
|
||||||
entity_id: task.id,
|
|
||||||
created_at: getCorrectRequestDate(new Date()),
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
setTimerStart(true);
|
|
||||||
setTimerInfo(res);
|
|
||||||
startTimer();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopTaskTimer() {
|
|
||||||
apiRequest("/timer/update", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
timer_id: timerInfo.id,
|
|
||||||
stopped_at: getCorrectRequestDate(new Date()),
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
setTimerStart(false);
|
|
||||||
clearInterval(timerId);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function taskExecutor(person) {
|
|
||||||
apiRequest("/task/update-task", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
task_id: task.id,
|
|
||||||
executor_id: person.user_id,
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
setDropListOpen(false);
|
|
||||||
setExecutor(res.executor);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteTaskExecutor() {
|
|
||||||
apiRequest("/task/update-task", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
task_id: task.id,
|
|
||||||
executor_id: 0,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
setExecutor(null);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function addMember(person) {
|
|
||||||
apiRequest("/task/add-user-to-task", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
task_id: task.id,
|
|
||||||
user_id: person.user_id,
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
setDropListMembersOpen(false);
|
|
||||||
setMembers((prevValue) => [...prevValue, res]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteMember(person) {
|
|
||||||
apiRequest("/task/del-user", {
|
|
||||||
method: "DELETE",
|
|
||||||
data: {
|
|
||||||
task_id: task.id,
|
|
||||||
user_id: person.user_id,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
setMembers(members.filter((item) => item.user_id !== person.user_id));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
apiRequest(
|
|
||||||
`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
|
|
||||||
).then((res) => {
|
|
||||||
const comments = res.reduce((acc, cur) => {
|
|
||||||
if (!cur.parent_id) {
|
|
||||||
acc.push({ ...cur, subComments: [] });
|
|
||||||
} else {
|
|
||||||
acc.forEach((item) => {
|
|
||||||
if (item.id === cur.parent_id) item.subComments.push(cur);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
setComments(comments);
|
|
||||||
});
|
|
||||||
apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
|
|
||||||
(res) => {
|
|
||||||
let timerSeconds = 0;
|
|
||||||
res.length &&
|
|
||||||
res.forEach((time) => {
|
|
||||||
timerSeconds += time.deltaSeconds;
|
|
||||||
setCurrentTimerCount({
|
|
||||||
hours: Math.floor(timerSeconds / 60 / 60),
|
|
||||||
minute: Math.floor((timerSeconds / 60) % 60),
|
|
||||||
seconds: timerSeconds % 60,
|
|
||||||
});
|
|
||||||
updateTimerHours = Math.floor(timerSeconds / 60 / 60);
|
|
||||||
updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
|
|
||||||
updateTimerSec = timerSeconds % 60;
|
|
||||||
if (!time.stopped_at) {
|
|
||||||
setTimerStart(true);
|
|
||||||
startTimer();
|
|
||||||
setTimerInfo(time);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
function startTimer() {
|
|
||||||
setTimerId(
|
|
||||||
setInterval(() => {
|
|
||||||
run();
|
|
||||||
}, 1000)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let updateTimerSec = currentTimerCount.seconds,
|
|
||||||
updateTimerMinute = currentTimerCount.minute,
|
|
||||||
updateTimerHours = currentTimerCount.hours;
|
|
||||||
|
|
||||||
function run() {
|
|
||||||
updateTimerSec++;
|
|
||||||
if (updateTimerSec > 60) {
|
|
||||||
updateTimerMinute++;
|
|
||||||
updateTimerSec = 0;
|
|
||||||
}
|
|
||||||
if (updateTimerMinute === 60) {
|
|
||||||
updateTimerMinute = 0;
|
|
||||||
updateTimerHours++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return setCurrentTimerCount({
|
|
||||||
hours: updateTimerHours,
|
|
||||||
minute: updateTimerMinute,
|
|
||||||
seconds: updateTimerSec,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function correctTimerTime(time) {
|
|
||||||
if (time < 10) return `0${time}`;
|
|
||||||
if (time > 10) return time;
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let ids = members.map((user) => user.user_id);
|
|
||||||
setUsers(
|
|
||||||
projectUsers.reduce((acc, cur) => {
|
|
||||||
if (!ids.includes(cur.user_id)) acc.push(cur);
|
|
||||||
return acc;
|
|
||||||
}, [])
|
|
||||||
);
|
|
||||||
}, [members]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={active ? "modal-tiket active" : "modal-tiket"}
|
|
||||||
onClick={() => setActive(false)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="modal-tiket__content"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div className="content">
|
|
||||||
<h3 className="title-project">
|
|
||||||
<img src={category} className="title-project__category"></img>
|
|
||||||
Проект: {projectName}
|
|
||||||
<Link
|
|
||||||
to={`/tracker/task/${task.id}`}
|
|
||||||
className="title-project__full"
|
|
||||||
>
|
|
||||||
<img src={fullScreen}></img>
|
|
||||||
</Link>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="content__task">
|
|
||||||
<span>Задача</span>
|
|
||||||
{editOpen ? (
|
|
||||||
<input
|
|
||||||
value={inputsValue.title}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputsValue((prevValue) => ({
|
|
||||||
...prevValue,
|
|
||||||
title: e.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<h5>{inputsValue.title}</h5>
|
|
||||||
)}
|
|
||||||
<div className="content__description">
|
|
||||||
{editOpen ? (
|
|
||||||
<input
|
|
||||||
value={inputsValue.description}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputsValue((prevValue) => ({
|
|
||||||
...prevValue,
|
|
||||||
description: e.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<p>{inputsValue.description}</p>
|
|
||||||
)}
|
|
||||||
{/*<img src={taskImg} className="image-task"></img>*/}
|
|
||||||
</div>
|
|
||||||
<div className="content__communication">
|
|
||||||
<p className="tasks">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(modalToggle("addSubtask"));
|
|
||||||
setAddSubtask(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img src={plus}></img>
|
|
||||||
Добавить под задачу
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
<p className="file">
|
|
||||||
<button>
|
|
||||||
<img src={file}></img>
|
|
||||||
Загрузить файл
|
|
||||||
</button>
|
|
||||||
<span>{0}</span>
|
|
||||||
Файлов
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="content__input">
|
|
||||||
<input
|
|
||||||
placeholder="Оставить комментарий"
|
|
||||||
value={inputsValue.comment}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputsValue((prevValue) => ({
|
|
||||||
...prevValue,
|
|
||||||
comment: e.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<img src={send} onClick={createComment}></img>
|
|
||||||
</div>
|
|
||||||
<div className="comments__list">
|
|
||||||
{comments.map((comment) => {
|
|
||||||
return (
|
|
||||||
<TrackerTaskComment
|
|
||||||
key={comment.id}
|
|
||||||
taskId={task.id}
|
|
||||||
comment={comment}
|
|
||||||
commentDelete={commentDelete}
|
|
||||||
addSubComment={addSubComment}
|
|
||||||
subCommentDelete={subCommentDelete}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="workers">
|
|
||||||
<div className="workers_box task__info">
|
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
|
||||||
<span className="nameProject">{task.title}</span>
|
|
||||||
<p className="workers__creator">Создатель : {task.user?.fio}</p>
|
|
||||||
|
|
||||||
{executor ? (
|
|
||||||
<div className="executor">
|
|
||||||
<p>Исполнитель: {executor.fio}</p>
|
|
||||||
<img src={urlForLocal(executor.avatar)} alt="avatar" />
|
|
||||||
<img
|
|
||||||
src={close}
|
|
||||||
className="delete"
|
|
||||||
onClick={() => deleteTaskExecutor()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="add-worker moreItems ">
|
|
||||||
<button onClick={() => setDropListOpen(true)}>+</button>
|
|
||||||
<span>Добавить исполнителя</span>
|
|
||||||
{dropListOpen && (
|
|
||||||
<div className="dropdownList">
|
|
||||||
<img
|
|
||||||
src={close}
|
|
||||||
className="dropdownList__close"
|
|
||||||
onClick={() => setDropListOpen(false)}
|
|
||||||
/>
|
|
||||||
{projectUsers.map((person) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="dropdownList__person"
|
|
||||||
key={person.user_id}
|
|
||||||
onClick={() => taskExecutor(person)}
|
|
||||||
>
|
|
||||||
<span>{person.user.fio}</span>
|
|
||||||
<img src={urlForLocal(person.user.avatar)} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{Boolean(members.length) && (
|
|
||||||
<div className="members">
|
|
||||||
<p>Участники:</p>
|
|
||||||
<div className="members__list">
|
|
||||||
{members.map((member) => {
|
|
||||||
return (
|
|
||||||
<div className="worker" key={member.user_id}>
|
|
||||||
<p>{member.fio}</p>
|
|
||||||
<img src={urlForLocal(member.avatar)} />
|
|
||||||
<img
|
|
||||||
src={close}
|
|
||||||
className="delete"
|
|
||||||
onClick={() => deleteMember(member)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="add-worker moreItems">
|
|
||||||
<button onClick={() => setDropListMembersOpen(true)}>+</button>
|
|
||||||
<span>Добавить участников</span>
|
|
||||||
{dropListMembersOpen && (
|
|
||||||
<div className="dropdownList">
|
|
||||||
<img
|
|
||||||
src={close}
|
|
||||||
className="dropdownList__close"
|
|
||||||
onClick={() => setDropListMembersOpen(false)}
|
|
||||||
/>
|
|
||||||
{users.length ? (
|
|
||||||
users.map((person) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="dropdownList__person"
|
|
||||||
key={person.user_id}
|
|
||||||
onClick={() => addMember(person)}
|
|
||||||
>
|
|
||||||
<span>{person.user.fio}</span>
|
|
||||||
<img src={urlForLocal(person.user.avatar)} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<p className="noUsers">Нет пользователей</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="workers_box-middle">
|
|
||||||
<div className="time">
|
|
||||||
<img src={watch}></img>
|
|
||||||
<span>Длительность : </span>
|
|
||||||
<p>
|
|
||||||
{correctTimerTime(currentTimerCount.hours)}:
|
|
||||||
{correctTimerTime(currentTimerCount.minute)}:
|
|
||||||
{correctTimerTime(currentTimerCount.seconds)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{timerStart ? (
|
|
||||||
<button className="stop" onClick={() => stopTaskTimer()}>
|
|
||||||
Остановить
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
className={
|
|
||||||
task.executor_id === Number(localStorage.getItem("id"))
|
|
||||||
? "start"
|
|
||||||
: "start disable"
|
|
||||||
}
|
|
||||||
onClick={() => startTaskTimer()}
|
|
||||||
>
|
|
||||||
Начать делать <img src={arrow}></img>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="workers_box-bottom">
|
|
||||||
<div
|
|
||||||
className={editOpen ? "edit" : ""}
|
|
||||||
onClick={() => {
|
|
||||||
if (editOpen) {
|
|
||||||
setEditOpen(!editOpen);
|
|
||||||
editTask();
|
|
||||||
} else {
|
|
||||||
setEditOpen(!editOpen);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img src={edit}></img>
|
|
||||||
<p>{editOpen ? "сохранить" : "редактировать"}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src={link}></img>
|
|
||||||
<p>ссылка на проект</p>
|
|
||||||
</div>
|
|
||||||
<div onClick={deleteTask}>
|
|
||||||
<img src={archive}></img>
|
|
||||||
<p>в архив</p>
|
|
||||||
</div>
|
|
||||||
<div onClick={deleteTask}>
|
|
||||||
<img src={del}></img>
|
|
||||||
<p>удалить</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TrackerModal
|
|
||||||
active={addSubtask}
|
|
||||||
setActive={setAddSubtask}
|
|
||||||
defautlInput={task.column_id}
|
|
||||||
></TrackerModal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModalTiсket;
|
|
||||||
@ -1,528 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
||||||
|
|
||||||
import { Footer } from "@components/Common/Footer/Footer";
|
|
||||||
import { Loader } from "@components/Common/Loader/Loader";
|
|
||||||
|
|
||||||
import { apiRequest } from "../../../api/request";
|
|
||||||
import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
|
|
||||||
import { getCorrectRequestDate, urlForLocal } from "../../../helper";
|
|
||||||
import archive2 from "../../../images/archive.svg";
|
|
||||||
import archive from "../../../images/archiveTracker.svg";
|
|
||||||
import arrow from "../../../images/arrowCalendar.png";
|
|
||||||
import arrow2 from "../../../images/arrowStart.png";
|
|
||||||
import close from "../../../images/closeProjectPersons.svg";
|
|
||||||
import del from "../../../images/delete.svg";
|
|
||||||
import edit from "../../../images/edit.svg";
|
|
||||||
import file from "../../../images/fileModal.svg";
|
|
||||||
import link from "../../../images/link.svg";
|
|
||||||
import plus from "../../../images/plus.svg";
|
|
||||||
import send from "../../../images/send.svg";
|
|
||||||
import project from "../../../images/trackerProject.svg";
|
|
||||||
import tasks from "../../../images/trackerTasks.svg";
|
|
||||||
import watch from "../../../images/watch.png";
|
|
||||||
import {
|
|
||||||
deletePersonOnProject,
|
|
||||||
getBoarderLoader,
|
|
||||||
getProjectBoard,
|
|
||||||
modalToggle,
|
|
||||||
setProjectBoardFetch,
|
|
||||||
setToggleTab,
|
|
||||||
} from "../../../redux/projectsTrackerSlice";
|
|
||||||
import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
|
|
||||||
import { Navigation } from "../../Navigation/Navigation";
|
|
||||||
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
|
||||||
import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
|
|
||||||
import "./ticketFullScreen.scss";
|
|
||||||
|
|
||||||
export const TicketFullScreen = () => {
|
|
||||||
const [modalAddWorker, setModalAddWorker] = useState(false);
|
|
||||||
const ticketId = useParams();
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const projectBoard = useSelector(getProjectBoard);
|
|
||||||
const boardLoader = useSelector(getBoarderLoader);
|
|
||||||
const [taskInfo, setTaskInfo] = useState({});
|
|
||||||
const [editOpen, setEditOpen] = useState(false);
|
|
||||||
const [inputsValue, setInputsValue] = useState({});
|
|
||||||
const [loader, setLoader] = useState(true);
|
|
||||||
const [comments, setComments] = useState([]);
|
|
||||||
const [personListOpen, setPersonListOpen] = useState(false);
|
|
||||||
const [timerStart, setTimerStart] = useState(false);
|
|
||||||
const [timerInfo, setTimerInfo] = useState({});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
|
|
||||||
setTaskInfo(taskInfo);
|
|
||||||
setInputsValue({
|
|
||||||
title: taskInfo.title,
|
|
||||||
description: taskInfo.description,
|
|
||||||
comment: "",
|
|
||||||
});
|
|
||||||
apiRequest(
|
|
||||||
`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
|
|
||||||
).then((res) => {
|
|
||||||
const comments = res.reduce((acc, cur) => {
|
|
||||||
if (!cur.parent_id) {
|
|
||||||
acc.push({ ...cur, subComments: [] });
|
|
||||||
} else {
|
|
||||||
acc.forEach((item) => {
|
|
||||||
if (item.id === cur.parent_id) item.subComments.push(cur);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
setComments(comments);
|
|
||||||
});
|
|
||||||
taskInfo.timers.forEach((time) => {
|
|
||||||
if (!time.stopped_at) {
|
|
||||||
setTimerStart(true);
|
|
||||||
setTimerInfo(time);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
dispatch(setProjectBoardFetch(taskInfo.project_id));
|
|
||||||
setLoader(boardLoader);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
function deleteTask() {
|
|
||||||
apiRequest("/task/update-task", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
task_id: ticketId.id,
|
|
||||||
status: 0,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
navigate(`/tracker/project/${taskInfo.project_id}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function editTask() {
|
|
||||||
apiRequest("/task/update-task", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
task_id: taskInfo.id,
|
|
||||||
title: inputsValue.title,
|
|
||||||
description: inputsValue.description,
|
|
||||||
},
|
|
||||||
}).then(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createComment() {
|
|
||||||
apiRequest("/comment/create", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
text: inputsValue.comment,
|
|
||||||
entity_type: 2,
|
|
||||||
entity_id: taskInfo.id,
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
let newComment = res;
|
|
||||||
newComment.created_at = new Date();
|
|
||||||
newComment.subComments = [];
|
|
||||||
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
|
||||||
setComments((prevValue) => [...prevValue, newComment]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function startTaskTimer() {
|
|
||||||
apiRequest("/timer/create", {
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
entity_type: 2,
|
|
||||||
entity_id: taskInfo.id,
|
|
||||||
created_at: getCorrectRequestDate(new Date()),
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
setTimerStart(true);
|
|
||||||
setTimerInfo(res);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopTaskTimer() {
|
|
||||||
apiRequest("/timer/update", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
timer_id: timerInfo.id,
|
|
||||||
stopped_at: getCorrectRequestDate(new Date()),
|
|
||||||
},
|
|
||||||
}).then(() => setTimerStart(false));
|
|
||||||
}
|
|
||||||
|
|
||||||
function deletePerson(userId) {
|
|
||||||
apiRequest("/project/del-user", {
|
|
||||||
method: "DELETE",
|
|
||||||
data: {
|
|
||||||
project_id: projectBoard.id,
|
|
||||||
user_id: userId,
|
|
||||||
},
|
|
||||||
}).then(() => {
|
|
||||||
dispatch(deletePersonOnProject(userId));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function commentDelete(comment) {
|
|
||||||
setComments((prevValue) =>
|
|
||||||
prevValue.filter((item) => item.id !== comment.id)
|
|
||||||
);
|
|
||||||
if (comment.subComments.length) {
|
|
||||||
comment.subComments.forEach((subComment) => {
|
|
||||||
apiRequest("/comment/update", {
|
|
||||||
method: "PUT",
|
|
||||||
data: {
|
|
||||||
comment_id: subComment.id,
|
|
||||||
status: 0,
|
|
||||||
},
|
|
||||||
}).then(() => {});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addSubComment(commentId, subComment) {
|
|
||||||
const addSubComment = comments;
|
|
||||||
addSubComment.forEach((comment) => {
|
|
||||||
if (comment.id === commentId) {
|
|
||||||
comment.subComments.push(subComment);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setComments(addSubComment);
|
|
||||||
}
|
|
||||||
|
|
||||||
function subCommentDelete(subComment) {
|
|
||||||
const deleteSubComment = comments;
|
|
||||||
deleteSubComment.forEach((comment, index) => {
|
|
||||||
if (comment.id === subComment.parent_id) {
|
|
||||||
deleteSubComment[index].subComments = comment.subComments.filter(
|
|
||||||
(item) => item.id !== subComment.id
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setComments([...deleteSubComment]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleTabs = (index) => {
|
|
||||||
dispatch(setToggleTab(index));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="ticket-full-screen">
|
|
||||||
<ProfileHeader />
|
|
||||||
<Navigation />
|
|
||||||
<div className="container">
|
|
||||||
<div className="tracker__content">
|
|
||||||
<ProfileBreadcrumbs
|
|
||||||
links={[
|
|
||||||
{ name: "Главная", link: "/profile" },
|
|
||||||
{ name: "Трекер", link: "/profile/tracker" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<h2 className="tracker__title">Управление проектами с трекером</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="tracker__tabs">
|
|
||||||
<div className="tracker__tabs__head">
|
|
||||||
<Link
|
|
||||||
to="/profile/tracker"
|
|
||||||
className="tab active-tab"
|
|
||||||
onClick={() => toggleTabs(1)}
|
|
||||||
>
|
|
||||||
<img src={project} alt="img" />
|
|
||||||
<p>Проекты </p>
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/profile/tracker"
|
|
||||||
className="tab"
|
|
||||||
onClick={() => toggleTabs(2)}
|
|
||||||
>
|
|
||||||
<img src={tasks} alt="img" />
|
|
||||||
<p>Все мои задачи</p>
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/profile/tracker"
|
|
||||||
className="tab"
|
|
||||||
onClick={() => toggleTabs(3)}
|
|
||||||
>
|
|
||||||
<img src={archive} alt="img" />
|
|
||||||
<p>Архив</p>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
{loader ? (
|
|
||||||
<Loader />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="tracker__tabs__content content-tabs">
|
|
||||||
<div className="tasks__head">
|
|
||||||
<div className="tasks__head__wrapper">
|
|
||||||
<h4>Проект : {projectBoard.name}</h4>
|
|
||||||
|
|
||||||
<TrackerModal
|
|
||||||
active={modalAddWorker}
|
|
||||||
setActive={setModalAddWorker}
|
|
||||||
></TrackerModal>
|
|
||||||
|
|
||||||
<div className="tasks__head__persons">
|
|
||||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
|
||||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
|
||||||
<span className="countPersons">
|
|
||||||
{projectBoard.projectUsers?.length}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className="addPerson"
|
|
||||||
onClick={() => {
|
|
||||||
setPersonListOpen(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+
|
|
||||||
</span>
|
|
||||||
<p>добавить участника</p>
|
|
||||||
{personListOpen && (
|
|
||||||
<div className="persons__list">
|
|
||||||
<img
|
|
||||||
className="persons__list__close"
|
|
||||||
src={close}
|
|
||||||
alt="close"
|
|
||||||
onClick={() => setPersonListOpen(false)}
|
|
||||||
/>
|
|
||||||
<div className="persons__list__count">
|
|
||||||
<span>{projectBoard.projectUsers?.length}</span>
|
|
||||||
участник
|
|
||||||
</div>
|
|
||||||
<div className="persons__list__info">
|
|
||||||
В проекте - <span>“{projectBoard.name}”</span>
|
|
||||||
</div>
|
|
||||||
<div className="persons__list__items">
|
|
||||||
{projectBoard.projectUsers?.map((person) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="persons__list__item"
|
|
||||||
key={person.user_id}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
className="avatar"
|
|
||||||
src={urlForLocal(person.user.avatar)}
|
|
||||||
alt="avatar"
|
|
||||||
/>
|
|
||||||
<span>{person.user.fio}</span>
|
|
||||||
<img
|
|
||||||
className="delete"
|
|
||||||
src={close}
|
|
||||||
alt="delete"
|
|
||||||
onClick={() => deletePerson(person.user_id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="persons__list__add"
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(modalToggle("addWorker"));
|
|
||||||
setModalAddWorker(true);
|
|
||||||
setPersonListOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="addPerson">+</span>
|
|
||||||
<p>Добавить участников</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Link to={`/profile/tracker`} className="link">
|
|
||||||
<div className="tasks__head__back">
|
|
||||||
<p>Вернуться на проекты</p>
|
|
||||||
<img src={arrow} alt="arrow" />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="modal-tiket__content ticket">
|
|
||||||
<div className="content ticket-whith">
|
|
||||||
<div className="content__task">
|
|
||||||
<span>Задача</span>
|
|
||||||
{editOpen ? (
|
|
||||||
<input
|
|
||||||
value={inputsValue.title}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputsValue((prevValue) => ({
|
|
||||||
...prevValue,
|
|
||||||
title: e.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<h5>{inputsValue.title}</h5>
|
|
||||||
)}
|
|
||||||
<div className="content__description">
|
|
||||||
{editOpen ? (
|
|
||||||
<input
|
|
||||||
value={inputsValue.description}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputsValue((prevValue) => ({
|
|
||||||
...prevValue,
|
|
||||||
description: e.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<p>{inputsValue.description}</p>
|
|
||||||
)}
|
|
||||||
{/*<img src={task} className="image-task"></img>*/}
|
|
||||||
</div>
|
|
||||||
<div className="content__communication">
|
|
||||||
<p className="tasks">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(modalToggle("addSubtask"));
|
|
||||||
setModalAddWorker(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img src={plus}></img>
|
|
||||||
Добавить под задачу
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
<p className="file">
|
|
||||||
<button>
|
|
||||||
<img src={file}></img>
|
|
||||||
Загрузить файл
|
|
||||||
</button>
|
|
||||||
<span>{0}</span>
|
|
||||||
Файлов
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="content__input">
|
|
||||||
<input
|
|
||||||
placeholder="Оставить комментарий"
|
|
||||||
value={inputsValue.comment}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputsValue((prevValue) => ({
|
|
||||||
...prevValue,
|
|
||||||
comment: e.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<img src={send} onClick={createComment}></img>
|
|
||||||
</div>
|
|
||||||
<div className="comments__list">
|
|
||||||
{comments.map((comment) => {
|
|
||||||
return (
|
|
||||||
<TrackerTaskComment
|
|
||||||
key={comment.id}
|
|
||||||
taskId={taskInfo.id}
|
|
||||||
comment={comment}
|
|
||||||
commentDelete={commentDelete}
|
|
||||||
addSubComment={addSubComment}
|
|
||||||
subCommentDelete={subCommentDelete}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="workers">
|
|
||||||
<div className="workers_box">
|
|
||||||
<p className="workers__creator">
|
|
||||||
Создатель : <span>{taskInfo.user?.fio}</span>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
{Boolean(taskInfo.taskUsers?.length) &&
|
|
||||||
taskInfo.taskUsers.map((worker, index) => {
|
|
||||||
return (
|
|
||||||
<div className="worker" key={index}>
|
|
||||||
<img src={worker.avatar}></img>
|
|
||||||
<p>{worker.name}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="add-worker moreItems">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(modalToggle("addWorker"));
|
|
||||||
setModalAddWorker(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
<span>Добавить исполнителя</span>
|
|
||||||
</div>
|
|
||||||
<div className="add-worker moreItems">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(modalToggle("addWorker"));
|
|
||||||
setModalAddWorker(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
<span>Добавить участников</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="workers_box-middle">
|
|
||||||
<div className="time">
|
|
||||||
<img src={watch}></img>
|
|
||||||
<span>Длительность : </span>
|
|
||||||
<p>{"0:00:00"}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{timerStart ? (
|
|
||||||
<button className="stop" onClick={() => stopTaskTimer()}>
|
|
||||||
Остановить
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
className={
|
|
||||||
taskInfo.executor_id ===
|
|
||||||
Number(localStorage.getItem("id"))
|
|
||||||
? "start"
|
|
||||||
: "start disable"
|
|
||||||
}
|
|
||||||
onClick={() => startTaskTimer()}
|
|
||||||
>
|
|
||||||
Начать делать <img src={arrow2}></img>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="workers_box-bottom">
|
|
||||||
<div
|
|
||||||
className={editOpen ? "edit" : ""}
|
|
||||||
onClick={() => {
|
|
||||||
if (editOpen) {
|
|
||||||
setEditOpen(!editOpen);
|
|
||||||
editTask();
|
|
||||||
} else {
|
|
||||||
setEditOpen(!editOpen);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img src={edit}></img>
|
|
||||||
<p>{editOpen ? "сохранить" : "редактировать"}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src={link}></img>
|
|
||||||
<p>ссылка на проект</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src={archive2}></img>
|
|
||||||
<p>в архив</p>
|
|
||||||
</div>
|
|
||||||
<div onClick={deleteTask}>
|
|
||||||
<img src={del}></img>
|
|
||||||
<p>удалить</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TicketFullScreen;
|
|
||||||
@ -28,6 +28,7 @@ import { Footer } from "@components/Common/Footer/Footer";
|
|||||||
import { Loader } from "@components/Common/Loader/Loader";
|
import { Loader } from "@components/Common/Loader/Loader";
|
||||||
import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
|
import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
|
||||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||||
|
// import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
|
||||||
import { Navigation } from "@components/Navigation/Navigation";
|
import { Navigation } from "@components/Navigation/Navigation";
|
||||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||||
@ -296,7 +297,7 @@ export const ProjectTracker = () => {
|
|||||||
<div className="tracker__tabs__content__tasks tasks active__content">
|
<div className="tracker__tabs__content__tasks tasks active__content">
|
||||||
<div className="tasks__head">
|
<div className="tasks__head">
|
||||||
<div className="tasks__head__wrapper">
|
<div className="tasks__head__wrapper">
|
||||||
<h4>Проект : {projectBoard.name}</h4>
|
<h5>Проект : {projectBoard.name}</h5>
|
||||||
|
|
||||||
<div className="tasks__head__add">
|
<div className="tasks__head__add">
|
||||||
<BaseButton
|
<BaseButton
|
||||||
|
|||||||
@ -215,7 +215,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h5 {
|
||||||
color: #1458dd;
|
color: #1458dd;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
@ -546,6 +546,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
transition: 0.4s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(0.99);
|
||||||
|
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
&__hide {
|
&__hide {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user