From 181d89e79a1f80fe6c5c57ee85e515352c03db8c Mon Sep 17 00:00:00 2001 From: naheyansheikh Date: Sun, 1 Dec 2024 00:33:18 -0800 Subject: [PATCH] History code cleanup --- frontend/src/pages/log_history/LogHistory.css | 95 ++++----- frontend/src/pages/log_history/LogHistory.jsx | 199 ++++-------------- 2 files changed, 81 insertions(+), 213 deletions(-) diff --git a/frontend/src/pages/log_history/LogHistory.css b/frontend/src/pages/log_history/LogHistory.css index 59ee97e0..56afd8d9 100644 --- a/frontend/src/pages/log_history/LogHistory.css +++ b/frontend/src/pages/log_history/LogHistory.css @@ -1,3 +1,4 @@ +/* Table Container */ .table-container { background: transparent; border-radius: 8px; @@ -6,12 +7,13 @@ width: 90%; } +/* Logs Table */ .logs-table { width: 100%; - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); - border-radius: 20px; border-collapse: collapse; table-layout: fixed; + border-radius: 20px; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .logs-table th { @@ -33,55 +35,56 @@ border-top-right-radius: 20px; } -.logs-table tr.selected { - background-color: #D3E4FF; -} - -.sort-icon { - width: 20px; /* Increased from 16px */ - height: 20px; /* Increased from 16px */ - display: inline-block; - vertical-align: middle; - margin-left: 5px; - stroke-width: 2.5; /* Makes the icon lines thicker */ - margin-bottom: 3px; -} - .logs-table td { - padding: 8px 24px; color: #1E1E1E; font-size: 15px; + padding: 8px 24px; } -.checkbox-column { - width: 64px; -} - -.log-title-column { - width: calc((100% - 64px) / 3); +.logs-table td:not(.checkbox-column) { + text-align: left; + padding: 16px 24px; } -.type-column { - width: calc((100% - 64px) / 3); +/* Selected Row */ +.logs-table tr.selected { + background-color: #D3E4FF; } -.date-column { - width: calc((100% - 64px) / 3); +/* Hover and Even Rows */ +.logs-table tr:not(.selected):nth-child(even), +.logs-table tr:not(.selected):hover { + background-color: #F2F5FF; } -.logs-table th:not(.checkbox-column) { - text-align: left; +/* Column Widths */ +.checkbox-column { + width: 64px; } -.logs-table td:not(.checkbox-column) { - text-align: left; - padding: 16px 24px; +.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; justify-content: space-between; @@ -92,10 +95,10 @@ } .table-footer .showing-text span { - color: #64B2F6; /* Light blue for numbers */ - font-size: 15px; + color: #64B2F6; } +/* Pagination */ .pagination { display: flex; gap: 8px; @@ -103,23 +106,22 @@ } .pagination span { + display: flex; + align-items: center; + justify-content: center; cursor: pointer; padding: 4px 8px; color: #64B2F6; font-size: 14px; - min-width: 13px; /* Added to ensure circle shape */ - height: 20px; /* Added to ensure circle shape */ - display: flex; /* Added for centering */ - align-items: center; /* Added for centering */ - justify-content: center; /* Added for centering */ + min-width: 13px; + height: 20px; } -/* Current page styling */ .pagination .current-page { background-color: #244B94; color: white !important; font-weight: 500; - border-radius: 50%; + border-radius: 50%; } .pagination span.next, @@ -130,16 +132,7 @@ font-weight: 500; } -/* Hover state for non-selected items */ +/* Hover state for pagination */ .pagination span:hover:not(.current-page):not(.next):not(.previous) { color: #244B94; } - -tr:nth-child(even) { - background: #F2F5FF; - -} - -tr:hover { - background-color: #F2F5FF; -} \ No newline at end of file diff --git a/frontend/src/pages/log_history/LogHistory.jsx b/frontend/src/pages/log_history/LogHistory.jsx index 20118040..0282c071 100644 --- a/frontend/src/pages/log_history/LogHistory.jsx +++ b/frontend/src/pages/log_history/LogHistory.jsx @@ -13,186 +13,64 @@ export default function LogHistory() { } function MainContent() { - const [currentPage, setCurrentPage] = useState(1); - const [logs] = useState([ - { - id: 1, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 2, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 3, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 4, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 5, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 6, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 7, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 8, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 9, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 10, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 11, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 12, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 13, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 14, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 15, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 16, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 17, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 18, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 19, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - { - id: 20, - title: "mylogexample", - type: "TypeExample", - dateCreated: "TypeExample", - }, - ]); + /** Generate logs data dynamically */ + const logs = Array.from({ length: 20 }, (_, index) => ({ + id: index + 1, + title: `Log Title ${index + 1}`, + type: `Type ${(index % 5) + 1}`, + dateCreated: `2024-11-${(index % 30) + 1}`, + })); - const [selectedLogs, setSelectedLogs] = useState(new Set()); + /** State for current page and selected logs */ + const [currentPage, setCurrentPage] = useState(1); + const [selectedLogs, setSelectedLogs] = useState({}); - const logsPerPage = 7; // Number of logs shown per page + /** Constants for pagination */ + const logsPerPage = 7; const totalPages = Math.ceil(logs.length / logsPerPage); - // Calculate which logs to display based on current page + /** Calculate logs to display on current page */ const indexOfLastLog = currentPage * logsPerPage; const indexOfFirstLog = indexOfLastLog - logsPerPage; const currentLogs = logs.slice(indexOfFirstLog, indexOfLastLog); - const startRange = (currentPage - 1) * logsPerPage + 1; - const endRange = Math.min(currentPage * logsPerPage, logs.length); + /** Calculate range for display */ + const startRange = indexOfFirstLog + 1; + const endRange = Math.min(indexOfLastLog, logs.length); - // Pagination handlers + /** Handlers for pagination */ const handleNextPage = () => { - if (currentPage < totalPages) { - setCurrentPage(currentPage + 1); - } + setCurrentPage((prev) => Math.min(prev + 1, totalPages)); }; const handlePreviousPage = () => { - if (currentPage > 1) { - setCurrentPage(currentPage - 1); - } + setCurrentPage((prev) => Math.max(prev - 1, 1)); }; const handlePageClick = (pageNumber) => { setCurrentPage(pageNumber); }; - // Handle select all checkbox + /** Handlers for log selection */ const handleSelectAll = (event) => { - if (event.target.checked) { - // Select all visible logs - const newSelected = new Set(selectedLogs); - currentLogs.forEach((log) => newSelected.add(log.id)); - setSelectedLogs(newSelected); - } else { - // Deselect all visible logs - const newSelected = new Set(selectedLogs); - currentLogs.forEach((log) => newSelected.delete(log.id)); - setSelectedLogs(newSelected); - } + const isChecked = event.target.checked; + const newSelectedLogs = { ...selectedLogs }; + currentLogs.forEach((log) => { + newSelectedLogs[log.id] = isChecked; + }); + setSelectedLogs(newSelectedLogs); }; - // Handle individual checkbox const handleSelectLog = (logId) => { - const newSelected = new Set(selectedLogs); - if (newSelected.has(logId)) { - newSelected.delete(logId); - } else { - newSelected.add(logId); - } - setSelectedLogs(newSelected); + setSelectedLogs((prevSelected) => ({ + ...prevSelected, + [logId]: !prevSelected[logId], + })); }; + /** Check if all current logs are selected */ + const allSelected = currentLogs.every((log) => selectedLogs[log.id]); + return (
@@ -203,7 +81,7 @@ function MainContent() { selectedLogs.has(log.id))} + checked={allSelected} /> @@ -219,14 +97,11 @@ function MainContent() { {currentLogs.map((log) => ( - + handleSelectLog(log.id)} /> @@ -248,7 +123,7 @@ function MainContent() { Previous )} - {[...Array(totalPages)].map((_, index) => ( + {Array.from({ length: totalPages }, (_, index) => (