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>
           )}

src/pages/Tracker/tracker.scss

@@ -208,7 +208,7 @@
 
           &__wrapper {
             display: flex;
-            max-width: 1260px;
+            max-width: 1280px;
             width: 100%;
             margin: 0 auto;
             justify-content: space-between;
@@ -222,8 +222,11 @@
             font-size: 22px;
             line-height: 32px;
             margin-bottom: 0;
-            max-width: 30%;
+            max-width: 21%;
             word-break: break-all;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
 
           &__add {
@@ -360,19 +363,30 @@
 
               &__info {
                 display: flex;
-                font-size: 18px;
-                line-height: 22px;
-                color: #263238;
-                font-weight: 500;
                 margin: 13px 0 10px;
+                align-items: center;
 
                 span {
+                  display: flex;
                   width: auto;
-                  height: auto;
+                  font-size: 18px;
+                  line-height: 22px;
+                  color: #263238;
+                  font-weight: 500;
+                  white-space: nowrap;
+                }
+
+                p {
                   color: #1458dd;
                   font-weight: 600;
                   font-size: 18px;
                   line-height: 22px;
+                  display: flex;
+                  max-width: 250px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  margin-left: 30px;
                 }
               }
 
@@ -839,6 +853,33 @@
             font-weight: 500;
             font-size: 25px;
           }
+
+          &__noTasks {
+            display: flex;
+            flex-direction: column;
+
+            &Info {
+              display: flex;
+              align-items: center;
+              margin-bottom: 15px;
+              img {
+                width: 27px;
+                height: 27px;
+                margin-right: 17px;
+              }
+
+              p {
+                font-weight: 700;
+                font-size: 22px;
+                line-height: 32px;
+              }
+            }
+
+            &More {
+              font-size: 14px;
+              line-height: 22px;
+            }
+          }
         }
 
         .board {