From 8766e63120e5c28b22ce4f9a08bdc2ef1300d5ab Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 6 Dec 2025 18:35:34 +0100
Subject: [PATCH] refactor: migrate code-quality-violations pagination to
 standard pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update pagination in code-quality-violations to match companies/vendors:

- Add numbered page buttons with ellipsis for large page counts
- Add startIndex and endIndex computed properties
- Add goToPage(pageNum) method for direct page navigation
- Use consistent grid layout (col-span-3, col-span-9)

This standardizes pagination UI across all admin tables.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../admin/code-quality-violations.html        | 86 +++++++++++++------
 static/admin/js/code-quality-violations.js    | 62 +++++++++++++
 2 files changed, 120 insertions(+), 28 deletions(-)

diff --git a/app/templates/admin/code-quality-violations.html b/app/templates/admin/code-quality-violations.html
index 24643a97..c9f48707 100644
--- a/app/templates/admin/code-quality-violations.html
+++ b/app/templates/admin/code-quality-violations.html
@@ -194,34 +194,64 @@
         </div>
     </div>
 
-    <!-- Pagination -->
-    <div class="mt-6 px-4 py-3 bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-800 rounded-b-lg">
-        <div class="flex items-center justify-between">
-            <div class="flex items-center">
-                <span class="text-sm text-gray-700 dark:text-gray-400">
-                    Showing
-                    <span class="font-semibold" x-text="violations.length"></span>
-                    of
-                    <span class="font-semibold" x-text="pagination.total"></span>
-                    results
-                </span>
-            </div>
-            <div class="flex items-center space-x-2">
-                <button @click="previousPage()"
-                        :disabled="pagination.page === 1"
-                        class="px-3 py-1 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
-                    <span x-html="$icon('arrow-left', 'w-4 h-4')"></span>
-                </button>
-                <span class="text-sm text-gray-700 dark:text-gray-400">
-                    Page <span x-text="pagination.page"></span> of <span x-text="pagination.total_pages"></span>
-                </span>
-                <button @click="nextPage()"
-                        :disabled="pagination.page === pagination.total_pages"
-                        class="px-3 py-1 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
-                    <span x-html="$icon('arrow-right', 'w-4 h-4')"></span>
-                </button>
-            </div>
-        </div>
+    <!-- Pagination Footer -->
+    <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
+        <!-- Results Info -->
+        <span class="flex items-center col-span-3">
+            Showing <span class="mx-1 font-bold" x-text="startIndex"></span>-<span class="mx-1 font-bold" x-text="endIndex"></span> of <span class="mx-1 font-bold" x-text="pagination.total"></span>
+        </span>
+        <span class="col-span-2"></span>
+
+        <!-- Pagination Controls -->
+        <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
+            <nav aria-label="Table navigation">
+                <ul class="inline-flex items-center">
+                    <!-- Previous Button -->
+                    <li>
+                        <button
+                            @click="previousPage()"
+                            :disabled="pagination.page === 1"
+                            class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
+                            :class="pagination.page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                            aria-label="Previous"
+                        >
+                            <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
+                                <path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
+                            </svg>
+                        </button>
+                    </li>
+
+                    <!-- Page Numbers -->
+                    <template x-for="pageNum in pageNumbers" :key="pageNum">
+                        <li>
+                            <button
+                                x-show="pageNum !== '...'"
+                                @click="goToPage(pageNum)"
+                                class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
+                                :class="pagination.page === pageNum ? 'text-white bg-purple-600 border border-purple-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                                x-text="pageNum"
+                            ></button>
+                            <span x-show="pageNum === '...'" class="px-3 py-1">...</span>
+                        </li>
+                    </template>
+
+                    <!-- Next Button -->
+                    <li>
+                        <button
+                            @click="nextPage()"
+                            :disabled="pagination.page === totalPages"
+                            class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
+                            :class="pagination.page === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                            aria-label="Next"
+                        >
+                            <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
+                                <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
+                            </svg>
+                        </button>
+                    </li>
+                </ul>
+            </nav>
+        </span>
     </div>
 </div>
 {% endblock %}
diff --git a/static/admin/js/code-quality-violations.js b/static/admin/js/code-quality-violations.js
index fa190bec..438a41a8 100644
--- a/static/admin/js/code-quality-violations.js
+++ b/static/admin/js/code-quality-violations.js
@@ -96,6 +96,61 @@ function codeQualityViolations() {
             }
         },
 
+        // Computed: Total number of pages
+        get totalPages() {
+            return this.pagination.total_pages;
+        },
+
+        // Computed: Start index for pagination display
+        get startIndex() {
+            if (this.pagination.total === 0) return 0;
+            return (this.pagination.page - 1) * this.pagination.page_size + 1;
+        },
+
+        // Computed: End index for pagination display
+        get endIndex() {
+            const end = this.pagination.page * this.pagination.page_size;
+            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.pagination.page;
+
+            if (totalPages <= 7) {
+                // Show all pages if 7 or fewer
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                // Always show first page
+                pages.push(1);
+
+                if (current > 3) {
+                    pages.push('...');
+                }
+
+                // Show pages around current page
+                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('...');
+                }
+
+                // Always show last page
+                pages.push(totalPages);
+            }
+
+            return pages;
+        },
+
         async previousPage() {
             if (this.pagination.page > 1) {
                 this.pagination.page--;
@@ -103,6 +158,13 @@ function codeQualityViolations() {
             }
         },
 
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                this.loadViolations();
+            }
+        },
+
         updateURL() {
             const params = new URLSearchParams();