feat: add paginator to request page

src/main/kotlin/dev/dnpm/etl/processor/monitoring/Request.kt

@@ -24,6 +24,7 @@ import org.springframework.data.jdbc.repository.query.Query
 import org.springframework.data.relational.core.mapping.Embedded
 import org.springframework.data.relational.core.mapping.Table
 import org.springframework.data.repository.CrudRepository
+import org.springframework.data.repository.PagingAndSortingRepository
 import java.time.Instant
 import java.util.*
 
@@ -52,7 +53,7 @@ data class CountedState(
     val status: RequestStatus,
 )
 
-interface RequestRepository : CrudRepository<Request, Long> {
+interface RequestRepository : CrudRepository<Request, Long>, PagingAndSortingRepository<Request, Long> {
 
     fun findAllByPatientIdOrderByProcessedAtDesc(patientId: String): List<Request>
 

src/main/kotlin/dev/dnpm/etl/processor/web/HomeController.kt

@@ -23,6 +23,9 @@ import dev.dnpm.etl.processor.NotFoundException
 import dev.dnpm.etl.processor.monitoring.ReportService
 import dev.dnpm.etl.processor.monitoring.RequestId
 import dev.dnpm.etl.processor.monitoring.RequestRepository
+import org.springframework.data.domain.Pageable
+import org.springframework.data.domain.Sort
+import org.springframework.data.web.PageableDefault
 import org.springframework.stereotype.Controller
 import org.springframework.ui.Model
 import org.springframework.web.bind.annotation.GetMapping
@@ -37,8 +40,8 @@ class HomeController(
 ) {
 
     @GetMapping
-    fun index(model: Model): String {
+    fun index(@PageableDefault(page = 0, size = 20, sort = ["processedAt"], direction = Sort.Direction.DESC) pageable: Pageable, model: Model): String {
-        val requests = requestRepository.findAll().sortedByDescending { it.processedAt }.take(25)
+        val requests = requestRepository.findAll(pageable)
         model.addAttribute("requests", requests)
 
         return "index"

src/main/resources/static/style.css

@@ -92,6 +92,10 @@ nav li a:hover {
     text-decoration: underline;
 }
 
+a {
+    color: var(--bg-blue);
+}
+
 .breadcrumps {
     margin: 0 auto;
     max-width: 1140px;
@@ -188,6 +192,41 @@ table {
     font-family: sans-serif;
 }
 
+.paged-table {
+    border: 1px solid var(--table-border);
+    border-radius: .5em;
+    background: white;
+}
+
+.paged-table > table {
+    border: none;
+    background: transparent;
+}
+
+.page-control {
+    border-radius: .5em;
+    padding: 1em 2em;
+    text-align: center;
+
+    line-height: 1.75em;
+}
+
+.page-control a {
+    padding: 0 .25em;
+    font-size: 1.75em;
+    color: var(--bg-gray);
+    text-decoration: none;
+}
+
+.page-control a[href] {
+    color: var(--bg-blue);
+}
+
+.page-control span {
+    padding: 0 .5em;
+    vertical-align: text-bottom;
+}
+
 #samples-table.max {
     width: 100vw;
     position: fixed;

src/main/resources/templates/index.html

@@ -11,35 +11,62 @@
 
         <h1>Letzte Anfragen</h1>
 
-        <table>
+        <div class="paged-table">
-            <thead>
+            <div class="page-control">
-                <tr>
+                <a id="first-page-link" th:href="@{/(page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">&larrb;</a><a th:if="${requests.isFirst()}">&larrb;</a>
-                    <th>Status</th>
+                <a id="prev-page-link" th:href="@{/(page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">&larr;</a><a th:if="${requests.isFirst()}">&larr;</a>
-                    <th>Typ</th>
+                <span>Seite [[ ${requests.getNumber() + 1} ]] von [[ ${requests.getTotalPages()} ]]</span>
-                    <th>ID</th>
+                <a id="next-page-link" th:href="@{/(page=${requests.getNumber() + 1})}" title="Seite vor: Taste D" th:if="${not requests.isLast()}">&rarr;</a><a th:if="${requests.isLast()}">&rarr;</a>
-                    <th>Datum</th>
+                <a id="last-page-link" th:href="@{/(page=${requests.getTotalPages() - 1})}" title="Zum Ende: Taste S" th:if="${not requests.isLast()}">&rarrb;</a><a th:if="${requests.isLast()}">&rarrb;</a>
-                    <th>Patienten-ID</th>
+            </div>
-                </tr>
+            <table class="paged">
-            </thead>
+                <thead>
-            <tbody>
+                    <tr>
-                <tr th:each="request : ${requests}">
+                        <th>Status</th>
-                    <td th:if="${request.status.value.contains('success')}" class="bg-green"><small>[[ ${request.status} ]]</small></td>
+                        <th>Typ</th>
-                    <td th:if="${request.status.value.contains('warning')}" class="bg-yellow"><small>[[ ${request.status} ]]</small></td>
+                        <th>ID</th>
-                    <td th:if="${request.status.value.contains('error')}" class="bg-red"><small>[[ ${request.status} ]]</small></td>
+                        <th>Datum</th>
-                    <td th:if="${request.status.value == 'unknown'}" class="bg-gray"><small>[[ ${request.status} ]]</small></td>
+                        <th>Patienten-ID</th>
-                    <td th:if="${request.status.value == 'duplication'}" class="bg-gray"><small>[[ ${request.status} ]]</small></td>
+                    </tr>
-                    <td th:style="${request.type.value == 'delete'} ? 'color: red;'"><small>[[ ${request.type} ]]</small></td>
+                </thead>
-                    <td th:if="not ${request.report}">[[ ${request.uuid} ]]</td>
+                <tbody>
-                    <td th:if="${request.report}">
+                    <tr th:each="request : ${requests}">
-                        <a th:href="@{/report/{id}(id=${request.uuid})}">[[ ${request.uuid} ]]</a>
+                        <td th:if="${request.status.value.contains('success')}" class="bg-green"><small>[[ ${request.status} ]]</small></td>
-                    </td>
+                        <td th:if="${request.status.value.contains('warning')}" class="bg-yellow"><small>[[ ${request.status} ]]</small></td>
-                    <td><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></td>
+                        <td th:if="${request.status.value.contains('error')}" class="bg-red"><small>[[ ${request.status} ]]</small></td>
-                    <td>[[ ${request.patientId} ]]</td>
+                        <td th:if="${request.status.value == 'unknown'}" class="bg-gray"><small>[[ ${request.status} ]]</small></td>
-                </tr>
+                        <td th:if="${request.status.value == 'duplication'}" class="bg-gray"><small>[[ ${request.status} ]]</small></td>
-            </tbody>
+                        <td th:style="${request.type.value == 'delete'} ? 'color: red;'"><small>[[ ${request.type} ]]</small></td>
-        </table>
+                        <td th:if="not ${request.report}">[[ ${request.uuid} ]]</td>
+                        <td th:if="${request.report}">
+                            <a th:href="@{/report/{id}(id=${request.uuid})}">[[ ${request.uuid} ]]</a>
+                        </td>
+                        <td><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></td>
+                        <td>[[ ${request.patientId} ]]</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
     </main>
     <script th:src="@{/scripts.js}"></script>
+    <script>
+        window.onload = () => {
+            let keyBindings = {
+                'w': 'first-page-link',
+                'a': 'prev-page-link',
+                'd': 'next-page-link',
+                's': 'last-page-link'
+            };
+            window.onkeydown = (event) => {
+                for (const [key, elemId] of Object.entries(keyBindings)) {
+                    if (event.key === key && document.getElementById(elemId)) {
+                        document.getElementById(elemId).style.background = 'yellow';
+                        document.getElementById(elemId).click();
+                    }
+                }
+            };
+        };
+    </script>
 </body>
 </html>