Files
pantry-management-frontend/search.js
Luke Betteridge bdacf52b28 Add pagination to search page with configurable items per page
- 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>
2026-03-09 11:48:21 +00:00

176 lines
7.8 KiB
JavaScript

// search.js - Search module with inventory data and filtering logic
// Pagination state
export let currentPage = 1;
export let pageSize = 15;
// Helper function to create a date string
function getDate(daysFromNow) {
const date = new Date();
date.setDate(date.getDate() + daysFromNow);
return date.toISOString().split('T')[0];
}
export const inventoryData = [
// Pantry items
{ id: 1, name: 'Pasta', location: 'Pantry', quantity: 5, unit: 'boxes', expiryDate: getDate(120), img: 'https://picsum.photos/seed/pasta/200/200' },
{ id: 2, name: 'Rice', location: 'Pantry', quantity: 3, unit: 'bags', expiryDate: getDate(180), img: 'https://picsum.photos/seed/rice/200/200' },
{ id: 3, name: 'Cereal', location: 'Pantry', quantity: 2, unit: 'boxes', expiryDate: getDate(60), img: 'https://picsum.photos/seed/cereal/200/200' },
{ id: 4, name: 'Flour', location: 'Pantry', quantity: 1, unit: 'bag', expiryDate: getDate(150), img: 'https://picsum.photos/seed/flour/200/200' },
{ id: 5, name: 'Sugar', location: 'Pantry', quantity: 2, unit: 'bags', expiryDate: getDate(200), img: 'https://picsum.photos/seed/sugar/200/200' },
{ id: 6, name: 'Salt', location: 'Pantry', quantity: 1, unit: 'box', expiryDate: getDate(365), img: 'https://picsum.photos/seed/salt/200/200' },
{ id: 7, name: 'Olive Oil', location: 'Pantry', quantity: 2, unit: 'bottles', expiryDate: getDate(90), img: 'https://picsum.photos/seed/oil/200/200' },
{ id: 8, name: 'Canned Beans', location: 'Pantry', quantity: 12, unit: 'cans', expiryDate: getDate(-10), img: 'https://picsum.photos/seed/beans/200/200' },
// Fridge items
{ id: 9, name: 'Milk', location: 'Fridge', quantity: 1, unit: 'carton', expiryDate: getDate(5), img: 'https://picsum.photos/seed/milk/200/200' },
{ id: 10, name: 'Cheese', location: 'Fridge', quantity: 2, unit: 'blocks', expiryDate: getDate(30), img: 'https://picsum.photos/seed/cheese/200/200' },
{ id: 11, name: 'Greek Yogurt', location: 'Fridge', quantity: 3, unit: 'containers', expiryDate: getDate(7), img: 'https://picsum.photos/seed/yogurt/200/200' },
{ id: 12, name: 'Eggs', location: 'Fridge', quantity: 24, unit: 'eggs', expiryDate: getDate(21), img: 'https://picsum.photos/seed/eggs/200/200' },
{ id: 13, name: 'Butter', location: 'Fridge', quantity: 1, unit: 'pack', expiryDate: getDate(45), img: 'https://picsum.photos/seed/butter/200/200' },
{ id: 14, name: 'Chicken Salad', location: 'Fridge', quantity: 2, unit: 'containers', expiryDate: getDate(-2), img: 'https://picsum.photos/seed/salad/200/200' },
// Freezer items
{ id: 15, name: 'Ice Cream', location: 'Freezer', quantity: 1, unit: 'tub', expiryDate: getDate(90), img: 'https://picsum.photos/seed/icecream/200/200' },
{ id: 16, name: 'Frozen Vegetables', location: 'Freezer', quantity: 5, unit: 'bags', expiryDate: getDate(180), img: 'https://picsum.photos/seed/veggies/200/200' },
{ id: 17, name: 'Chicken Breast', location: 'Freezer', quantity: 4, unit: 'packages', expiryDate: getDate(120), img: 'https://picsum.photos/seed/chicken/200/200' },
{ id: 18, name: 'Ground Beef', location: 'Freezer', quantity: 3, unit: 'packages', expiryDate: getDate(150), img: 'https://picsum.photos/seed/beef/200/200' },
{ id: 19, name: 'Pizza', location: 'Freezer', quantity: 2, unit: 'boxes', expiryDate: getDate(200), img: 'https://picsum.photos/seed/pizza/200/200' },
{ id: 20, name: 'Ice', location: 'Freezer', quantity: 1, unit: 'bag', expiryDate: getDate(365), img: 'https://picsum.photos/seed/ice/200/200' },
];
/**
* Format a date string (YYYY-MM-DD) to readable format (Mon DD, YYYY)
* @param {string} dateStr - ISO date string
* @returns {string} Formatted date
*/
export function formatDate(dateStr) {
if (!dateStr) return '';
const date = new Date(dateStr + 'T00:00:00');
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}
/**
* Get expiry status of an item
* @param {string} expiryDate - ISO date string
* @returns {Object} Status object with text and color
*/
export function getExpiryStatus(expiryDate) {
if (!expiryDate) return { status: 'Unknown', color: '#999', text: '' };
const today = new Date();
today.setHours(0, 0, 0, 0);
const expiry = new Date(expiryDate + 'T00:00:00');
const daysUntilExpiry = Math.floor((expiry - today) / (1000 * 60 * 60 * 24));
if (daysUntilExpiry < 0) {
return { status: 'Expired', color: '#f44336', days: daysUntilExpiry, text: `Expired ${Math.abs(daysUntilExpiry)} days ago` };
} else if (daysUntilExpiry === 0) {
return { status: 'Today', color: '#ff9800', days: 0, text: 'Expires today' };
} else if (daysUntilExpiry <= 7) {
return { status: 'Soon', color: '#ff9800', days: daysUntilExpiry, text: `Expires in ${daysUntilExpiry} days` };
} else {
return { status: 'Fresh', color: '#4CAF50', days: daysUntilExpiry, text: `Expires in ${daysUntilExpiry} days` };
}
}
/**
* Search and filter inventory items
* @param {string} searchName - Search term for item name (case insensitive)
* @param {string} selectedLocation - Filter by location ('All', 'Pantry', 'Fridge', 'Freezer')
* @param {number} minQuantity - Minimum quantity filter
* @param {number} maxQuantity - Maximum quantity filter
* @param {string} minExpiryDate - Minimum expiry date (YYYY-MM-DD format)
* @param {string} maxExpiryDate - Maximum expiry date (YYYY-MM-DD format)
* @returns {Array} Filtered inventory items
*/
export function searchInventory(searchName = '', selectedLocation = 'All', minQuantity = 0, maxQuantity = Infinity, minExpiryDate = '', maxExpiryDate = '') {
return inventoryData.filter(item => {
// Filter by name
const nameMatch = item.name.toLowerCase().includes(searchName.toLowerCase());
// Filter by location
const locationMatch = selectedLocation === 'All' || item.location === selectedLocation;
// Filter by quantity range
const quantityMatch = item.quantity >= minQuantity && item.quantity <= maxQuantity;
// Filter by expiry date range
let expiryMatch = true;
if (minExpiryDate || maxExpiryDate) {
const itemExpiry = item.expiryDate;
if (minExpiryDate && itemExpiry < minExpiryDate) {
expiryMatch = false;
}
if (maxExpiryDate && itemExpiry > maxExpiryDate) {
expiryMatch = false;
}
}
return nameMatch && locationMatch && quantityMatch && expiryMatch;
});
}
/**
* Get all unique locations
* @returns {Array} List of unique locations
*/
export function getLocations() {
const locations = [...new Set(inventoryData.map(item => item.location))];
return ['All', ...locations.sort()];
}
/**
* Set the page size for pagination
* @param {number} size - Items per page (15, 30, or 60)
*/
export function setPageSize(size) {
pageSize = size;
currentPage = 1;
}
/**
* Set the current page
* @param {number} page - Page number
*/
export function setCurrentPage(page) {
currentPage = page;
}
/**
* Get total number of pages
* @param {number} totalItems - Total items to paginate
* @returns {number} Number of pages
*/
export function getTotalPages(totalItems) {
return Math.ceil(totalItems / pageSize);
}
/**
* Get paginated results from filtered items
* @param {Array} filteredItems - Filtered inventory items
* @returns {Object} Object with paginated items and pagination info
*/
export function getPaginatedResults(filteredItems) {
const totalItems = filteredItems.length;
const totalPages = getTotalPages(totalItems);
if (currentPage < 1) currentPage = 1;
if (currentPage > totalPages && totalPages > 0) currentPage = totalPages;
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedItems = filteredItems.slice(startIndex, endIndex);
return {
items: paginatedItems,
currentPage,
pageSize,
totalPages,
totalItems,
startIndex: totalItems > 0 ? startIndex + 1 : 0,
endIndex: Math.min(endIndex, totalItems)
};
}