190 lines
5.2 KiB
React
Raw Normal View History

2023-04-14 15:52:21 +03:00
import React, { useEffect, useState } from "react";
2023-05-03 22:06:19 +03:00
import { useDispatch } from "react-redux";
2024-02-13 20:12:07 +03:00
import { Link, useNavigate } from "react-router-dom";
2023-05-03 22:06:19 +03:00
2023-05-30 10:10:34 +03:00
import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
2023-04-14 15:52:21 +03:00
2024-02-13 20:12:07 +03:00
import { copyProjectLink, urlForLocal } from "@utils/helper";
2023-10-03 18:26:07 +03:00
2023-05-31 08:36:15 +03:00
import { apiRequest } from "@api/request";
2023-07-14 03:03:49 +03:00
import { useNotification } from "@hooks/useNotification";
import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
2023-05-30 10:54:47 +03:00
import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect";
2023-06-22 19:18:41 +03:00
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
2023-05-30 10:10:34 +03:00
import archiveSet from "assets/icons/archive.svg";
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
2023-05-31 08:36:15 +03:00
import link from "assets/icons/link.svg";
2023-04-14 15:52:21 +03:00
2024-01-31 16:57:22 +03:00
import "./projectTicket.scss";
2023-04-14 15:52:21 +03:00
2024-01-31 16:57:22 +03:00
export const ProjectTicket = ({ project, index }) => {
2023-05-03 22:06:19 +03:00
const [modalSelect, setModalSelect] = useState(false);
const [modalAdd, setModalAdd] = useState(false);
2023-11-27 17:32:38 +03:00
const [modalDelete, setModalDelete] = useState(false);
2023-07-14 03:03:33 +03:00
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
2023-04-28 14:56:59 +03:00
const dispatch = useDispatch();
2024-02-13 20:12:07 +03:00
const navigate = useNavigate();
2023-07-14 03:03:49 +03:00
const { showNotification } = useNotification();
2023-04-14 15:52:21 +03:00
useEffect(() => {
initListeners();
}, []);
function initListeners() {
document.addEventListener("click", closeByClickingOut);
}
function closeByClickingOut(event) {
const path = event.path || (event.composedPath && event.composedPath());
if (
event &&
2023-11-19 20:01:50 +03:00
!path.find(
(div) =>
2023-12-05 14:15:04 +03:00
div.classList && div.classList.contains(`project-${project.id}`)
2023-11-19 20:01:50 +03:00
)
2023-04-14 15:52:21 +03:00
) {
2023-05-03 22:06:19 +03:00
setModalSelect(false);
2023-04-14 15:52:21 +03:00
}
}
2023-04-28 18:29:13 +03:00
function removeProject() {
2023-05-03 22:06:19 +03:00
apiRequest("/project/update", {
method: "PUT",
2023-04-28 18:29:13 +03:00
data: {
project_id: project.id,
2023-12-19 17:36:30 +03:00
status: 10
}
2023-05-31 11:24:46 +03:00
}).then(() => {
2023-05-03 22:06:19 +03:00
dispatch(deleteProject(project));
2023-07-14 03:03:49 +03:00
showNotification({
show: true,
2024-01-30 17:40:40 +03:00
text: "Проект успешно был перемещен в архив",
2023-12-19 17:36:30 +03:00
type: "archive"
2023-07-14 03:03:49 +03:00
});
2023-05-03 22:06:19 +03:00
});
2023-04-28 18:29:13 +03:00
}
2023-07-14 03:03:49 +03:00
function closeAcceptModal() {
setAcceptModalOpen(false);
2023-11-27 17:32:38 +03:00
setModalDelete(false);
2023-07-14 03:03:33 +03:00
}
2023-04-14 15:52:21 +03:00
return (
2023-11-19 20:01:27 +03:00
<div className={`project project-${project.id}`} key={index}>
2023-11-07 16:37:03 +03:00
<Link
to={`/tracker/project/${project.id}`}
2024-01-31 16:57:22 +03:00
className="project__open-tracker"
2023-11-07 16:37:03 +03:00
>
2023-11-23 18:15:46 +03:00
<div className="project__link">{project.name}</div>
2023-10-19 19:19:45 +03:00
<div className="project__info">
2024-02-13 20:12:07 +03:00
{/* <p>Открытые задачи</p>
2023-10-19 19:19:45 +03:00
<span className="count">
{project.columns.reduce(
(accumulator, currentValue) =>
accumulator + currentValue.tasks.length,
2023-12-05 14:15:04 +03:00
0
2023-10-19 19:19:45 +03:00
)}
2024-02-13 20:12:07 +03:00
</span> */}
<img
src={urlForLocal(project.owner_info.avatar)}
alt="avatar"
className="project__avatar"
/>
<span>{project.owner_info.fio}</span>
2023-10-19 19:19:45 +03:00
</div>
2023-10-02 18:10:40 +03:00
</Link>
2023-10-19 19:19:45 +03:00
2024-02-13 20:12:07 +03:00
{/* <Link
to={`/profile/statistics/${project.id}`}
className="project__statistics"
>
Посмотреть статистику
</Link> */}
2023-11-19 20:01:50 +03:00
<span
className="menu-settings"
onClick={() => {
setModalSelect(!modalSelect);
}}
>
2023-10-19 19:19:45 +03:00
...
</span>
2023-11-07 16:37:03 +03:00
2023-05-05 16:10:25 +03:00
<TrackerModal
2023-05-03 22:06:19 +03:00
active={modalAdd}
setActive={setModalAdd}
defautlInput={project.name}
2023-05-08 00:41:39 +03:00
projectId={project.id}
2023-05-05 16:10:25 +03:00
></TrackerModal>
2023-05-03 22:06:19 +03:00
2023-10-19 19:19:45 +03:00
<ModalSelect active={modalSelect} onClick={(e) => e.stopPropagation()}>
2023-04-14 15:52:21 +03:00
<div className="project__settings-menu">
2023-05-03 22:06:19 +03:00
<div
onClick={() => {
2024-01-31 16:46:16 +03:00
dispatch(modalToggle("edit-project"));
2023-05-03 22:06:19 +03:00
setModalAdd(true);
setModalSelect(false);
}}
>
2023-04-14 15:52:21 +03:00
<img src={edit}></img>
<p>редактировать</p>
</div>
2024-02-14 19:32:13 +03:00
<div onClick={() => copyProjectLink(project.id)}>
2023-04-14 15:52:21 +03:00
<img src={link}></img>
2024-02-13 20:12:07 +03:00
<p>скопировать ссылку</p>
2023-04-14 15:52:21 +03:00
</div>
2023-07-14 03:03:49 +03:00
<div
onClick={() => {
setModalSelect(false);
setAcceptModalOpen(true);
}}
>
2023-04-14 15:52:21 +03:00
<img src={archiveSet}></img>
<p>в архив</p>
</div>
2024-02-13 20:12:07 +03:00
<div
onClick={() => {
navigate(`/profile/statistics/${project.id}`);
}}
>
<img src={archiveSet}></img>
<p>статистика</p>
</div>
2023-11-27 17:32:38 +03:00
<div
onClick={() => {
setModalDelete(true);
setModalSelect(false);
}}
>
2023-04-14 15:52:21 +03:00
<img src={del}></img>
<p>удалить</p>
</div>
</div>
2023-05-03 22:06:19 +03:00
</ModalSelect>
2023-07-14 03:03:49 +03:00
{acceptModalOpen && (
2023-07-14 03:03:33 +03:00
<AcceptModal
2024-02-09 16:15:37 +03:00
title={"Вы действительно хотите переместить проект в архив?"}
2023-11-27 17:32:38 +03:00
closeModal={closeAcceptModal}
agreeHandler={removeProject}
/>
)}
{modalDelete && (
<AcceptModal
2024-02-09 16:15:37 +03:00
title={"Вы действительно хотите удалить проект?"}
2023-07-14 03:03:49 +03:00
closeModal={closeAcceptModal}
agreeHandler={removeProject}
2023-07-14 03:03:33 +03:00
/>
2023-07-14 03:03:49 +03:00
)}
2023-04-14 15:52:21 +03:00
</div>
);
};
2024-01-31 16:57:22 +03:00
export default ProjectTicket;