diff --git a/assets/admin-datatables.js b/assets/admin-datatables.js new file mode 100644 index 0000000..82841ef --- /dev/null +++ b/assets/admin-datatables.js @@ -0,0 +1,22 @@ +import { DataTable } from 'simple-datatables'; +import 'simple-datatables/dist/style.css'; + +// Paginate/search/sort any admin table opted in via class="admin-datatable". +// Kept off tables that are admin-curated and stay small (games) or where row +// order is meaningful and must not be disturbed by sorting (hints). +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('table.admin-datatable').forEach((table) => { + new DataTable(table, { + perPage: 25, + perPageSelect: [10, 25, 50, 100], + searchable: true, + sortable: true, + labels: { + placeholder: 'Search...', + perPage: '{select} entries per page', + noRows: 'No matching entries found', + info: 'Showing {start} to {end} of {rows} entries', + }, + }); + }); +}); diff --git a/assets/app.js b/assets/app.js index 14b7557..a327ee8 100644 --- a/assets/app.js +++ b/assets/app.js @@ -8,3 +8,4 @@ import 'bootstrap/js/dist/dropdown'; import './game-waiting'; import './game-lobby'; import './admin-session-tabs'; +import './admin-datatables'; diff --git a/package-lock.json b/package-lock.json index f6fcb59..cc67632 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "dependencies": { "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.8", - "bootstrap-icons": "^1.13.1" + "bootstrap-icons": "^1.13.1", + "simple-datatables": "^10.3.0" }, "devDependencies": { "@babel/core": "^7.25.0", @@ -4013,6 +4014,12 @@ "dev": true, "license": "CC0-1.0" }, + "node_modules/dayjs": { + "version": "1.11.23", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.23.tgz", + "integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==", + "license": "MIT" + }, "node_modules/debug": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", @@ -4112,6 +4119,12 @@ "dev": true, "license": "MIT" }, + "node_modules/diff-dom": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/diff-dom/-/diff-dom-5.2.1.tgz", + "integrity": "sha512-G6WquwIa/XOxiYDYRMxfJj+c+a6LXMv7zgXoAQ3eRjTYkc8Lc4Aq97krTu/B15r243FR7dyeSxDenzKtO6sbfA==", + "license": "LGPL-3.0" + }, "node_modules/dns-packet": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", @@ -7706,6 +7719,16 @@ "dev": true, "license": "ISC" }, + "node_modules/simple-datatables": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/simple-datatables/-/simple-datatables-10.3.0.tgz", + "integrity": "sha512-/9XcZ/AzZWYNMTTwUcUqsNhZXD1KIHg4tWCUhRx5qPDOnRVG2gNdRDR1euNTCbQxfAypu78ucgWc/BOMFfuxAQ==", + "license": "LGPL-3.0", + "dependencies": { + "dayjs": "^1.11.21", + "diff-dom": "5.2.1" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", diff --git a/package.json b/package.json index 6e47732..6099c88 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "dependencies": { "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.8", - "bootstrap-icons": "^1.13.1" + "bootstrap-icons": "^1.13.1", + "simple-datatables": "^10.3.0" } } diff --git a/templates/game/admin/base.html.twig b/templates/game/admin/base.html.twig index 5047459..fa89963 100644 --- a/templates/game/admin/base.html.twig +++ b/templates/game/admin/base.html.twig @@ -48,6 +48,40 @@ overflow-x: auto; } + /* simple-datatables theming to match the admin panel */ + .datatable-top, + .datatable-bottom { + padding: 0.75rem 1rem; + font-size: 0.85rem; + color: #64748b; + } + .datatable-input { + border: 1px solid #e2e8f0; + border-radius: 6px; + padding: 0.35rem 0.6rem; + font-size: 0.85rem; + } + .datatable-selector { + border: 1px solid #e2e8f0; + border-radius: 6px; + padding: 0.25rem 0.4rem; + font-size: 0.85rem; + } + .datatable-pagination a, + .datatable-pagination button { + border-radius: 4px; + color: #475569; + } + .datatable-pagination a:hover, + .datatable-pagination button:hover { + background: #f1f5f9; + } + .datatable-pagination .datatable-active a, + .datatable-pagination .datatable-active button { + background: #3b82f6; + color: #fff; + } + @media (max-width: 767.98px) { .admin-shell { flex-direction: column; diff --git a/templates/game/admin/email_log/index.html.twig b/templates/game/admin/email_log/index.html.twig index 7bd9354..74b7e57 100644 --- a/templates/game/admin/email_log/index.html.twig +++ b/templates/game/admin/email_log/index.html.twig @@ -9,7 +9,7 @@
- +
diff --git a/templates/game/admin/feedback/index.html.twig b/templates/game/admin/feedback/index.html.twig index 28be7ca..c5d0ce2 100644 --- a/templates/game/admin/feedback/index.html.twig +++ b/templates/game/admin/feedback/index.html.twig @@ -31,7 +31,7 @@
-
ID
+
diff --git a/templates/game/admin/sessions/index.html.twig b/templates/game/admin/sessions/index.html.twig index 459b2ab..c571f5c 100644 --- a/templates/game/admin/sessions/index.html.twig +++ b/templates/game/admin/sessions/index.html.twig @@ -9,7 +9,7 @@
-
Game
+
diff --git a/templates/game/admin/users/index.html.twig b/templates/game/admin/users/index.html.twig index 9fe861a..859bfc3 100644 --- a/templates/game/admin/users/index.html.twig +++ b/templates/game/admin/users/index.html.twig @@ -9,7 +9,7 @@
-
ID
+
ID