Skip to content
Snippets Groups Projects
Commit f2cd1d67 authored by Bitha17's avatar Bitha17
Browse files

add homepage pagination and search debouncing

parent 856f46c2
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 71 additions and 18 deletions
app/Views/home/home.php
+ 71
− 18
View file @ f2cd1d67
......@@ -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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment