tasks

src/pages/ProjectTracker/ProjectTracker.js

@@ -46,6 +46,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 trackerNoTasks from "assets/icons/trackerNoTasks.svg"
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -62,6 +63,7 @@ export const ProjectTracker = () => {
   const [personListOpen, setPersonListOpen] = useState(false);
   const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
     useState(false);
+  const [filteredNoTasks, setFilteredNoTasks] = useState(false)
   const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
   const [selectedExecutor, setSelectedExecutor] = useState(null);
   const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
@@ -77,8 +79,10 @@ export const ProjectTracker = () => {
   useEffect(() => {
     const tasksHover = {};
     const columnHover = {};
+    let columnsTasksEmpty = true
     if (Object.keys(projectBoard).length) {
       projectBoard.columns.forEach((column) => {
+        if (column.tasks.length) columnsTasksEmpty = false
         setOpenColumnSelect((prevState) => ({
           ...prevState,
           [column.id]: false,
@@ -87,6 +91,11 @@ export const ProjectTracker = () => {
         column.tasks.forEach((task) => (tasksHover[task.id] = false));
       });
     }
+    if (columnsTasksEmpty && (checkBoxMyTasks || selectedExecutor || checkBoxParticipateTasks)) {
+      setFilteredNoTasks(true)
+    } else {
+      setFilteredNoTasks(false)
+    }
     setWrapperHover(columnHover);
     setTaskHover(tasksHover);
   }, [projectBoard]);
@@ -261,6 +270,8 @@ export const ProjectTracker = () => {
     dispatch(setProjectBoardFetch(projectId.id));
   }
 
+
+
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -381,7 +392,7 @@ export const ProjectTracker = () => {
                           участник
                         </div>
                         <div className="persons__list__info">
-                          В проекте - <span>“{projectBoard.name}”</span>
+                          <span>В проекте - </span><p>“{projectBoard.name}”</p>
                         </div>
                         <div className="persons__list__items">
                           {projectBoard.projectUsers?.map((person) => {
@@ -517,7 +528,7 @@ export const ProjectTracker = () => {
               )}
 
               <div className="tasks__container">
-                {Boolean(projectBoard?.columns) &&
+                {Boolean(projectBoard?.columns) && !filteredNoTasks &&
                   Boolean(projectBoard.columns.length) &&
                   projectBoard.columns.map((column) => {
                     return (
@@ -663,6 +674,15 @@ export const ProjectTracker = () => {
                       В проекте нет задач.
                     </div>
                   )}
+                {filteredNoTasks &&
+                  <div className='tasks__board__noTasks'>
+                    <div className='tasks__board__noTasksInfo'>
+                      <img src={trackerNoTasks} alt='noTasks' />
+                      <p>Пока нет подходящих задач</p>
+                    </div>
+                    <p className='tasks__board__noTasksMore'>Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени</p>
+                  </div>
+                }
               </div>
             </div>
           )}