sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): add server-side pagination and search to list pages

Browse Source 
Companies and Vendors pages now use server-side pagination:
- Moved from client-side to server-side pagination
- Added search with debounced input
- Added status and verification filters
- Added pagination state object (page, per_page, total, pages)
- Added pageNumbers computed with ellipsis support
- Updated templates with search bar and filter dropdowns

Benefits:
- Better performance with large datasets
- Consistent UX across all admin list pages
- Reduced initial page load time

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-03 21:37:31 +01:00
parent be9c892739
commit cfa396dfc4
4 changed files with 288 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
static/admin/js/vendors.js
View File

@@ -25,9 +25,20 @@ function adminVendors() {
loading: false,
error: null,
// Pagination state (renamed from currentPage to avoid conflict)
page: 1, // ✅ FIXED: Was 'currentPage' which conflicted with sidebar
itemsPerPage: 10,
// Search and filters
filters: {
search: '',
is_active: '',
is_verified: ''
},
// Pagination state (server-side)
pagination: {
page: 1,
per_page: 10,
total: 0,
pages: 0
},
// Initialize
async init() {
@@ -48,35 +59,45 @@ function adminVendors() {
vendorsLog.info('=== VENDORS PAGE INITIALIZATION COMPLETE ===');
},
// Computed: Get paginated vendors for current page
// Debounced search
debouncedSearch() {
if (this._searchTimeout) {
clearTimeout(this._searchTimeout);
}
this._searchTimeout = setTimeout(() => {
vendorsLog.info('Search triggered:', this.filters.search);
this.pagination.page = 1;
this.loadVendors();
}, 300);
},
// Computed: Get vendors for current page (already paginated from server)
get paginatedVendors() {
const start = (this.page - 1) * this.itemsPerPage;
const end = start + this.itemsPerPage;
return this.vendors.slice(start, end);
return this.vendors;
},
// Computed: Total number of pages
get totalPages() {
return Math.ceil(this.vendors.length / this.itemsPerPage);
return this.pagination.pages;
},
// Computed: Start index for pagination display
get startIndex() {
if (this.vendors.length === 0) return 0;
return (this.page - 1) * this.itemsPerPage + 1;
if (this.pagination.total === 0) return 0;
return (this.pagination.page - 1) * this.pagination.per_page + 1;
},
// Computed: End index for pagination display
get endIndex() {
const end = this.page * this.itemsPerPage;
return end > this.vendors.length ? this.vendors.length : end;
const end = this.pagination.page * this.pagination.per_page;
return end > this.pagination.total ? this.pagination.total : end;
},
// Computed: Generate page numbers array with ellipsis
get pageNumbers() {
const pages = [];
const totalPages = this.totalPages;
const current = this.page;
const current = this.pagination.page;
if (totalPages <= 7) {
// Show all pages if 7 or fewer
@@ -110,14 +131,29 @@ function adminVendors() {
return pages;
},
// Load vendors list
// Load vendors list with search and pagination
async loadVendors() {
vendorsLog.info('Loading vendors list...');
this.loading = true;
this.error = null;
try {
const url = '/admin/vendors';
// Build query parameters
const params = new URLSearchParams();
params.append('skip', (this.pagination.page - 1) * this.pagination.per_page);
params.append('limit', this.pagination.per_page);
if (this.filters.search) {
params.append('search', this.filters.search);
}
if (this.filters.is_active !== '') {
params.append('is_active', this.filters.is_active);
}
if (this.filters.is_verified !== '') {
params.append('is_verified', this.filters.is_verified);
}
const url = `/admin/vendors?${params}`;
window.LogConfig.logApiCall('GET', url, null, 'request');
const startTime = performance.now();
@@ -127,21 +163,29 @@ function adminVendors() {
window.LogConfig.logApiCall('GET', url, response, 'response');
window.LogConfig.logPerformance('Load Vendors', duration);
// Handle different response structures
this.vendors = response.vendors || response.items || response || [];
// Handle response with pagination info
if (response.vendors) {
this.vendors = response.vendors;
this.pagination.total = response.total;
this.pagination.pages = Math.ceil(response.total / this.pagination.per_page);
vendorsLog.info(`Vendors loaded in ${duration}ms`, {
count: this.vendors.length,
hasVendors: this.vendors.length > 0
});
vendorsLog.info(`Loaded ${this.vendors.length} vendors (total: ${response.total})`);
} else {
// Fallback for different response structures
this.vendors = response.items || response || [];
this.pagination.total = this.vendors.length;
this.pagination.pages = Math.ceil(this.vendors.length / this.pagination.per_page);
vendorsLog.info(`Vendors loaded in ${duration}ms`, {
count: this.vendors.length,
hasVendors: this.vendors.length > 0
});
}
if (this.vendors.length > 0) {
vendorsLog.debug('First vendor:', this.vendors[0]);
}
// Reset to first page when data is loaded
this.page = 1;
} catch (error) {
window.LogConfig.logError(error, 'Load Vendors');
this.error = error.message || 'Failed to load vendors';
@@ -181,22 +225,25 @@ function adminVendors() {
return;
}
vendorsLog.info('Going to page:', pageNum);
this.page = pageNum;
this.pagination.page = pageNum;
this.loadVendors();
},
// Pagination: Go to next page
nextPage() {
if (this.page < this.totalPages) {
if (this.pagination.page < this.totalPages) {
vendorsLog.info('Going to next page');
this.page++;
this.pagination.page++;
this.loadVendors();
}
},
// Pagination: Go to previous page
previousPage() {
if (this.page > 1) {
if (this.pagination.page > 1) {
vendorsLog.info('Going to previous page');
this.page--;
this.pagination.page--;
this.loadVendors();
}
},