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:
@@ -46,9 +46,12 @@ function adminMarketplace() {
|
||||
|
||||
// Import jobs
|
||||
jobs: [],
|
||||
totalJobs: 0,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
pagination: {
|
||||
page: 1,
|
||||
per_page: 10,
|
||||
total: 0,
|
||||
pages: 0
|
||||
},
|
||||
|
||||
// Modal state
|
||||
showJobModal: false,
|
||||
@@ -57,6 +60,51 @@ function adminMarketplace() {
|
||||
// Auto-refresh for active jobs
|
||||
autoRefreshInterval: 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() {
|
||||
adminMarketplaceLog.info('Marketplace init() called');
|
||||
|
||||
@@ -156,8 +204,8 @@ function adminMarketplace() {
|
||||
try {
|
||||
// Build query params
|
||||
const params = new URLSearchParams({
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
skip: (this.pagination.page - 1) * this.pagination.per_page,
|
||||
limit: this.pagination.per_page,
|
||||
created_by_me: 'true' // ✅ Only show jobs I triggered
|
||||
});
|
||||
|
||||
@@ -177,7 +225,8 @@ function adminMarketplace() {
|
||||
);
|
||||
|
||||
this.jobs = response.items || [];
|
||||
this.totalJobs = response.total || 0;
|
||||
this.pagination.total = response.total || 0;
|
||||
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
|
||||
|
||||
adminMarketplaceLog.info('Loaded my jobs:', this.jobs.length);
|
||||
} catch (error) {
|
||||
@@ -267,7 +316,7 @@ function adminMarketplace() {
|
||||
this.filters.vendor_id = '';
|
||||
this.filters.status = '';
|
||||
this.filters.marketplace = '';
|
||||
this.page = 1;
|
||||
this.pagination.page = 1;
|
||||
this.loadJobs();
|
||||
},
|
||||
|
||||
@@ -336,20 +385,30 @@ function adminMarketplace() {
|
||||
/**
|
||||
* Pagination: Previous page
|
||||
*/
|
||||
async previousPage() {
|
||||
if (this.page > 1) {
|
||||
this.page--;
|
||||
await this.loadJobs();
|
||||
previousPage() {
|
||||
if (this.pagination.page > 1) {
|
||||
this.pagination.page--;
|
||||
this.loadJobs();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Pagination: Next page
|
||||
*/
|
||||
async nextPage() {
|
||||
if (this.page * this.limit < this.totalJobs) {
|
||||
this.page++;
|
||||
await this.loadJobs();
|
||||
nextPage() {
|
||||
if (this.pagination.page < this.totalPages) {
|
||||
this.pagination.page++;
|
||||
this.loadJobs();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Pagination: Go to specific page
|
||||
*/
|
||||
goToPage(pageNum) {
|
||||
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
|
||||
this.pagination.page = pageNum;
|
||||
this.loadJobs();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user