executor filter tasks

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
 import { getProfileInfo } from "@redux/outstaffingSlice";
 import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
 
-import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
+import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -429,7 +429,7 @@ export const ModalTiсket = ({
                   Загрузить файл
                 </button>
                 <span>{0}</span>
-                Файлов
+                {caseOfNum(0, "files")}
               </p>
             </div>
             <div className="content__input">

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -11,7 +11,7 @@ import {
   setToggleTab,
 } from "@redux/projectsTrackerSlice";
 
-import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
+import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -585,7 +585,7 @@ export const TicketFullScreen = () => {
                         Загрузить файл
                       </BaseButton>
                       <span>{0}</span>
-                      Файлов
+                      {caseOfNum(0, "files")}
                     </p>
                   </div>
                   <div className="content__input">

src/components/ReportForm/reportForm.scss

@@ -99,6 +99,8 @@
     cursor: pointer;
 
     img {
+      width: 20px;
+      height: 20px;
       margin-left: 20px;
       margin-right: 20px;
     }

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" />

src/pages/Tracker/tracker.scss

@@ -208,7 +208,8 @@
 
           &__wrapper {
             display: flex;
-            max-width: 1160px;
+            max-width: 1260px;
+            width: 100%;
             margin: 0 auto;
             justify-content: space-between;
             padding: 0 10px;
@@ -466,6 +467,107 @@
             }
           }
 
+          &__executor {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+            margin-right: 10px;
+            border-radius: 8px;
+            border: 1px solid #e3e2e2;
+            padding: 2px 6px;
+            position: relative;
+            max-width: 220px;
+            width: 100%;
+
+            &Selected {
+              display: flex;
+              align-items: center;
+              border-radius: 8px;
+              max-width: 220px;
+              width: 100%;
+              margin-right: 10px;
+              justify-content: center;
+
+              p {
+                color: #252c32;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 24px;
+                max-width: 155px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+
+              .avatar {
+                margin: 0 5px;
+              }
+
+              .delete {
+                cursor: pointer;
+              }
+
+              img {
+                display: flex;
+                width: 20px;
+                height: 20px;
+              }
+            }
+            p {
+              color: #252c32;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 24px;
+            }
+
+            img {
+              transition: all 0.15s ease;
+              margin-left: 5px;
+            }
+
+            .open {
+              transform: rotate(180deg);
+            }
+
+            &Dropdown {
+              position: absolute;
+              top: 33px;
+              background: white;
+              border-radius: 8px;
+              z-index: 5;
+              padding: 10px 10px;
+              display: flex;
+              flex-direction: column;
+              row-gap: 7px;
+              width: 100%;
+
+
+              .executorDropdown__person {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                p {
+                  max-width: 155px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                }
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                }
+
+                &:hover {
+                  p {
+                    font-weight: 600;
+                  }
+                }
+              }
+            }
+          }
+
           &__back {
             cursor: pointer;
             display: flex;

src/redux/projectsTrackerSlice.js

@@ -122,6 +122,11 @@ export const projectsTrackerSlice = createSlice({
         );
       });
     },
+    filteredExecutorTasks: (state, action) => {
+      state.projectBoard.columns.forEach((column) => {
+        column.tasks = column.tasks.filter((task) => task.executor_id === action.payload);
+      });
+    },
     setColumnName: (state, action) => {
       state.columnName = action.payload;
     },
@@ -174,6 +179,7 @@ export const {
   addPersonToProject,
   filterCreatedByMe,
   filteredParticipateTasks,
+  filteredExecutorTasks,
   movePositionProjectTask,
 } = projectsTrackerSlice.actions;