diff --git a/app/Views/home/home.php b/app/Views/home/home.php
index ebfc812b8de3fc6cb9a87df696f2481ea8f5e59c..4a14a80a4aa40e3487323bc21dcb09efddd83009 100644
--- a/app/Views/home/home.php
+++ b/app/Views/home/home.php
@@ -25,7 +25,14 @@
// Get search results or all events
$searchResults = $eventController->searchEvents($searchQuery, $sortKey, $minStock);
- $events = $eventController->paginateEvents($searchResults);
+ if (!isset($_GET['page'])) {
+ $_GET['page'] = 1;
+ }
+ $paginationData = $eventController->paginateEvents($searchResults,$_GET['page']);
+ $events = $paginationData['events'];
+ $totalEvents = $paginationData['total'];
+ $currentPage = $paginationData['page'];
+ $maxPage = $paginationData['maxpage'];
?>
<!DOCTYPE html>
@@ -42,6 +49,7 @@
<link rel="stylesheet" type="text/css" href="/../../styles/container.css">
<link rel="stylesheet" type="text/css" href="/../../styles/auth.css">
<link rel="stylesheet" type="text/css" href="/../../styles/dropdown.css">
+ <link rel="stylesheet" type="text/css" href="/../../styles/pagination.css">
</head>
<body>
@@ -52,30 +60,37 @@
<div class="column">
<button onclick="openCreateEventPage()" id="createEventBtn" class="admin">Create Event</button>
<div class="row">
- <input type="text" placeholder="Search.." value="<?= htmlspecialchars($searchQuery)?>" style="width:250%;">
- <?php if (!empty($searchQuery) || !empty($minStock) || !empty($sortKey)) : ?>
- <select name="sort" class="styled-select">
- <option value="" <?= empty($sortKey) ? 'selected' : '' ?>>No Sorting</option>
- <option value="name" <?= $sortKey === 'name' ? 'selected' : '' ?>>Sort by Name</option>
- <option value="location" <?= $sortKey === 'location' ? 'selected' : '' ?>>Sort by Location</option>
- </select>
- <?php else : ?>
- <select name="sort" class="styled-select">
- <option value="" selected>No Sorting</option>
- <option value="name">Sort by Name</option>
- <option value="location">Sort by Location</option>
- </select>
- <?php endif; ?>
+ <input type="text" id="searchInput" placeholder="Search.." value="<?= htmlspecialchars($searchQuery)?>" style="width:250%;">
+ <select name="sort" id="sortSelect" class="styled-select">
+ <option value="" <?= empty($sortKey) ? 'selected' : '' ?>>No Sorting</option>
+ <option value="name" <?= $sortKey === 'name' ? 'selected' : '' ?>>Sort by Name</option>
+ <option value="location" <?= $sortKey === 'location' ? 'selected' : '' ?>>Sort by Location</option>
+ </select>
<!-- Change input type to "text" for minimum stock -->
- <input type="text" name="min_stock" placeholder="Min Stock" value="<?= htmlspecialchars($minStock) ?>">
+ <input type="text" id="minStockInput" name="min_stock" placeholder="Min Stock" value="<?= htmlspecialchars($minStock) ?>">
<button type="submit" id="search-button">Search</button>
</div>
+
<?php foreach ($events as $event) :
include '../template/event.php';
endforeach;?>
+
+ <div class="pagination">
+ <?php if ($currentPage > 1) : ?>
+ <a href="?page=<?= $currentPage - 1 ?>">Previous</a>
+ <?php endif; ?>
+
+ <?php for ($i = 1; $i <= $maxPage; $i++) : ?>
+ <a href="?page=<?= $i ?>" <?= ($i == $currentPage) ? 'class="active"' : '' ?>><?= $i ?></a>
+ <?php endfor; ?>
+
+ <?php if ($currentPage < $maxPage) : ?>
+ <a href="?page=<?= $currentPage + 1 ?>">Next</a>
+ <?php endif; ?>
+ </div>
</div>
</div>
-
+
<?php include '../template/footer.php';?>
<script defer>
@@ -87,8 +102,46 @@
function openCreateEventPage() {
window.location.href = "/app/Views/event/create.php";
}
+
+ let debounceTimer;
+ let searchInput = document.getElementById('searchInput');
+ let cursorPosition = 0;
+
+ // Initialize the cursor position
+ searchInput.addEventListener('input', function () {
+ cursorPosition = this.selectionStart;
+ });
+
+ function debounceSearch() {
+ clearTimeout(debounceTimer);
+ debounceTimer = setTimeout(function () {
+ // Get the search input values
+ const searchQuery = searchInput.value;
+ const minStock = document.getElementById('minStockInput').value;
+ const sortKey = document.getElementById('sortSelect').value;
+
+ // Construct the URL with search, min_stock, and sort parameters
+ const url = `/app/Views/home/home.php?search=${encodeURIComponent(searchQuery)}&min_stock=${encodeURIComponent(minStock)}&sort=${encodeURIComponent(sortKey)}`;
+
+ // Redirect to the updated URL
+ window.location.href = url;
+
+ // Restore focus and cursor position
+ searchInput.focus();
+ searchInput.setSelectionRange(cursorPosition, cursorPosition);
+ }, 500); // Adjust the debounce delay as needed (in milliseconds)
+ }
+
+ // Attach the debounce function to the search input's input event
+ searchInput.addEventListener('input', debounceSearch);
+
+ // Attach an event listener to the sort dropdown
+ document.getElementById('sortSelect').addEventListener('change', function () {
+ // Trigger the debounceSearch function when the sorting option changes
+ debounceSearch();
+ });
</script>
- <script src="js/script.js"></script>
+
</body>
</html>