Luke Betteridge
bdacf52b28
- Added pagination state (currentPage, pageSize) to search.js - Implemented getPaginatedResults() function to slice filtered results - Added getTotalPages() and helper functions for pagination math - Added pagination UI controls to search.html: * Items per page dropdown (15, 30, 60 options) * Previous/Next navigation buttons * Page info display (Page X of Y) * Result summary showing item range - Integrated pagination with search filtering: * Resets to page 1 on new search * Disables nav buttons at boundaries * Updates page info after each action - Added comprehensive CSS styling for responsive pagination controls - Updated README with pagination features and usage Features: ✓ Filter results first, then paginate ✓ Smart button disabling at boundaries ✓ Auto-reset to page 1 on search ✓ Dynamic page count updates ✓ Responsive design on mobile devices Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
469 lines
15 KiB
HTML
469 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="main.css">
|
|
<title>Search Inventory</title>
|
|
<style>
|
|
.search-container {
|
|
background: #f9f9f9;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.search-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: #4CAF50;
|
|
box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
|
|
}
|
|
|
|
.quantity-range,
|
|
.date-range {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.quantity-range .form-group,
|
|
.date-range .form-group {
|
|
flex: 1;
|
|
}
|
|
|
|
.search-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #ddd;
|
|
color: #333;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #bbb;
|
|
}
|
|
|
|
.results-info {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
font-size: 16px;
|
|
color: #666;
|
|
}
|
|
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #999;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.item-expiry-badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.expiry-fresh {
|
|
background-color: #e8f5e9;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.expiry-soon {
|
|
background-color: #fff3e0;
|
|
color: #e65100;
|
|
}
|
|
|
|
.expiry-expired {
|
|
background-color: #ffebee;
|
|
color: #c62828;
|
|
}
|
|
|
|
.pagination-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pagination-size {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pagination-size label {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.pagination-size select {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pagination-size select:focus {
|
|
outline: none;
|
|
border-color: #4CAF50;
|
|
}
|
|
|
|
.pagination-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pagination-nav button {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ddd;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.pagination-nav button:hover:not(:disabled) {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border-color: #4CAF50;
|
|
}
|
|
|
|
.pagination-nav button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: 14px;
|
|
color: #666;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.pagination-controls {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.pagination-size,
|
|
.pagination-nav {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="navbar-placeholder"></div>
|
|
<div id="page-content">
|
|
<h2>Search Inventory</h2>
|
|
<hr>
|
|
|
|
<div class="search-container">
|
|
<form class="search-form" id="search-form">
|
|
<div class="form-group">
|
|
<label for="search-name">Item Name:</label>
|
|
<input
|
|
type="text"
|
|
id="search-name"
|
|
placeholder="e.g., Milk, Pasta, Chicken..."
|
|
autocomplete="off"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="search-location">Storage Location:</label>
|
|
<select id="search-location">
|
|
<!-- Options populated by script -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Quantity Range:</label>
|
|
<div class="quantity-range">
|
|
<div class="form-group">
|
|
<label for="min-quantity" style="font-size: 12px;">Min:</label>
|
|
<input
|
|
type="number"
|
|
id="min-quantity"
|
|
min="0"
|
|
value="0"
|
|
placeholder="0"
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="max-quantity" style="font-size: 12px;">Max:</label>
|
|
<input
|
|
type="number"
|
|
id="max-quantity"
|
|
min="0"
|
|
value="999"
|
|
placeholder="999"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Expiry Date Range:</label>
|
|
<div class="date-range">
|
|
<div class="form-group">
|
|
<label for="min-expiry-date" style="font-size: 12px;">Start Date:</label>
|
|
<input
|
|
type="date"
|
|
id="min-expiry-date"
|
|
placeholder="Start date"
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="max-expiry-date" style="font-size: 12px;">End Date:</label>
|
|
<input
|
|
type="date"
|
|
id="max-expiry-date"
|
|
placeholder="End date"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-buttons">
|
|
<button type="button" class="btn btn-primary" id="search-btn">Search</button>
|
|
<button type="button" class="btn btn-secondary" id="reset-btn">Reset</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="results-container">
|
|
<div class="results-info" id="results-info"></div>
|
|
|
|
<div class="pagination-controls">
|
|
<div class="pagination-size">
|
|
<label for="page-size-select">Items per page:</label>
|
|
<select id="page-size-select">
|
|
<option value="15">15</option>
|
|
<option value="30">30</option>
|
|
<option value="60">60</option>
|
|
</select>
|
|
</div>
|
|
<div class="pagination-nav">
|
|
<button type="button" id="prev-page-btn" class="btn">← Previous</button>
|
|
<div class="pagination-info" id="page-info">Page 1 of 1</div>
|
|
<button type="button" id="next-page-btn" class="btn">Next →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="results-grid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="navbar.js"></script>
|
|
<script type="module">
|
|
import { searchInventory, getLocations, formatDate, getExpiryStatus, setPageSize, setCurrentPage, getPaginatedResults } from './search.js';
|
|
import createItemComponent from './item-component.js';
|
|
|
|
const searchForm = document.getElementById('search-form');
|
|
const searchNameInput = document.getElementById('search-name');
|
|
const locationSelect = document.getElementById('search-location');
|
|
const minQuantityInput = document.getElementById('min-quantity');
|
|
const maxQuantityInput = document.getElementById('max-quantity');
|
|
const minExpiryDateInput = document.getElementById('min-expiry-date');
|
|
const maxExpiryDateInput = document.getElementById('max-expiry-date');
|
|
const searchBtn = document.getElementById('search-btn');
|
|
const resetBtn = document.getElementById('reset-btn');
|
|
const resultsGrid = document.getElementById('results-grid');
|
|
const resultsInfo = document.getElementById('results-info');
|
|
const pageSizeSelect = document.getElementById('page-size-select');
|
|
const prevPageBtn = document.getElementById('prev-page-btn');
|
|
const nextPageBtn = document.getElementById('next-page-btn');
|
|
const pageInfo = document.getElementById('page-info');
|
|
|
|
let lastSearchResults = [];
|
|
let currentPage = 1;
|
|
|
|
// Populate location dropdown
|
|
function populateLocations() {
|
|
const locations = getLocations();
|
|
locationSelect.innerHTML = locations
|
|
.map(loc => `<option value="${loc}">${loc}</option>`)
|
|
.join('');
|
|
locationSelect.value = 'All';
|
|
}
|
|
|
|
// Get expiry status badge HTML
|
|
function getExpiryBadgeHtml(expiryDate) {
|
|
const status = getExpiryStatus(expiryDate);
|
|
const badgeClass = status.status === 'Expired' ? 'expiry-expired' :
|
|
status.status === 'Soon' || status.status === 'Today' ? 'expiry-soon' : 'expiry-fresh';
|
|
return `<div class="item-expiry-badge ${badgeClass}">${formatDate(expiryDate)}</div>`;
|
|
}
|
|
|
|
// Display search results with pagination
|
|
function displayResults(results) {
|
|
lastSearchResults = results;
|
|
const paginationData = getPaginatedResults(results);
|
|
|
|
resultsGrid.innerHTML = '';
|
|
|
|
if (results.length === 0) {
|
|
resultsGrid.innerHTML = '<div class="no-results">No items found matching your search criteria.</div>';
|
|
resultsInfo.textContent = 'No results';
|
|
pageInfo.textContent = 'Page 1 of 1';
|
|
prevPageBtn.disabled = true;
|
|
nextPageBtn.disabled = true;
|
|
} else {
|
|
resultsGrid.className = 'item-component-grid';
|
|
paginationData.items.forEach(item => {
|
|
const comp = createItemComponent({
|
|
imgSrc: item.img,
|
|
imgAlt: item.name,
|
|
text1: item.name,
|
|
text2: `${item.location} — ${item.quantity} ${item.unit}`,
|
|
text3: `Expires: ${formatDate(item.expiryDate)}`,
|
|
editable: false
|
|
});
|
|
|
|
const badge = document.createElement('div');
|
|
badge.innerHTML = getExpiryBadgeHtml(item.expiryDate);
|
|
comp.appendChild(badge.firstChild);
|
|
|
|
resultsGrid.appendChild(comp);
|
|
});
|
|
|
|
resultsInfo.textContent = `Found ${results.length} item${results.length !== 1 ? 's' : ''} (showing ${paginationData.startIndex}-${paginationData.endIndex})`;
|
|
pageInfo.textContent = `Page ${paginationData.currentPage} of ${paginationData.totalPages}`;
|
|
|
|
prevPageBtn.disabled = paginationData.currentPage === 1;
|
|
nextPageBtn.disabled = paginationData.currentPage === paginationData.totalPages;
|
|
}
|
|
}
|
|
|
|
// Perform search
|
|
function performSearch() {
|
|
const searchName = searchNameInput.value;
|
|
const location = locationSelect.value;
|
|
const minQty = parseInt(minQuantityInput.value) || 0;
|
|
const maxQty = parseInt(maxQuantityInput.value) || Infinity;
|
|
const minExpiry = minExpiryDateInput.value;
|
|
const maxExpiry = maxExpiryDateInput.value;
|
|
|
|
if (minExpiry && maxExpiry && minExpiry > maxExpiry) {
|
|
alert('Start date cannot be after end date');
|
|
return;
|
|
}
|
|
|
|
currentPage = 1;
|
|
setCurrentPage(1);
|
|
const results = searchInventory(searchName, location, minQty, maxQty, minExpiry, maxExpiry);
|
|
displayResults(results);
|
|
}
|
|
|
|
// Reset form
|
|
function resetForm() {
|
|
searchForm.reset();
|
|
minQuantityInput.value = '0';
|
|
maxQuantityInput.value = '999';
|
|
locationSelect.value = 'All';
|
|
minExpiryDateInput.value = '';
|
|
maxExpiryDateInput.value = '';
|
|
resultsGrid.innerHTML = '';
|
|
resultsInfo.textContent = '';
|
|
currentPage = 1;
|
|
setCurrentPage(1);
|
|
pageInfo.textContent = 'Page 1 of 1';
|
|
pageSizeSelect.value = '15';
|
|
}
|
|
|
|
// Event listeners
|
|
searchBtn.addEventListener('click', performSearch);
|
|
resetBtn.addEventListener('click', resetForm);
|
|
|
|
// Pagination event listeners
|
|
pageSizeSelect.addEventListener('change', (e) => {
|
|
currentPage = 1;
|
|
setPageSize(parseInt(e.target.value));
|
|
setCurrentPage(1);
|
|
displayResults(lastSearchResults);
|
|
});
|
|
|
|
prevPageBtn.addEventListener('click', () => {
|
|
currentPage = Math.max(1, currentPage - 1);
|
|
setCurrentPage(currentPage);
|
|
displayResults(lastSearchResults);
|
|
});
|
|
|
|
nextPageBtn.addEventListener('click', () => {
|
|
currentPage++;
|
|
setCurrentPage(currentPage);
|
|
displayResults(lastSearchResults);
|
|
});
|
|
|
|
// Allow Enter key to search
|
|
searchNameInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') performSearch();
|
|
});
|
|
|
|
// Initialize
|
|
populateLocations();
|
|
displayResults(searchInventory());
|
|
</script>
|
|
</body>
|
|
</html>
|