LogHistory components added

ubclaunchpad · Dec 4, 2024 · 143883b · 143883b
1 parent a977dd5
commit 143883b
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 178 deletions.
diff --git a/frontend/src/components/LogHistory/LogTable.css b/frontend/src/components/LogHistory/LogTable.css
@@ -0,0 +1,76 @@
+/* Logs Table */
+.logs-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    border-radius: 20px;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  .logs-table th {
+    background: #333A3F;
+    color: white;
+    text-align: left;
+    padding: 13px 24px;
+    font-weight: 700;
+    font-size: 17px;
+    white-space: nowrap;
+    letter-spacing: 0.5px;
+  }
+
+  .logs-table th:first-child {
+    border-top-left-radius: 20px;
+  }
+
+  .logs-table th:last-child {
+    border-top-right-radius: 20px;
+  }
+
+  .logs-table td {
+    color: #1E1E1E;
+    font-size: 15px;
+    padding: 8px 24px;
+  }
+
+  .logs-table td:not(.checkbox-column) {
+    text-align: left;
+    padding: 16px 24px;
+  }
+
+  /* Selected Row */
+  .logs-table tr.selected {
+    background-color: #D3E4FF;
+  }
+
+  /* Hover and Even Rows */
+  .logs-table tr:not(.selected):nth-child(even),
+  .logs-table tr:not(.selected):hover {
+    background-color: #F2F5FF;
+  }
+
+  /* Column Widths */
+  .checkbox-column {
+    width: 64px;
+  }
+
+  .log-title-column,
+  .type-column,
+  .date-column {
+    width: calc((100% - 64px) / 3);
+  }
+
+  /* Title Column */
+  .title-column {
+    color: #64B2F6 !important;
+  }
+
+  /* Sort Icon */
+  .sort-icon {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 5px;
+    margin-bottom: 3px;
+    stroke-width: 2.5;
+  }
diff --git a/frontend/src/components/LogHistory/LogTable.jsx b/frontend/src/components/LogHistory/LogTable.jsx
@@ -0,0 +1,51 @@
+import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import "./LogTable.css";
+
+export default function LogTable({
+  currentLogs,
+  selectedLogs,
+  handleSelectAll,
+  handleSelectLog,
+  allSelected,
+}) {
+  return (
+    <table className="logs-table">
+      <thead>
+        <tr>
+          <th className="checkbox-column">
+            <input
+              type="checkbox"
+              onChange={handleSelectAll}
+              checked={allSelected}
+            />
+          </th>
+          <th className="log-title-column">
+            LOG TITLE <ChevronUpDownIcon className="sort-icon" />
+          </th>
+          <th className="type-column">
+            TYPE <ChevronUpDownIcon className="sort-icon" />
+          </th>
+          <th className="date-column">
+            DATE CREATED <ChevronUpDownIcon className="sort-icon" />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {currentLogs.map((log) => (
+          <tr key={log.id} className={selectedLogs[log.id] ? "selected" : ""}>
+            <td className="checkbox-column">
+              <input
+                type="checkbox"
+                checked={!!selectedLogs[log.id]}
+                onChange={() => handleSelectLog(log.id)}
+              />
+            </td>
+            <td className="log-title-column title-column">{log.title}</td>
+            <td className="type-column">{log.type}</td>
+            <td className="date-column">{log.dateCreated}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/frontend/src/components/LogHistory/Pagination.css b/frontend/src/components/LogHistory/Pagination.css
@@ -0,0 +1,37 @@
+.pagination {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .pagination span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 8px;
+    color: #64B2F6;
+    font-size: 14px;
+    min-width: 13px;
+    height: 20px;
+  }
+
+  .pagination .current-page {
+    background-color: #244B94;
+    color: white !important;
+    font-weight: 500;
+    border-radius: 50%;
+  }
+
+  .pagination span.next,
+  .pagination span.previous {
+    min-width: auto;
+    height: auto;
+    color: #244B94;
+    font-weight: 500;
+  }
+
+  /* Hover state for pagination */
+  .pagination span:hover:not(.current-page):not(.next):not(.previous) {
+    color: #244B94;
+  }
diff --git a/frontend/src/components/LogHistory/Pagination.jsx b/frontend/src/components/LogHistory/Pagination.jsx
@@ -0,0 +1,33 @@
+import "./Pagination.css";
+
+export default function Pagination({
+  currentPage,
+  totalPages,
+  handleNextPage,
+  handlePreviousPage,
+  handlePageClick,
+}) {
+  return (
+    <div className="pagination">
+      {currentPage > 1 && (
+        <span className="previous" onClick={handlePreviousPage}>
+          Previous
+        </span>
+      )}
+      {Array.from({ length: totalPages }, (_, index) => (
+        <span
+          key={index + 1}
+          className={currentPage === index + 1 ? "current-page" : "page-number"}
+          onClick={() => handlePageClick(index + 1)}
+        >
+          {index + 1}
+        </span>
+      ))}
+      {currentPage < totalPages && (
+        <span className="next" onClick={handleNextPage}>
+          Next
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/log_history/LogHistory.css b/frontend/src/pages/log_history/LogHistory.css
@@ -7,83 +7,6 @@
   width: 90%;
 }
 
-/* Logs Table */
-.logs-table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-  border-radius: 20px;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-}
-
-.logs-table th {
-  background: #333A3F;
-  color: white;
-  text-align: left;
-  padding: 13px 24px;
-  font-weight: 700;
-  font-size: 17px;
-  white-space: nowrap;
-  letter-spacing: 0.5px;
-}
-
-.logs-table th:first-child {
-  border-top-left-radius: 20px;
-}
-
-.logs-table th:last-child {
-  border-top-right-radius: 20px;
-}
-
-.logs-table td {
-  color: #1E1E1E;
-  font-size: 15px;
-  padding: 8px 24px;
-}
-
-.logs-table td:not(.checkbox-column) {
-  text-align: left;
-  padding: 16px 24px;
-}
-
-/* Selected Row */
-.logs-table tr.selected {
-  background-color: #D3E4FF;
-}
-
-/* Hover and Even Rows */
-.logs-table tr:not(.selected):nth-child(even),
-.logs-table tr:not(.selected):hover {
-  background-color: #F2F5FF;
-}
-
-/* Column Widths */
-.checkbox-column {
-  width: 64px;
-}
-
-.log-title-column,
-.type-column,
-.date-column {
-  width: calc((100% - 64px) / 3);
-}
-
-/* Title Column */
-.title-column {
-  color: #64B2F6 !important;
-}
-
-/* Sort Icon */
-.sort-icon {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 5px;
-  margin-bottom: 3px;
-  stroke-width: 2.5;
-}
-
 /* Table Footer */
 .table-footer {
   display: flex;
@@ -97,42 +20,3 @@
 .table-footer .showing-text span {
   color: #64B2F6;
 }
-
-/* Pagination */
-.pagination {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.pagination span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 4px 8px;
-  color: #64B2F6;
-  font-size: 14px;
-  min-width: 13px;
-  height: 20px;
-}
-
-.pagination .current-page {
-  background-color: #244B94;
-  color: white !important;
-  font-weight: 500;
-  border-radius: 50%;
-}
-
-.pagination span.next,
-.pagination span.previous {
-  min-width: auto;
-  height: auto;
-  color: #244B94;
-  font-weight: 500;
-}
-
-/* Hover state for pagination */
-.pagination span:hover:not(.current-page):not(.next):not(.previous) {
-  color: #244B94;
-}