executor filter tasks

src/pages/ProjectTracker/ProjectTracker.js

@@ -6,6 +6,7 @@ import {
   activeLoader,
   deletePersonOnProject,
   filterCreatedByMe,
+  filteredExecutorTasks,
   filteredParticipateTasks,
   getBoarderLoader,
   getProjectBoard,
@@ -44,6 +45,7 @@ import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import accept from "assets/images/accept.png";
 import avatarMok from "assets/images/avatarMok.png";
+import arrowDown from "assets/icons/arrows/selectArrow.png";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -61,6 +63,8 @@ export const ProjectTracker = () => {
   const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
     useState(false);
   const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
+  const [selectedExecutor, setSelectedExecutor] = useState(null);
+  const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false)
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
   const loader = useSelector(getBoarderLoader);
@@ -243,6 +247,16 @@ export const ProjectTracker = () => {
     setCheckBoxMyTasks(!checkBoxMyTasks);
   }
 
+  function executorFilter(user) {
+    dispatch(filteredExecutorTasks(user.user_id))
+    setSelectedExecutor(user)
+  }
+
+  function deleteSelectedExecutorFilter() {
+    setSelectedExecutor(null)
+    dispatch(setProjectBoardFetch(projectId.id));
+  }
+
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -423,6 +437,47 @@ export const ProjectTracker = () => {
                       {checkBoxMyTasks && <img src={accept} alt="accept" />}
                     </div>
                   </div>
+                  {selectedExecutor ?
+                    <div className='tasks__head__executorSelected'>
+                      <p>{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={deleteSelectedExecutorFilter}
+                      />
+                    </div>
+                    :
+                    <div className="tasks__head__executor" onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}>
+                      <p>Выберите исполнитель</p>
+                      <img className={selectExecutorOpen ? "open" : ""} src={arrowDown} alt="arrow" />
+                      {selectExecutorOpen &&
+                        <div className='tasks__head__executorDropdown'>
+                          {projectBoard.projectUsers.map((user) => {
+                            return <div className='executorDropdown__person' key={user.user_id} onClick={() => executorFilter(user)}>
+                                      <p>{user.user?.fio}</p>
+                                      <img
+                                        src={
+                                          user.user?.avatar
+                                            ? urlForLocal(user.user.avatar)
+                                            : avatarMok
+                                        }
+                                        alt='avatar' />
+                                  </div>
+                          })
+                          }
+                        </div>
+                      }
+                    </div>
+                  }
                   <Link to="/profile/tracker" className="tasks__head__back">
                     <p>Вернуться на проекты</p>
                     <img src={arrow} alt="arrow" />