2024-03-22 16:31:59 +03:00

212 lines
5.8 KiB
JavaScript

import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
import { copyProjectLink, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification";
import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import archiveSet from "assets/icons/archive.svg";
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
import link from "assets/icons/link.svg";
import "./projectTicket.scss";
export const ProjectTicket = ({ project, index }) => {
const [modalSelect, setModalSelect] = useState(false);
const [modalAdd, setModalAdd] = useState(false);
const [modalDelete, setModalDelete] = useState(false);
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
const dispatch = useDispatch();
const navigate = useNavigate();
const { showNotification } = useNotification();
useEffect(() => {
initListeners();
}, []);
function initListeners() {
document.addEventListener("click", closeByClickingOut);
}
function closeByClickingOut(event) {
const path = event.path || (event.composedPath && event.composedPath());
if (
event &&
!path.find(
(div) =>
div.classList && div.classList.contains(`project-${project.id}`)
)
) {
setModalSelect(false);
}
}
function removeProject() {
apiRequest("/project/update", {
method: "PUT",
data: {
project_id: project.id,
status: 10
}
}).then(() => {
dispatch(deleteProject(project));
showNotification({
show: true,
text: "Проект успешно был перемещен в архив",
type: "archive"
});
});
}
// showNotification({
// show: true,
// text: "Проект успешно удален",
// type: "success"
// });
function closeAcceptModal() {
setAcceptModalOpen(false);
setModalDelete(false);
}
return (
<div className={`project project-${project.id}`} key={index}>
<Link
to={`/tracker/project/${project.id}`}
className="project__open-tracker"
>
<div className="project__link">{project.name}</div>
<div className="project__info">
{/* <p>Открытые задачи</p>
<span className="count">
{project.columns.reduce(
(accumulator, currentValue) =>
accumulator + currentValue.tasks.length,
0
)}
</span> */}
<img
src={urlForLocal(project.owner_info.avatar)}
alt="avatar"
className="project__avatar"
/>
<div>
<p>Создатель проекта</p>
<span>{project.owner_info.fio}</span>
</div>
</div>
</Link>
{/* <Link
to={`/profile/statistics/${project.id}`}
className="project__statistics"
>
Посмотреть статистику
</Link> */}
<span className="project-stats" onClick={() => {}}>
Просмотреть <br />
статистику проекта
</span>
<span
className="menu-settings"
onClick={() => {
setModalSelect(!modalSelect);
}}
>
...
</span>
<TrackerModal
active={modalAdd}
setActive={setModalAdd}
defautlInput={project.name}
projectId={project.id}
></TrackerModal>
<ModalSelect active={modalSelect} onClick={(e) => e.stopPropagation()}>
<div className="project__settings-menu">
<div
onClick={() => {
dispatch(modalToggle("edit-project"));
setModalAdd(true);
setModalSelect(false);
}}
>
<img src={edit}></img>
<p>редактировать</p>
</div>
<div
onClick={() => {
copyProjectLink(project.id);
showNotification({
show: true,
text: "Ссылка скопирована в буфер обмена",
type: "copy"
});
}}
>
<img src={link}></img>
<p>скопировать ссылку</p>
</div>
<div
onClick={() => {
setModalSelect(false);
setAcceptModalOpen(true);
}}
>
{/* <img src={archiveSet}></img>
<p>в архив</p>
</div>
<div
onClick={() => {
navigate(`/profile/statistics/${project.id}`);
}}
> */}
<img src={archiveSet}></img>
<p>статистика</p>
</div>
<div
onClick={() => {
setModalDelete(true);
setModalSelect(false);
}}
>
<img src={del}></img>
<p>удалить</p>
</div>
</div>
</ModalSelect>
{acceptModalOpen && (
<AcceptModal
title={"Вы действительно хотите переместить проект в архив?"}
closeModal={closeAcceptModal}
agreeHandler={removeProject}
/>
)}
{modalDelete && (
<AcceptModal
title={"Вы действительно хотите удалить проект?"}
closeModal={closeAcceptModal}
agreeHandler={removeProject}
/>
)}
</div>
);
};
export default ProjectTicket;