refactor: standardize pagination across all admin pages
Migrated marketplace.js, imports.js, and logs.js to use the same
pagination pattern as companies.js, users.js, and vendors.js:
- pagination: { page, per_page, total, pages }
- Computed getters: totalPages, startIndex, endIndex, pageNumbers
- Methods: previousPage(), nextPage(), goToPage()
Updated templates to use the shared pagination macro:
- marketplace.html
- imports.html
- logs.html
All admin pages now use consistent pagination behavior and styling.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -17,7 +17,6 @@ function adminLogs() {
|
||||
successMessage: null,
|
||||
logSource: 'database',
|
||||
logs: [],
|
||||
totalLogs: 0,
|
||||
stats: {
|
||||
total_count: 0,
|
||||
warning_count: 0,
|
||||
@@ -28,14 +27,63 @@ function adminLogs() {
|
||||
filters: {
|
||||
level: '',
|
||||
module: '',
|
||||
search: '',
|
||||
skip: 0,
|
||||
limit: 50
|
||||
search: ''
|
||||
},
|
||||
pagination: {
|
||||
page: 1,
|
||||
per_page: 50,
|
||||
total: 0,
|
||||
pages: 0
|
||||
},
|
||||
logFiles: [],
|
||||
selectedFile: '',
|
||||
fileContent: null,
|
||||
|
||||
// Computed: Total pages
|
||||
get totalPages() {
|
||||
return this.pagination.pages;
|
||||
},
|
||||
|
||||
// Computed: Start index for pagination display
|
||||
get startIndex() {
|
||||
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.pagination.page * this.pagination.per_page;
|
||||
return end > this.pagination.total ? this.pagination.total : end;
|
||||
},
|
||||
|
||||
// Computed: Page numbers for pagination
|
||||
get pageNumbers() {
|
||||
const pages = [];
|
||||
const totalPages = this.totalPages;
|
||||
const current = this.pagination.page;
|
||||
|
||||
if (totalPages <= 7) {
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
pages.push(1);
|
||||
if (current > 3) {
|
||||
pages.push('...');
|
||||
}
|
||||
const start = Math.max(2, current - 1);
|
||||
const end = Math.min(totalPages - 1, current + 1);
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
if (current < totalPages - 2) {
|
||||
pages.push('...');
|
||||
}
|
||||
pages.push(totalPages);
|
||||
}
|
||||
return pages;
|
||||
},
|
||||
|
||||
async init() {
|
||||
logsLog.info('=== LOGS PAGE INITIALIZING ===');
|
||||
await this.loadStats();
|
||||
@@ -72,13 +120,14 @@ function adminLogs() {
|
||||
if (this.filters.level) params.append('level', this.filters.level);
|
||||
if (this.filters.module) params.append('module', this.filters.module);
|
||||
if (this.filters.search) params.append('search', this.filters.search);
|
||||
params.append('skip', this.filters.skip);
|
||||
params.append('limit', this.filters.limit);
|
||||
params.append('skip', (this.pagination.page - 1) * this.pagination.per_page);
|
||||
params.append('limit', this.pagination.per_page);
|
||||
|
||||
const data = await apiClient.get(`/admin/logs/database?${params}`);
|
||||
this.logs = data.logs;
|
||||
this.totalLogs = data.total;
|
||||
logsLog.info(`Loaded ${this.logs.length} logs (total: ${this.totalLogs})`);
|
||||
this.pagination.total = data.total;
|
||||
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
|
||||
logsLog.info(`Loaded ${this.logs.length} logs (total: ${this.pagination.total})`);
|
||||
} catch (error) {
|
||||
logsLog.error('Failed to load logs:', error);
|
||||
this.error = error.response?.data?.detail || 'Failed to load logs';
|
||||
@@ -143,21 +192,31 @@ function adminLogs() {
|
||||
this.filters = {
|
||||
level: '',
|
||||
module: '',
|
||||
search: '',
|
||||
skip: 0,
|
||||
limit: 50
|
||||
search: ''
|
||||
};
|
||||
this.loadLogs();
|
||||
},
|
||||
|
||||
nextPage() {
|
||||
this.filters.skip += this.filters.limit;
|
||||
this.pagination.page = 1;
|
||||
this.loadLogs();
|
||||
},
|
||||
|
||||
previousPage() {
|
||||
this.filters.skip = Math.max(0, this.filters.skip - this.filters.limit);
|
||||
this.loadLogs();
|
||||
if (this.pagination.page > 1) {
|
||||
this.pagination.page--;
|
||||
this.loadLogs();
|
||||
}
|
||||
},
|
||||
|
||||
nextPage() {
|
||||
if (this.pagination.page < this.totalPages) {
|
||||
this.pagination.page++;
|
||||
this.loadLogs();
|
||||
}
|
||||
},
|
||||
|
||||
goToPage(pageNum) {
|
||||
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
|
||||
this.pagination.page = pageNum;
|
||||
this.loadLogs();
|
||||
}
|
||||
},
|
||||
|
||||
showLogDetail(log) {
|
||||
|
||||
Reference in New Issue
Block a user