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

refactor: standardize pagination across all admin pages

Browse Source 
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:
Samir Boulahtit
2025-12-06 20:15:41 +01:00
parent 00538e643e
commit 74e8620fc7
6 changed files with 232 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/templates/admin/imports.html
View File

@@ -1,5 +1,6 @@
{# app/templates/admin/imports.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% block title %}Import Jobs - Platform Monitoring{% endblock %}
@@ -289,33 +290,7 @@
</div>
</div>
{# noqa: FE-001 - Custom pagination with page/limit/totalJobs variables #}
<!-- Pagination -->
<div x-show="!loading && totalJobs > limit" class="px-4 py-3 border-t dark:border-gray-700">
<div class="flex items-center justify-between">
<div class="text-sm text-gray-700 dark:text-gray-400">
Showing <span x-text="((page - 1) * limit) + 1"></span> to
<span x-text="Math.min(page * limit, totalJobs)"></span> of
<span x-text="totalJobs"></span> jobs
</div>
<div class="flex space-x-2">
<button
@click="previousPage()"
:disabled="page === 1"
class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
>
Previous
</button>
<button
@click="nextPage()"
:disabled="page * limit >= totalJobs"
class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
>
Next
</button>
</div>
</div>
</div>
{{ pagination(show_condition="!loading && pagination.total > 0") }}
</div>
</div>

27
app/templates/admin/logs.html
View File

@@ -1,5 +1,6 @@
{# app/templates/admin/logs.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% block title %}Application Logs{% endblock %}
@@ -236,31 +237,7 @@
</table>
</div>
{# noqa: FE-001 - Custom pagination with filters.skip/limit/totalLogs variables #}
<!-- Pagination -->
<div x-show="!loading && logs.length > 0" class="px-4 py-3 border-t dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
<div class="flex items-center justify-between">
<div class="text-sm text-gray-700 dark:text-gray-400">
Showing <span x-text="filters.skip + 1"></span> to <span x-text="Math.min(filters.skip + filters.limit, totalLogs)"></span> of <span x-text="totalLogs"></span>
</div>
<div class="flex space-x-2">
<button
@click="previousPage()"
:disabled="filters.skip === 0"
class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
>
Previous
</button>
<button
@click="nextPage()"
:disabled="filters.skip + filters.limit >= totalLogs"
class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
>
Next
</button>
</div>
</div>
</div>
{{ pagination(show_condition="!loading && logs.length > 0") }}
</div>
</div>

29
app/templates/admin/marketplace.html
View File

@@ -1,5 +1,6 @@
{# app/templates/admin/marketplace.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% block title %}Marketplace Import{% endblock %}
@@ -370,33 +371,7 @@
</div>
</div>
{# noqa: FE-001 - Custom pagination with page/limit/totalJobs variables #}
<!-- Pagination -->
<div x-show="!loading && totalJobs > limit" class="px-4 py-3 border-t dark:border-gray-700">
<div class="flex items-center justify-between">
<div class="text-sm text-gray-700 dark:text-gray-400">
Showing <span x-text="((page - 1) * limit) + 1"></span> to
<span x-text="Math.min(page * limit, totalJobs)"></span> of
<span x-text="totalJobs"></span> jobs
</div>
<div class="flex space-x-2">
<button
@click="previousPage()"
:disabled="page === 1"
class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
>
Previous
</button>
<button
@click="nextPage()"
:disabled="page * limit >= totalJobs"
class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
>
Next
</button>
</div>
</div>
</div>
{{ pagination(show_condition="!loading && pagination.total > 0") }}
</div>
</div>

91
static/admin/js/imports.js
View File

@@ -43,9 +43,12 @@ function adminImports() {
// Import jobs
jobs: [],
totalJobs: 0,
page: 1,
limit: 20,
pagination: {
page: 1,
per_page: 20,
total: 0,
pages: 0
},
// Modal state
showJobModal: false,
@@ -54,6 +57,51 @@ function adminImports() {
// 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() {
// Guard against multiple initialization
if (window._adminImportsInitialized) {
@@ -117,8 +165,8 @@ function adminImports() {
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
});
// Add filters
@@ -140,7 +188,8 @@ function adminImports() {
);
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);
adminImportsLog.debug('Loaded all jobs:', this.jobs.length);
} catch (error) {
@@ -155,7 +204,7 @@ function adminImports() {
* Apply filters and reload
*/
async applyFilters() {
this.page = 1; // Reset to first page when filtering
this.pagination.page = 1; // Reset to first page when filtering
await this.loadJobs();
await this.loadStats(); // Update stats based on filters
},
@@ -168,7 +217,7 @@ function adminImports() {
this.filters.status = '';
this.filters.marketplace = '';
this.filters.created_by = '';
this.page = 1;
this.pagination.page = 1;
await this.loadJobs();
await this.loadStats();
},
@@ -239,20 +288,30 @@ function adminImports() {
/**
* 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();
}
},

95
static/admin/js/logs.js
View File

@@ -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) {

89
static/admin/js/marketplace.js
View File

@@ -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();
}
},