Working in paginations

package-lock.json

@@ -33,6 +33,7 @@
         "react-inlinesvg": "3.0.1",
         "react-loader-spinner": "^4.0.0",
         "react-outside-click-handler": "^1.3.0",
+        "react-paginate": "^8.2.0",
         "react-phone-input-2": "^2.14.0",
         "react-redux": "^7.2.4",
         "react-router": "latest",
@@ -21020,6 +21021,17 @@
         "react-dom": ">=16.3.0"
       }
     },
+    "node_modules/react-paginate": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz",
+      "integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==",
+      "dependencies": {
+        "prop-types": "^15"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-phone-input-2": {
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",

package.json

@@ -29,6 +29,7 @@
     "react-inlinesvg": "3.0.1",
     "react-loader-spinner": "^4.0.0",
     "react-outside-click-handler": "^1.3.0",
+    "react-paginate": "^8.2.0",
     "react-phone-input-2": "^2.14.0",
     "react-redux": "^7.2.4",
     "react-router": "latest",

src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import ReactPaginate from "react-paginate";
+
+import AllMyTasksItem from "@components/Common/AllMyTasksItem/AllMyTasksItem";
+
+const ArchiveTableTracker = ({ filterCompleteTasks, projects, loader }) => {
+  return (
+    <>
+      <table className="archive__table">
+        <thead>
+          <tr>
+            <th>Задача</th>
+            <th>Потраченное время</th>
+            <th>Дата окончания</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {!loader && (
+            <>
+              {Boolean(filterCompleteTasks.length) ? (
+                filterCompleteTasks.map((task, index) => {
+                  <AllMyTasksItem task={task} projects={projects} />;
+                })
+              ) : (
+                <div className="archive__noItem">
+                  <p>В данном месяце у вас не было задач</p>
+                </div>
+              )}
+            </>
+          )}
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default ArchiveTableTracker;

src/components/ArchiveTableTracker/archiveTableTracker.scss

@@ -0,0 +1,54 @@
+.archive {
+  &__table {
+    margin: 29px 0 0 0;
+    height: 67px;
+    width: 100%;
+    font-size: 14px;
+    font-weight: 400;
+
+    thead {
+      background: #f1f1f1;
+      color: #5b6871;
+      border-radius: 12px;
+      height: 65px;
+      background: #f1f1f1;
+      color: #5b6871;
+
+      th {
+        &:first-child {
+          padding-left: 10px;
+          border-top-left-radius: 12px;
+          border-bottom-left-radius: 12px;
+        }
+        &:last-child {
+          border-top-right-radius: 12px;
+          border-bottom-right-radius: 12px;
+        }
+      }
+    }
+
+    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;
+        }
+      }
+    }
+  }
+}

src/components/Common/AllMyTasksItem/AllMyTasksItem.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import "./allMyTasksItem.scss";
+
+const AllMyTasksItem = ({ task, projects, currentItems }) => {
+  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 (
+    <tr key={task.id}>
+      <td>
+        <div className="taskList__table__title-task">
+          <p>
+            {task.title}#{currentItems}
+          </p>
+
+          <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>
+  );
+};
+
+export default AllMyTasksItem;

src/components/Common/PaginatedItems/PaginatedItems.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+const PaginatedItems = ({ itemsPerPage, items }) => {
+  const [currentItems, setCurrentItems] = useState(null);
+  const [pageCount, setPageCount] = useState(0);
+  const [itemOffset, setItemOffset] = useState(0);
+
+  useEffect(() => {
+    const endOffset = itemOffset + itemsPerPage;
+    console.log(`Loading items from ${itemOffset} to ${endOffset}`);
+    setCurrentItems(items.slice(itemOffset, endOffset));
+    setPageCount(Math.ceil(items.length / itemsPerPage));
+  }, [itemOffset, itemsPerPage]);
+
+  const handlePageClick = (event) => {
+    const newOffset = (event.selected * itemsPerPage) % items.length;
+    console.log(
+      `User requested page number ${event.selected}, which is offset ${newOffset}`
+    );
+    setItemOffset(newOffset);
+  };
+
+  return (
+    <>
+      {/* <Items currentItems={currentItems} /> */}
+      <ReactPaginate
+        nextLabel=">"
+        onPageChange={handlePageClick}
+        pageRangeDisplayed={3}
+        marginPagesDisplayed={2}
+        pageCount={pageCount}
+        previousLabel="<"
+        pageClassName="page-item"
+        pageLinkClassName="page-link"
+        previousClassName="page-item"
+        previousLinkClassName="page-link"
+        nextClassName="page-item"
+        nextLinkClassName="page-link"
+        breakLabel="..."
+        breakClassName="page-item"
+        breakLinkClassName="page-link"
+        containerClassName="pagination"
+        activeClassName="active"
+        renderOnZeroPageCount={null}
+      />
+    </>
+  );
+};
+
+export default PaginatedItems;

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

@@ -1012,7 +1012,7 @@ export const ModalTiсket = ({
             >
               <span>
                 {typeof taskPriority === "number"
-                  ? priority[taskPriority]
+                  ? `Приоритет: ${priority[taskPriority]}`
                   : "Выберите приоритет"}
               </span>
               <img

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -23,9 +23,14 @@
   max-height: 700px;
   // overflow-y: auto;
 
+  @media (max-width: 990px) {
+    width: 96%;
+  }
+
   @media (max-width: 880px) {
     max-height: none;
     overflow-y: inherit;
+    width: 96%;
   }
 
   &::-webkit-scrollbar {
@@ -576,6 +581,14 @@
       //&:focus-within {
       //  border: 1px solid #0000004d;
       //}
+
+      @media (max-width: 880px) {
+        width: 100%;
+      }
+    }
+
+    @media (max-width: 880px) {
+      width: 100%;
     }
   }
 
@@ -1089,6 +1102,10 @@
             }
           }
         }
+
+        @media (max-width: 880px) {
+          width: 100%;
+        }
       }
 
       &-priority {

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

@@ -1206,7 +1206,7 @@ export const TicketFullScreen = () => {
                   >
                     <span>
                       {typeof taskPriority === "number"
-                        ? priority[taskPriority]
+                        ? `Приоритет: ${priority[taskPriority]}`
                         : "Выберите приоритет"}
                     </span>
                     <img

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -612,7 +612,7 @@ export const TrackerModal = ({
                   >
                     {selectedPriority
                       ? `Приоритет: ${selectedPriority.name}`
-                      : "Выберити приоритет"}
+                      : "Выберите приоритет"}
                     <img
                       className={selectPriority ? "arrow arrow--open" : "arrow"}
                       src={arrowDown}

src/pages/Tracker/Tracker.jsx

@@ -9,10 +9,11 @@ import {
   setToggleTab,
 } from "@redux/projectsTrackerSlice";
 
-import { caseOfNum, urlForLocal } from "@utils/helper";
+import { caseOfNum } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
+import ArchiveTableTracker from "@components/ArchiveTableTracker/ArchiveTableTracker";
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
@@ -438,64 +439,12 @@ export const Tracker = () => {
               </div>
 
               {loader && <Loader style="green" />}
-              <table className="archive__table">
-                <thead>
-                  <tr>
-                    <th>Задача</th>
-                    <th>Потраченное время</th>
-                    <th>Дата окончания</th>
-                  </tr>
-                </thead>
 
-                <tbody>
+              <ArchiveTableTracker
-                  {!loader && (
+                loader={loader}
-                    <>
+                filterCompleteTasks={filterCompleteTasks}
-                      {Boolean(filterCompleteTasks.length) ? (
+                projects={projects}
-                        filterCompleteTasks.map((task, index) => {
+              />
-                          return (
-                            <tr key={index}>
-                              <td className="archive__completeTask__description">
-                                <p className="completeTask__title">
-                                  {task.title}
-                                </p>
-                                <p
-                                  className="date"
-                                  dangerouslySetInnerHTML={{
-                                    __html: task.description,
-                                  }}
-                                />
-                              </td>
-                              <td className="archive__completeTask__time">
-                                <p>
-                                  {task.timers.length == 0
-                                    ? "-"
-                                    : task.timers.map((item) => {
-                                        let time = new Date(
-                                          item.deltaSeconds * 1000
-                                        )
-                                          .toISOString()
-                                          .slice(11, 19);
-                                        return `${time}`;
-                                      })}
-                                </p>
-                              </td>
-                              <td className="archive__completeTask__info">
-                                <div>
-                                  <p>{getCorrectDate(task.updated_at)}</p>
-                                </div>
-                              </td>
-                            </tr>
-                          );
-                        })
-                      ) : (
-                        <div className="archive__noItem">
-                          <p>В данном месяце у вас не было задач</p>
-                        </div>
-                      )}
-                    </>
-                  )}
-                </tbody>
-              </table>
             </div>
             <div className="archive__projects">
               <div className="archive__projects-title">

src/pages/Tracker/tracker.scss

@@ -1932,59 +1932,6 @@
             }
           }
 
-          &__table {
-            margin: 29px 0 0 0;
-            height: 67px;
-            width: 100%;
-            font-size: 14px;
-            font-weight: 400;
-
-            thead {
-              background: #f1f1f1;
-              color: #5b6871;
-              border-radius: 12px;
-              height: 65px;
-              background: #f1f1f1;
-              color: #5b6871;
-
-              th {
-                &:first-child {
-                  padding-left: 10px;
-                  border-top-left-radius: 12px;
-                  border-bottom-left-radius: 12px;
-                }
-                &:last-child {
-                  border-top-right-radius: 12px;
-                  border-bottom-right-radius: 12px;
-                }
-              }
-            }
-
-            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;
-                }
-              }
-            }
-          }
-
           &__tasksWrapper {
             margin-top: 20px;
             display: flex;
@@ -2117,6 +2064,13 @@
                 font-size: 14px;
                 line-height: 24px;
                 color: #6f6f6f;
+
+                p {
+                  overflow: hidden;
+                  max-width: 260px;
+                  max-height: 120px;
+                  text-overflow: ellipsis;
+                }
               }
             }