Merge pull request #135 from apuc/fix-tracker-and-statistics

Fix tracker and statistics

src/assets/icons/archiveTrackerProjects.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5978 23.2816C8.08809 23.2816 4.57834 23.2686 1.06935 23.2939C0.45413 23.2985 0.0894402 22.9139 0.0940371 22.3217C0.11932 18.9015 0.110126 15.4814 0.100932 12.0605C0.100166 11.7127 0.184443 11.4193 0.379047 11.132C1.25783 9.83334 2.12128 8.52398 2.99776 7.22381C3.12571 7.03457 3.17474 6.84534 3.17398 6.61855C3.16708 4.81886 3.17015 3.01993 3.17015 1.22023C3.17015 0.561337 3.43217 0.300078 4.09643 0.300078C7.79619 0.298546 11.4975 0.302377 15.1988 0.293949C15.5826 0.293183 15.873 0.408872 16.1442 0.685454C17.3057 1.8684 18.481 3.03831 19.6601 4.20363C19.9137 4.45417 20.0746 4.72998 20.0209 5.08471C19.8179 6.41705 20.2569 7.52645 21.079 8.56535C21.7256 9.38284 22.252 10.2946 22.8366 11.1611C23.0135 11.4231 23.0932 11.6982 23.0925 12.0207C23.0848 15.4669 23.0879 18.9123 23.0879 22.3584C23.0879 23.0189 22.8266 23.2816 22.1646 23.2816C18.6419 23.2824 15.1199 23.2816 11.5971 23.2816H11.5978ZM15.1421 5.64017C15.0976 5.57965 15.0226 5.56203 14.9827 5.61029C14.949 5.6509 15.0218 5.68461 15.0616 5.70989C15.588 6.2462 16.1074 6.78941 16.643 7.31652C16.8682 7.5387 16.9671 7.78694 16.964 8.09953C16.9556 8.96682 16.9686 9.83487 16.9556 10.7022C16.9525 10.9404 17.0023 11.0485 17.2666 11.0278C17.5708 11.0048 17.8803 11.004 18.1845 11.0285C18.4519 11.05 18.4955 10.9374 18.494 10.7029C18.4856 9.13384 18.4825 7.56475 18.4948 5.99567C18.4971 5.73288 18.4381 5.6555 18.1646 5.65856C17.1571 5.66929 16.1496 5.64937 15.1428 5.64094L15.1421 5.64017ZM14.6127 5.26246C14.6441 5.29234 14.6763 5.32222 14.7077 5.35287C14.7605 5.28698 14.7452 5.23105 14.6831 5.18201C14.6747 4.16303 14.6632 3.14328 14.6625 2.12429C14.6625 1.93429 14.6556 1.82932 14.4096 1.83009C11.2615 1.83852 8.11261 1.83698 4.96448 1.83162C4.77218 1.83162 4.6902 1.87299 4.70169 2.08292C4.71931 2.38785 4.72927 2.69661 4.69939 3.00001C4.66875 3.31183 4.78826 3.37083 5.07787 3.37006C7.44912 3.35857 9.8196 3.36623 12.1908 3.3601C12.5303 3.35933 12.7976 3.45817 13.0382 3.7064C13.5508 4.23658 14.0863 4.74531 14.6127 5.26323V5.26246ZM11.6162 12.5578C8.42597 12.5578 5.23493 12.5616 2.04467 12.5517C1.74816 12.5509 1.63094 12.5915 1.63324 12.9332C1.64933 15.7534 1.64627 18.5736 1.63554 21.3946C1.63477 21.6758 1.69607 21.7532 1.98797 21.7532C8.39455 21.744 14.8011 21.744 21.2077 21.7532C21.5004 21.7532 21.5609 21.6743 21.5594 21.3946C21.5487 18.5744 21.5494 15.7542 21.5594 12.9332C21.5602 12.6444 21.4981 12.5501 21.1878 12.5517C17.9975 12.5647 14.8065 12.5593 11.6162 12.5585V12.5578ZM10.0418 11.0224C11.725 11.0224 13.409 11.0163 15.0923 11.0285C15.3589 11.0308 15.4416 10.9634 15.4317 10.693C15.411 10.1329 15.411 9.57055 15.4309 9.00972C15.4401 8.76149 15.3551 8.71935 15.1291 8.72318C14.2495 8.7362 13.3692 8.72931 12.4889 8.72701C11.8729 8.72548 11.5971 8.45349 11.5963 7.8467C11.594 6.96639 11.5856 6.08684 11.6024 5.20653C11.607 4.9537 11.5373 4.89164 11.2891 4.89317C9.19748 4.90313 7.10588 4.90313 5.01428 4.89317C4.75915 4.89164 4.70016 4.96749 4.70169 5.21189C4.71165 7.03534 4.71471 8.85956 4.69863 10.683C4.69633 10.9864 4.79899 11.0301 5.06868 11.0278C6.72664 11.0155 8.38459 11.0216 10.0426 11.0224H10.0418ZM17.2352 4.12855C16.8943 3.77306 16.5441 3.4076 16.1948 3.04368C16.1948 3.32179 16.2001 3.61293 16.1925 3.9033C16.1886 4.05423 16.2185 4.13928 16.3978 4.13238C16.6974 4.12012 16.9985 4.12932 17.2344 4.12932L17.2352 4.12855ZM13.1317 6.02632C13.1317 6.39177 13.1302 6.68291 13.1325 6.97328C13.1325 7.06982 13.1056 7.1901 13.2658 7.19087C13.5952 7.19164 13.9239 7.19087 14.2457 7.19087C13.8703 6.7986 13.5247 6.43697 13.1325 6.02555L13.1317 6.02632ZM2.31588 11.0216C2.58634 11.0216 2.78784 11.0201 2.98857 11.0216C3.0851 11.0224 3.16785 11.0147 3.16708 10.8868C3.16555 10.5428 3.16708 10.1988 3.16708 9.74906C2.85296 10.2187 2.60702 10.5865 2.31588 11.0209V11.0216ZM20.093 9.85326C20.07 9.85862 20.0462 9.86398 20.0232 9.86858V10.313C20.0232 10.8058 20.274 11.0393 20.7756 11.0132C20.7902 11.0132 20.8032 10.9818 20.8285 10.9504C20.5856 10.5872 20.3397 10.2202 20.0937 9.85326H20.093Z" fill="#050505"/>
+<path d="M15.1413 5.64017C16.1488 5.6486 17.1563 5.66852 18.163 5.6578C18.4373 5.65473 18.4955 5.73211 18.4932 5.9949C18.481 7.56399 18.4833 9.13307 18.4925 10.7022C18.494 10.9366 18.4503 11.05 18.1829 11.0278C17.8788 11.0033 17.57 11.0033 17.2651 11.027C17.0008 11.0469 16.951 10.9397 16.954 10.7014C16.9663 9.8341 16.954 8.96605 16.9625 8.09876C16.9655 7.78617 16.8667 7.53794 16.6414 7.31575C16.1059 6.78864 15.5864 6.24544 15.0601 5.70913C15.0869 5.68614 15.1137 5.66316 15.1405 5.63941L15.1413 5.64017Z" fill="#FEFEFE"/>
+<path d="M14.6824 5.18201C14.7444 5.23105 14.7598 5.28698 14.7069 5.35287C14.6755 5.32299 14.6433 5.29311 14.6119 5.26246C14.6356 5.23564 14.6586 5.20883 14.6824 5.18125V5.18201Z" fill="#FEFEFE"/>
+<path d="M15.0609 5.70989C15.021 5.68461 14.949 5.6509 14.9819 5.61029C15.0218 5.56203 15.0969 5.57888 15.1413 5.64017C15.1145 5.66316 15.0877 5.68614 15.0609 5.70989Z" fill="#FEFEFE"/>
+<path d="M11.5756 17.9193C10.3505 17.9193 9.12547 17.9209 7.89962 17.9193C7.34109 17.9186 7.00092 17.6297 6.99709 17.1585C6.99326 16.6881 7.33803 16.384 7.88429 16.3832C10.3605 16.3817 12.8359 16.3817 15.3122 16.3832C15.86 16.3832 16.1986 16.6858 16.194 17.1616C16.1894 17.619 15.8531 17.917 15.3275 17.9178C14.0771 17.9209 12.826 17.9186 11.5749 17.9193H11.5756Z" fill="#050505"/>
+</svg>

src/components/Common/ModalLayout/modalLayout.scss

@@ -14,7 +14,7 @@
   &__content {
     position: relative;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-    border-radius: 24px;
+    border-radius: 10px;
     padding: 25px;
     display: flex;
     flex-direction: column;
@@ -117,3 +117,17 @@
 .modal-layout.active {
   transform: scale(1);
 }
+
+.createProject {
+  background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
+  .title-project {
+    margin-top: 20px;
+  }
+  .button-add {
+    margin-top: 8px;
+  }
+  .exit {
+    top: 16px;
+    right: 15px;
+  }
+}

src/components/Modal/ModalSelect/modalSelect.scss

@@ -5,13 +5,13 @@
     background: #e1fccf;
     border-radius: 12px;
     transform: scale(0);
-    bottom: -148px;
+    bottom: -90px;
     right: -120px;
 
     @media (max-width: 1050px) {
       right: 10px;
       padding-top: 10px;
-      bottom: -160px;
+      bottom: -75px;
     }
 
     &-menu {

src/pages/Tracker/Tracker.jsx

@@ -24,10 +24,13 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
 
 import addProjectImg from "assets/icons/addProjectImg.svg";
+import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
+import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import archive from "assets/images/archiveIcon.png";
+import mockAvatar from "assets/images/avatarMok.png";
 import avatarMok from "assets/images/avatarMok.png";
 import noProjects from "assets/images/noProjects.png";
 
@@ -68,7 +71,7 @@ export const Tracker = () => {
       // }, []))
     });
     apiRequest(
-      `/task/get-user-tasks?user_id=${localStorage.getItem("id")}`
+      `/task/get-user-tasks?user_id=${localStorage.getItem("id")}&expand=timers`
     ).then((el) => {
       const allTasks = el ? el.filter((item) => item.status !== 0) : [];
       const completedTasks = el ? el.filter((item) => item.status === 0) : [];
@@ -302,6 +305,21 @@ export const Tracker = () => {
                   {`${filterCompleteTasks.length} 
                     ${caseOfNum(filterCompleteTasks.length, "tasks")}`}
                 </p>
+
+                <div className="archive__tasks-period">
+                  <div className="buttons-month">
+                    <button>
+                      <img src={arrowViewReport} alt="<"></img>
+                    </button>
+                    <button>
+                      <img src={arrowViewReport} alt=">"></img>
+                    </button>
+                  </div>
+                  <div className="month-period">
+                    <h2>Сентябрь,</h2>
+                    <h3>2023</h3>
+                  </div>
+                </div>
                 <div className="archive__tasks__search">
                   <img src={search} alt="search" />
                   <input
@@ -311,6 +329,13 @@ export const Tracker = () => {
                   />
                 </div>
               </div>
+
+              <div className="archive__title-table">
+                <p>Задача</p>
+                <p>Потраченное время</p>
+                <p>Дата окончания</p>
+              </div>
+
               <div className="archive__tasksWrapper">
                 {loader && <Loader style="green" />}
                 {!loader && (
@@ -330,15 +355,17 @@ export const Tracker = () => {
                                 }}
                               />
                             </div>
+                            <div className="archive__completeTask__time">
+                              <p>
+                                {task.timers.map((item) => {
+                                  let time = new Date(item.deltaSeconds * 1000)
+                                    .toISOString()
+                                    .slice(11, 19);
+                                  return `${time}`;
+                                })}
+                              </p>
+                            </div>
                             <div className="archive__completeTask__info">
-                              <img
-                                src={
-                                  task.user?.avatar
-                                    ? urlForLocal(task.user.avatar)
-                                    : avatarMok
-                                }
-                                alt="avatar"
-                              />
                               <div className="archive__completeTask__info__project">
                                 {/*<span>Проект</span>*/}
                                 <p>{getCorrectDate(task.updated_at)}</p>
@@ -349,7 +376,7 @@ export const Tracker = () => {
                       })
                     ) : (
                       <div className="archive__noItem">
-                        <p>В архиве задач нет</p>
+                        <p>В данном месяце у вас не было задач</p>
                       </div>
                     )}
                   </>
@@ -357,7 +384,7 @@ export const Tracker = () => {
               </div>
             </div>
             <div className="archive__projects">
-              <div className="archive__title">
+              <div className="archive__projects-title">
                 <h3>Архив проектов:</h3>
                 <p>
                   {`${
@@ -376,18 +403,31 @@ export const Tracker = () => {
                 ) ? (
                   projects.map((project, index) => {
                     return project.status === 10 ? (
-                      <div className="archive__completeTask" key={index}>
+                      <div
+                        className="archive__completeTask-project"
+                        key={index}
+                      >
                         <div className="archive__completeTask__description">
-                          <p>{project.name}</p>
+                          <p className="project-title-archive">
+                            {project.name}
+                          </p>
                           <p className="date">{project.date}</p>
                         </div>
+                        <div className="archive__completeTask__creator">
+                          <img src={mockAvatar} alt="#" />
+                          <div className="creator-title">
+                            <h4>Создатель проекта:</h4>
+                            <p>{"Василий Тарасов"}</p>
+                          </div>
+                        </div>
                       </div>
                     ) : (
                       ""
                     );
                   })
                 ) : (
-                  <div className="archive__noItem">
+                  <div className="archive__noItem-project">
+                    <img src={archiveTrackerProjects} alt="#" />
                     <p>В архиве проектов нет</p>
                   </div>
                 )}

src/pages/Tracker/tracker.scss

@@ -1356,23 +1356,14 @@
         padding: 0 20px;
         margin: 0 auto;
         display: flex;
-        column-gap: 28px;
-
-        @media (max-width: 1100px) {
         flex-direction: column;
-          row-gap: 20px;
-        }
-
-        @media (max-width: 650px) {
-          padding-bottom: 20px;
-        }
 
         .archive {
           &__title {
             padding-bottom: 8px;
             display: flex;
             align-items: center;
-            color: #1458dd;
+            color: #000;
             min-height: 48px;
 
             h3 {
@@ -1399,14 +1390,29 @@
             @media (max-width: 450px) {
               flex-wrap: wrap;
             }
+
+            &-table {
+              margin: 29px 0 0 0;
+              height: 67px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              background: #f1f1f1;
+              color: #5b6871;
+              font-size: 14px;
+              font-weight: 400;
+              border-radius: 12px;
+              padding-left: 15px;
+              padding-right: 15px;
+              margin-right: -6px;
+            }
           }
 
           &__tasksWrapper {
-            margin-top: 10px;
+            margin-top: 20px;
             display: flex;
             flex-direction: column;
             row-gap: 15px;
-            max-height: 400px;
             overflow-y: auto;
             margin-right: -16px;
             padding-right: 10px;
@@ -1437,11 +1443,12 @@
           &__completeTask {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             cursor: pointer;
             transition: all 0.3s ease;
             background: #f1f1f1;
             border-radius: 12px;
-            padding: 12px 42px 7px 32px;
+            padding: 12px 15px 7px 16px;
 
             &:hover {
               transform: scale(0.99);
@@ -1460,19 +1467,15 @@
 
             .completeTask__title {
               font-weight: 700;
-              font-size: 20px;
+              font-size: 18px;
               line-height: 32px;
             }
 
-            &__description {
+            &__time {
+              p {
+                color: #000;
                 font-size: 14px;
-              font-weight: 500;
+                font-style: normal;
-
-              .date {
-                font-weight: 500;
-                font-size: 16px;
-                line-height: 24px;
-                color: #6f6f6f;
               }
             }
 
@@ -1502,6 +1505,76 @@
               }
             }
 
+            &-project {
+              background: #f1f1f1;
+              width: 328px;
+              max-width: 328px;
+              border-radius: 8px;
+              display: flex;
+              flex-direction: column;
+              padding: 23px 23px 23px 33px;
+              transition: 0.4s;
+              margin-bottom: 15px;
+
+              .project-title-archive {
+                width: 274px;
+                max-width: 274px;
+                color: #111112;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 700;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+
+              &:hover {
+                cursor: pointer;
+                transform: scale(0.99);
+                box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+                transition: 0.4s;
+              }
+            }
+
+            &__description {
+              width: 70px;
+              max-width: 70px;
+              font-size: 14px;
+              font-weight: 500;
+
+              .date {
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 24px;
+                color: #6f6f6f;
+              }
+            }
+
+            &__creator {
+              display: flex;
+              align-items: center;
+              gap: 13px;
+
+              img {
+                width: 31.366px;
+                height: 29px;
+              }
+
+              h4 {
+                color: #5b6871;
+                font-size: 10px;
+                font-style: normal;
+                font-weight: 400;
+              }
+
+              p {
+                color: #2d4a17;
+                font-size: 13px;
+                font-style: normal;
+                font-weight: 500;
+              }
+            }
+
             @media (max-width: 740px) {
               flex-direction: column;
               padding: 10px 20px;
@@ -1513,15 +1586,58 @@
           }
 
           &__tasks {
-            min-height: 400px;
-            max-height: 450px;
             padding-right: 15px;
-            width: 65%;
 
             @media (max-width: 1100px) {
               width: 100%;
             }
 
+            &-period {
+              display: flex;
+              align-items: center;
+              margin-left: 73px;
+
+              .buttons-month {
+                display: flex;
+                gap: 34px;
+
+                button {
+                  width: 30px;
+                  height: 30px;
+                  background-color: #8dc63f;
+                  border-radius: 15px;
+                  border: none;
+
+                  img {
+                    width: 14px;
+                    height: 14px;
+                  }
+
+                  &:first-child {
+                    transform: rotate(-180deg);
+                  }
+                }
+              }
+
+              .month-period {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                margin-left: 62px;
+
+                h2 {
+                  color: #1458dd;
+                }
+
+                h3 {
+                  color: #252c32;
+                  font-size: 18px;
+                  font-weight: 700;
+                  margin-left: 5px;
+                }
+              }
+            }
+
             &__search {
               margin-left: auto;
               padding: 6px 12px;
@@ -1571,33 +1687,73 @@
           &__projects {
             display: flex;
             flex-direction: column;
-            width: 33%;
-            min-height: 400px;
-            max-height: 450px;
-            padding-right: 15px;
 
             @media (max-width: 1100px) {
               width: 100%;
               min-height: auto;
             }
+
+            &-title {
+              background: #e1fccf;
+              display: flex;
+              align-items: center;
+              height: 66px;
+              border-radius: 12px;
+              margin: 25px 0 0 0;
+              padding-left: 15px;
+              color: #000;
+              font-style: normal;
+
+              h3 {
+                font-size: 16px;
+                font-weight: 700;
+                margin: 0 5px 0 0;
+              }
+
+              p {
+                font-size: 16px;
+                font-weight: 300;
+              }
+            }
           }
 
           &__noItem {
-            background: #f1f1f1;
-            border-radius: 12px;
             padding: 23px 0 19px;
+            color: #6f6f6f;
 
             p {
+              font-size: 17px;
+              font-style: normal;
               font-weight: 700;
-              font-size: 22px;
+              padding-left: 15px;
-              line-height: 32px;
-              color: #111112;
-              text-align: center;
             }
 
             @media (max-width: 650px) {
               background-color: white;
             }
+
+            &-project {
+              background: #f1f1f1;
+              width: 328px;
+              height: 108px;
+              border-radius: 8px;
+              display: flex;
+              gap: 21px;
+              padding: 23px;
+              align-items: center;
+
+              p {
+                width: 105px;
+                color: #6f6f6f;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 700;
+              }
+
+              img {
+                margin-left: 10px;
+              }
+            }
           }
         }
       }