Working in paginations

2023-12-04 17:30:52 +03:00 · 2023-12-04 17:30:52 +03:00 · 154fb0dfa6
commit 154fb0dfa6
parent 856076a47e
14 changed files with 249 additions and 114 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/ArchiveTableTracker/ArchiveTableTracker.jsx
+++ b/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;
--- a/src/components/ArchiveTableTracker/archiveTableTracker.scss
+++ b/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;
+        }
+      }
+    }
+  }
+}
--- a/src/components/Common/AllMyTasksItem/AllMyTasksItem.jsx
+++ b/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;
--- a/src/components/Common/AllMyTasksItem/allMyTasksItem.scss
+++ b/src/components/Common/AllMyTasksItem/allMyTasksItem.scss
--- a/src/components/Common/PaginatedItems/PaginatedItems.jsx
+++ b/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;
--- a/src/components/Common/PaginatedItems/paginatedItems.scss
+++ b/src/components/Common/PaginatedItems/paginatedItems.scss
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/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
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/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 {
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@ -1206,7 +1206,7 @@ export const TicketFullScreen = () => {
                  >
                    <span>
                      {typeof taskPriority === "number"
-                        ? priority[taskPriority]
+                        ? `Приоритет: ${priority[taskPriority]}`
                        : "Выберите приоритет"}
                    </span>
                    <img
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/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}
--- a/src/pages/Tracker/Tracker.jsx
+++ b/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>
-                  {!loader && (
-                    <>
-                      {Boolean(filterCompleteTasks.length) ? (
-                        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>
+              <ArchiveTableTracker
+                loader={loader}
+                filterCompleteTasks={filterCompleteTasks}
+                projects={projects}
+              />
            </div>
            <div className="archive__projects">
              <div className="archive__projects-title">
--- a/src/pages/Tracker/tracker.scss
+++ b/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;
+                }
              }
            }