From 66f815f4f02ddf33921e878458e4dc46f47ab653 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Mon, 23 Oct 2023 16:42:12 +0300
Subject: [PATCH] Update my task

---
 src/assets/images/downloadExel.svg   |  12 ++
 src/assets/images/statusTimeTask.svg |  12 ++
 src/pages/Tracker/Tracker.jsx        | 164 ++++++++++++++++-----------
 src/pages/Tracker/tracker.scss       | 138 +++++++++++++++++++++-
 4 files changed, 255 insertions(+), 71 deletions(-)
 create mode 100644 src/assets/images/downloadExel.svg
 create mode 100644 src/assets/images/statusTimeTask.svg

diff --git a/src/assets/images/downloadExel.svg b/src/assets/images/downloadExel.svg
new file mode 100644
index 00000000..e2b10ca2
--- /dev/null
+++ b/src/assets/images/downloadExel.svg
@@ -0,0 +1,12 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1688_1304)">
+<path d="M25.0845 15.2539V8.81955C25.0845 8.63538 24.9994 8.46521 24.879 8.33059L17.6651 0.755356C17.5305 0.613724 17.3391 0.535645 17.1479 0.535645H5.71047C3.59897 0.535645 1.91235 2.25754 1.91235 4.3693V25.9967C1.91235 28.1085 3.59897 29.8021 5.71047 29.8021H14.7386C16.4462 32.6365 19.5502 34.5356 23.0861 34.5356C28.4574 34.5356 32.8439 30.1704 32.8439 24.792C32.8511 20.0938 29.4779 16.1681 25.0845 15.2539ZM17.8566 3.02302L22.6964 8.11788H19.5572C18.6218 8.11788 17.8566 7.34565 17.8566 6.41025V3.02302ZM5.71047 28.3847C4.38546 28.3847 3.32971 27.3217 3.32971 25.9967V4.3693C3.32971 3.03703 4.38546 1.953 5.71047 1.953H16.4392V6.41025C16.4392 8.13215 17.8353 9.53523 19.5572 9.53523H23.6671V15.0695C23.4547 15.0625 23.2845 15.0412 23.1003 15.0412C20.6272 15.0412 18.3525 15.9909 16.6377 17.4791H7.63807C7.24819 17.4791 6.92939 17.7979 6.92939 18.1875C6.92939 18.5774 7.24819 18.8962 7.63807 18.8962H15.3197C14.8164 19.6048 14.3983 20.3135 14.0725 21.093H7.63807C7.24819 21.093 6.92939 21.4118 6.92939 21.8017C6.92939 22.1913 7.24819 22.5104 7.63807 22.5104H13.6118C13.4346 23.2191 13.3425 24.0056 13.3425 24.792C13.3425 26.0675 13.5905 27.329 14.0369 28.392H5.71047V28.3847ZM23.0933 33.1255C18.5014 33.1255 14.7669 29.3909 14.7669 24.7991C14.7669 20.2072 18.4942 16.4726 23.0933 16.4726C27.6922 16.4726 31.4195 20.2072 31.4195 24.7991C31.4195 29.3909 27.6852 33.1255 23.0933 33.1255Z" fill="#6F6F6F"/>
+<path d="M7.63812 15.3461H14.8165C15.2063 15.3461 15.5251 15.027 15.5251 14.6374C15.5251 14.2475 15.2063 13.9287 14.8165 13.9287H7.63812C7.24824 13.9287 6.92944 14.2475 6.92944 14.6374C6.92944 15.027 7.24824 15.3461 7.63812 15.3461Z" fill="#6F6F6F"/>
+<path d="M26.7213 24.6501L23.809 27.7893V20.0512C23.809 19.6613 23.49 19.3425 23.1003 19.3425C22.7105 19.3425 22.3917 19.6613 22.3917 20.0512V27.7893L19.4579 24.6501C19.1886 24.3668 18.7352 24.3456 18.4516 24.6148C18.1681 24.8841 18.1469 25.3305 18.4164 25.614L22.5618 30.0713C22.6965 30.2129 22.8806 30.298 23.0791 30.298C23.2775 30.298 23.4617 30.2129 23.5963 30.0713L27.749 25.614C28.0183 25.3305 28.004 24.8771 27.7205 24.6148C27.43 24.3456 26.9908 24.3668 26.7213 24.6501Z" fill="#6F6F6F"/>
+</g>
+<defs>
+<clipPath id="clip0_1688_1304">
+<rect width="34" height="34" fill="white" transform="translate(0.38501 0.535645)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/statusTimeTask.svg b/src/assets/images/statusTimeTask.svg
new file mode 100644
index 00000000..34d66a32
--- /dev/null
+++ b/src/assets/images/statusTimeTask.svg
@@ -0,0 +1,12 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1688_1309)">
+<path d="M25.1663 15.0642V8.62986C25.1663 8.44568 25.0812 8.27552 24.9608 8.14089L17.7469 0.565658C17.6123 0.424026 17.4209 0.345947 17.2297 0.345947H5.79226C3.68075 0.345947 1.99414 2.06784 1.99414 4.17961V25.807C1.99414 27.9188 3.68075 29.6124 5.79226 29.6124H14.8204C16.528 32.4468 19.632 34.3459 23.1678 34.3459C28.5392 34.3459 32.9257 29.9807 32.9257 24.6024C32.9329 19.9041 29.5597 15.9784 25.1663 15.0642ZM17.9384 2.83332L22.7782 7.92818H19.639C18.7036 7.92818 17.9384 7.15595 17.9384 6.22056V2.83332ZM5.79226 28.195C4.46725 28.195 3.4115 27.132 3.4115 25.807V4.17961C3.4115 2.84733 4.46725 1.7633 5.79226 1.7633H16.521V6.22056C16.521 7.94245 17.9171 9.34554 19.639 9.34554H23.7489V14.8798C23.5365 14.8728 23.3663 14.8515 23.1821 14.8515C20.709 14.8515 18.4343 15.8012 16.7194 17.2894H7.71986C7.32998 17.2894 7.01118 17.6082 7.01118 17.9978C7.01118 18.3877 7.32998 18.7065 7.71986 18.7065H15.4014C14.8982 19.4151 14.4801 20.1238 14.1542 20.9033H7.71986C7.32998 20.9033 7.01118 21.2221 7.01118 21.612C7.01118 22.0016 7.32998 22.3207 7.71986 22.3207H13.6936C13.5164 23.0294 13.4243 23.8159 13.4243 24.6024C13.4243 25.8778 13.6723 27.1393 14.1187 28.2023H5.79226V28.195ZM23.1751 32.9358C18.5832 32.9358 14.8487 29.2012 14.8487 24.6094C14.8487 20.0175 18.576 16.2829 23.1751 16.2829C27.774 16.2829 31.5013 20.0175 31.5013 24.6094C31.5013 29.2012 27.767 32.9358 23.1751 32.9358Z" fill="#6F6F6F"/>
+<path d="M7.71991 15.1564H14.8983C15.2881 15.1564 15.6069 14.8373 15.6069 14.4477C15.6069 14.0578 15.2881 13.739 14.8983 13.739H7.71991C7.33003 13.739 7.01123 14.0578 7.01123 14.4477C7.01123 14.8373 7.33003 15.1564 7.71991 15.1564Z" fill="#6F6F6F"/>
+<path d="M27.4895 22.0378C27.1006 21.6489 26.4698 21.6489 26.0808 22.0378L22.1368 25.9819L20.8489 24.694C20.4599 24.305 19.8292 24.305 19.4402 24.694C19.0512 25.0829 19.0512 25.7136 19.4402 26.1027L21.4324 28.0948C21.6269 28.2893 21.8818 28.3866 22.1368 28.3866C22.3917 28.3866 22.6466 28.2893 22.8411 28.0948L27.4895 23.4464C27.8785 23.0575 27.8785 22.4267 27.4895 22.0378Z" fill="#6F6F6F"/>
+</g>
+<defs>
+<clipPath id="clip0_1688_1309">
+<rect width="34" height="34" fill="white" transform="translate(0.466797 0.345947)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx
index db011d83..fb615197 100644
--- a/src/pages/Tracker/Tracker.jsx
+++ b/src/pages/Tracker/Tracker.jsx
@@ -27,13 +27,15 @@ import addProjectImg from "assets/icons/addProjectImg.svg";
 import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
 import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
 import filterIcon from "assets/icons/filterIcon.svg";
+import plus from "assets/icons/plus.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 downloadExel from "assets/images/downloadExel.svg";
 import noProjects from "assets/images/noProjects.png";
+import statusTimeTask from "assets/images/statusTimeTask.svg";
 
 import "./tracker.scss";
 
@@ -123,6 +125,14 @@ export const Tracker = () => {
     );
   }
 
+  function toggleDescTask(e) {
+    e.target.closest("img").classList.toggle("open-desc-item");
+    e.target
+      .closest("td")
+      .querySelector(".taskList__table__name-project")
+      .classList.toggle("hide-desc");
+  }
+
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -286,6 +296,7 @@ export const Tracker = () => {
               </div>
             </div>
 
+            {loader && <Loader style="green" />}
             <table className="taskList__table">
               <thead>
                 <tr>
@@ -298,78 +309,93 @@ export const Tracker = () => {
               </thead>
 
               <tbody>
-                <tr>
-                  <td>
-                    <div className="taskList__table__title-task">
-                      Разработка трекера <img src="#" alt="#" />
-                    </div>
-                    <div className="taskList__table__name-project">
-                      <h4>Проект:</h4>
-                      <p>Туман</p>
-                    </div>
-                  </td>
-                  <td>
-                    <div className="task-status">In Progress</div>
-                  </td>
-                  <td>14ч 25 мин</td>
-                  <td>13.09.2020</td>
-                  <td>20.09.2020</td>
-                </tr>
-
-                <tr>
-                  <td>
-                    <div className="taskList__table__title-task">
-                      Разработка трекера <img src="#" alt="#" />
-                    </div>
-                    <div className="taskList__table__name-project">
-                      <h4>Проект:</h4>
-                      <p>Туман</p>
-                    </div>
-                  </td>
-                  <td>
-                    <div className="task-status">In Progress</div>
-                  </td>
-                  <td>14ч 25 мин</td>
-                  <td>13.09.2020</td>
-                  <td>20.09.2020</td>
-                </tr>
+                {!loader && (
+                  <>
+                    {Boolean(filteredAllTasks.length) &&
+                      filteredAllTasks.map((task, index) => {
+                        return (
+                          <tr key={task.id}>
+                            <td>
+                              <div className="taskList__table__title-task">
+                                {task.title}
+                                <div
+                                  onClick={(e) => {
+                                    toggleDescTask(e);
+                                  }}
+                                >
+                                  <img src={plus} alt="#" />
+                                </div>
+                              </div>
+                              <div className="taskList__table__name-project hide-desc">
+                                <h4>Проект:</h4>
+                                <p>
+                                  {projects.map((project) => {
+                                    if (project.id == task.project_id) {
+                                      return project.name;
+                                    }
+                                  })}
+                                </p>
+                              </div>
+                            </td>
+                            <td>
+                              <div className="task-status">
+                                {task.status == 1 ? "Active" : "Close"}
+                              </div>
+                            </td>
+                            <td>
+                              {task.timers.map((item) => {
+                                let time = new Date(item.deltaSeconds * 1000)
+                                  .toISOString()
+                                  .slice(11, 19);
+                                return `${time}`;
+                              })}
+                            </td>
+                            <td>
+                              {new Date(task.created_at).toLocaleDateString()}
+                            </td>
+                            <td>
+                              {new Date(task.dead_line).toLocaleDateString()}
+                            </td>
+                          </tr>
+                        );
+                      })}
+                  </>
+                )}
               </tbody>
             </table>
 
-            {loader && <Loader style="green" />}
-            {!loader && (
-              <div className="taskList__wrapper">
-                {Boolean(filteredAllTasks.length) &&
-                  filteredAllTasks.map((task) => {
-                    return (
-                      <div className="task" key={task.id}>
-                        <div className="task__info">
-                          <h5>{task.title}</h5>
-                          <p
-                            dangerouslySetInnerHTML={{
-                              __html: task.description,
-                            }}
-                          />
-                        </div>
-                        <div className="task__person">
-                          <img
-                            src={
-                              task.user?.avatar
-                                ? urlForLocal(task.user.avatar)
-                                : avatarMok
-                            }
-                            alt="avatar"
-                          />
-                          <div className="task__project">
-                            <p>{task.user.fio}</p>
-                            <span>{getCorrectDate(task.created_at)}</span>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
+            <div className="taskList__time">
+              <div className="taskList__time-compited">
+                <h4>Учет моего рабочего времени за день</h4>
+                <h3>
+                  Задач выполнено: <p>{2}</p>
+                </h3>
               </div>
-            )}
+              <div className="taskList__time-all">
+                <h3>Общее время:</h3>
+                <p>{"4 ч 34 мин"}</p>
+              </div>
+              <div className="taskList__time-status">
+                <div>
+                  <img src={statusTimeTask} alt="#" />
+                  <p>Сверка пройдена</p>
+                </div>
+                <div>
+                  <img src={downloadExel} alt="#" />
+                  <p>Скачать Exel отчет</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="taskList__end">
+              <BaseButton styles={"close-day"}>
+                Закрыть сегоднящний день
+              </BaseButton>
+              <p>
+                Нажимая кнопку - “Закрыть сегодняшний день” - вы отправляете
+                потрачеенное время на сверку
+              </p>
+            </div>
           </div>
           <div
             className={
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index cdbc777b..0dab2fa3 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -1322,13 +1322,21 @@
 
             tbody {
               color: #000;
+              tr {
+                background-color: white;
+
+                &:nth-child(2n) {
+                  background-color: rgba(241, 241, 241, 0.23);
+                }
+              }
+
               td {
                 height: 65px;
                 border-bottom: 1px solid rgba(241, 241, 241, 1);
 
                 &:first-child {
                   max-width: 275px;
-
+                  padding-left: 10px;
                   color: #111112;
                   font-size: 17px;
                   font-weight: 700;
@@ -1349,11 +1357,33 @@
             }
 
             &__title-task {
+              display: flex;
+              gap: 10px;
+              align-items: center;
+              transition: 0.4s;
+
+              div {
+                cursor: pointer;
+
+                width: 15px;
+                height: 15px;
+                display: flex;
+                background-color: #000;
+                align-items: center;
+                justify-content: center;
+                border-radius: 90px;
+
+                img {
+                  transition: 0.4s;
+                  transform: rotate(0deg);
+                }
+              }
             }
 
             &__name-project {
-              display: none;
+              display: flex;
               flex-direction: column;
+              transition: 0.4s;
 
               h4 {
                 margin: 0;
@@ -1365,6 +1395,7 @@
 
               p {
                 color: #000;
+                margin-top: -5px;
                 font-size: 14px;
                 font-weight: 400;
                 line-height: 32px;
@@ -1372,6 +1403,99 @@
             }
           }
 
+          &__time {
+            padding: 30px 40px 20px 40px;
+            border-radius: 12px;
+            background: #e1fccf;
+            width: 100%;
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-between;
+
+            h3 {
+              color: #111112;
+              font-size: 17px;
+              font-weight: 700;
+              line-height: 32px;
+              margin: 0;
+            }
+
+            &-compited {
+              display: flex;
+              flex-direction: column;
+
+              p {
+                font-weight: 700;
+                color: #1458dd;
+                font-size: 22px;
+              }
+
+              h4 {
+                color: #5b6871;
+                font-size: 14px;
+                margin-bottom: 12px;
+              }
+
+              h3 {
+                display: flex;
+                gap: 20px;
+              }
+            }
+
+            &-all {
+              display: flex;
+              gap: 20px;
+              align-items: flex-end;
+
+              p {
+                font-weight: 700;
+                color: #1458dd;
+                font-size: 22px;
+              }
+            }
+
+            &-status {
+              display: flex;
+              gap: 64px;
+
+              div {
+                display: flex;
+                flex-direction: row;
+                align-items: flex-end;
+                gap: 10px;
+
+                p {
+                  width: 55px;
+                  font-size: 12px;
+                  color: #5b6871;
+                  font-weight: 400;
+                }
+              }
+            }
+          }
+
+          &__end {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 24px;
+            margin: 24px 0 40px 0;
+
+            .close-day {
+              padding: 8px 25px;
+              font-size: 17px;
+              font-style: normal;
+              font-weight: 500;
+            }
+
+            p {
+              color: #5b6871;
+              font-size: 14px;
+              font-style: normal;
+              font-weight: 400;
+            }
+          }
+
           &__wrapper {
             margin-top: 10px;
             display: flex;
@@ -1499,6 +1623,16 @@
         }
       }
 
+      .hide-desc {
+        display: none !important;
+        transition: 0.4s;
+      }
+
+      .open-desc-item {
+        transition: 0.4s !important;
+        transform: rotate(45deg) !important;
+      }
+
       &__archive {
         max-width: 1160px;
         padding: 0 20px;