114 lines
3.0 KiB
JavaScript
114 lines
3.0 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { useDispatch } from "react-redux";
|
|
|
|
import { filteredExecutorTasks } from "@redux/projectsTrackerSlice";
|
|
|
|
import { removeLast, urlForLocal } from "@utils/helper";
|
|
|
|
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
|
import close from "assets/icons/close.png";
|
|
import avatarMok from "assets/images/avatarMok.png";
|
|
|
|
import "./trackerSelectExecutor.scss";
|
|
|
|
const TrackerSelectExecutor = ({
|
|
selectedExecutor,
|
|
setSelectedExecutor,
|
|
deleteSelectedExecutor,
|
|
projectBoard
|
|
}) => {
|
|
const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
|
|
const dispatch = useDispatch();
|
|
|
|
const initListeners = () => {
|
|
document.addEventListener("click", closeByClickingOut);
|
|
};
|
|
|
|
const closeByClickingOut = (event) => {
|
|
const path = event.path || (event.composedPath && event.composedPath());
|
|
|
|
if (
|
|
event &&
|
|
!path.find(
|
|
(div) =>
|
|
div.classList &&
|
|
(div.classList.contains("tasks__head__executor") ||
|
|
div.classList.contains("tasks__head__executor-dropdown"))
|
|
)
|
|
) {
|
|
setSelectedExecutorOpen(false);
|
|
}
|
|
};
|
|
|
|
function executorFilter(user) {
|
|
dispatch(filteredExecutorTasks(user.user_id));
|
|
setSelectedExecutor(user);
|
|
}
|
|
|
|
useEffect(() => {
|
|
initListeners();
|
|
}, []);
|
|
|
|
if (selectedExecutor) {
|
|
return (
|
|
<div className="tasks__head__executor-selected">
|
|
<p>{removeLast(selectedExecutor.user.fio)}</p>
|
|
<img
|
|
className="avatar"
|
|
src={
|
|
selectedExecutor.user?.avatar
|
|
? urlForLocal(selectedExecutor.user.avatar)
|
|
: avatarMok
|
|
}
|
|
alt="avatar"
|
|
/>
|
|
<img
|
|
className="delete"
|
|
src={close}
|
|
alt="delete"
|
|
onClick={deleteSelectedExecutor}
|
|
/>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div
|
|
className="tasks__head__executor"
|
|
onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}
|
|
>
|
|
<p>Выберите исполнителя</p>
|
|
<img
|
|
className={selectExecutorOpen ? "open" : ""}
|
|
src={arrowDown}
|
|
alt="arrow"
|
|
/>
|
|
{selectExecutorOpen && (
|
|
<div className="tasks__head__executor-dropdown">
|
|
{projectBoard.projectUsers.map((user) => {
|
|
return (
|
|
<div
|
|
className="executor-dropdown__person"
|
|
key={user.user_id}
|
|
onClick={() => executorFilter(user)}
|
|
>
|
|
<p>{removeLast(user.user?.fio)}</p>
|
|
<img
|
|
src={
|
|
user.user?.avatar
|
|
? urlForLocal(user.user.avatar)
|
|
: avatarMok
|
|
}
|
|
alt="avatar"
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default TrackerSelectExecutor;
|