From 22d21b1bccc75f0df1629b972d03ffbdf05e9192 Mon Sep 17 00:00:00 2001
From: Paul-Christian Volkmer
Date: Wed, 11 Mar 2026 09:12:54 +0100
Subject: refactor: use html fragment for request card (#261)

This also allows for fragment reload on pressing accept button.---
 .../dev/dnpm/etl/processor/web/HomeController.kt   |  7 ++-
 src/main/resources/templates/fragments.html        | 68 +++++++++++++++++++---
 src/main/resources/templates/index.html            | 54 +----------------
 src/main/resources/templates/report.html           | 50 +---------------
 4 files changed, 68 insertions(+), 111 deletions(-)

(limited to 'src')

diff --git a/src/main/kotlin/dev/dnpm/etl/processor/web/HomeController.kt b/src/main/kotlin/dev/dnpm/etl/processor/web/HomeController.kt
index 6a76c38..3092367 100644
--- a/src/main/kotlin/dev/dnpm/etl/processor/web/HomeController.kt
+++ b/src/main/kotlin/dev/dnpm/etl/processor/web/HomeController.kt
@@ -95,6 +95,7 @@ class HomeController(
         val request = requestService.findByUuid(id).orElse(null) ?: throw NotFoundException()
         model.addAttribute("request", request)
         model.addAttribute("issues", reportService.deserialize(request.report?.dataQualityReport))
+        model.addAttribute("postInitialSubmissionBlock", appConfigProperties.postInitialSubmissionBlock)
 
         return "report"
     }
@@ -109,8 +110,9 @@ class HomeController(
         val savedRequest = requestService.save(request)
 
         model.addAttribute("request", savedRequest)
+        model.addAttribute("postInitialSubmissionBlock", appConfigProperties.postInitialSubmissionBlock)
 
-        return "fragments :: accept-initial"
+        return "fragments :: request"
     }
 
     @DeleteMapping(path = ["/submission/{id}/accepted"])
@@ -123,7 +125,8 @@ class HomeController(
         val savedRequest = requestService.save(request)
 
         model.addAttribute("request", savedRequest)
+        model.addAttribute("postInitialSubmissionBlock", appConfigProperties.postInitialSubmissionBlock)
 
-        return "fragments :: accept-initial"
+        return "fragments :: request"
     }
 }
diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html
index 8ce29eb..fe35d9c 100644
--- a/src/main/resources/templates/fragments.html
+++ b/src/main/resources/templates/fragments.html
@@ -35,14 +35,64 @@
             </ul>
         </nav>
     </div>
-    <th:block th:fragment="accept-initial" sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-        <button class="btn btn-green" hx-swap="outerHTML" th:hx-delete="@{/submission/{requestId}/accepted(requestId=${request.uuid})}" th:if="${         request.submissionType.value == 'initial'         and (request.status.value == 'success' or request.status.value == 'warning')         and request.submissionAccepted == true}" title="Doch keine Meldebestätigung - jetzt blockieren">
-            🔓 Bestätigte Initialmeldung
-        </button>
-        <button class="btn btn-yellow" hx-swap="outerHTML" th:hx-put="@{/submission/{requestId}/accepted(requestId=${request.uuid})}" th:if="${         request.submissionType.value == 'initial'         and (request.status.value == 'success' or request.status.value == 'warning')         and request.submissionAccepted == false}" title="Meldebestätigung vorhanden - jetzt nicht weiter blockieren">
-            🔒 Unbestätigte Initialmeldung
-        </button>
-    </th:block>
+    <div th:id="${'request_' + request.uuid}" class="card" th:fragment="request">
+        <div th:if="${request.status.value.contains('success')}" class="card-header bg-green">Erfolgreiche Übertragung</div>
+        <div th:if="${request.status.value.contains('warning')}" class="card-header bg-yellow">Übertragung mit Warnungen</div>
+        <div th:if="${request.status.value.contains('error')}" class="card-header bg-red">Übertragung mit Fehlern</div>
+        <div th:if="${request.status.value == 'unknown' and not request.isPendingUnknown()}" class="card-header bg-gray">Unbekannter Status</div>
+        <div th:if="${request.status.value == 'unknown' and request.isPendingUnknown()}" class="card-header bg-gray">⏰ Unbekannter Status ⏰</div>
+        <div th:if="${request.status.value == 'duplication'}" class="card-header bg-gray">Gestoppt: Duplikation</div>
+        <div th:if="${request.status.value == 'no-consent'}" class="card-header bg-blue">Gestoppt: Kein Consent</div>
+        <div th:if="${request.status.value == 'blocked-initial'}" class="card-header bg-blue">Gestoppt: Noch keine Meldebestätigung für vorhergehende Meldung</div>
+        <div class="card-sub-header" th:classappend="${request.type.value == 'delete' ? 'delete' : ''}">
+            <div th:if="${request.type.value != 'delete'}">
+                <span th:if="${request.submissionType.value == 'initial'}"><span>📨 Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
+                <span th:if="${request.submissionType.value == 'addition'}"><span>🔄 Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
+                <span th:if="${request.submissionType.value == 'unknown'}"><span>❓ Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
+            </div>
+            <div th:if="${request.type.value == 'delete'}">
+                <span>🗑 Löschanfrage vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time>
+            </div>
+            <div sec:authorize="hasRole('USER') or hasRole('ADMIN')" th:if="${postInitialSubmissionBlock}">
+                <button class="btn btn-green" hx-swap="outerHTML" th:hx-target="${'#request_' + request.uuid}" th:hx-delete="@{/submission/{requestId}/accepted(requestId=${request.uuid})}" th:if="${         request.submissionType.value == 'initial'         and (request.status.value == 'success' or request.status.value == 'warning')         and request.submissionAccepted == true}" title="Doch keine Meldebestätigung - jetzt blockieren">
+                    🔓 Bestätigte Initialmeldung
+                </button>
+                <button class="btn btn-yellow" hx-swap="outerHTML" th:hx-target="${'#request_' + request.uuid}" th:hx-put="@{/submission/{requestId}/accepted(requestId=${request.uuid})}" th:if="${         request.submissionType.value == 'initial'         and (request.status.value == 'success' or request.status.value == 'warning')         and request.submissionAccepted == false}" title="Meldebestätigung vorhanden - jetzt nicht weiter blockieren">
+                    🔒 Unbestätigte Initialmeldung
+                </button>
+            </div>
+        </div>
+        <div class="card-content">
+            <div>Request-ID</div>
+            <div th:if="not ${request.report}"><span>[[ ${request.uuid} ]]</span></div>
+            <div th:if="${request.report}">
+                <a th:href="@{/report/{id}(id=${request.uuid})}" sec:authorize="hasRole('USER') or hasRole('ADMIN')">[[ ${request.uuid} ]]</a>
+                <th:block sec:authorize="not (hasRole('USER') or hasRole('ADMIN'))">[[ ${request.uuid} ]]</th:block>
+            </div>
+            <div>Typ</div>
+            <div th:style="${request.type.value == 'delete'} ? 'color: red;'">
+                <span>
+                    [[ ${request.type} ]]
+                    <th:block th:if="${request.submissionType.value != 'unknown'}">([[ ${request.submissionType} ]])</th:block>
+                </span>
+            </div>
+            <th:block sec:authorize="hasRole('USER') or hasRole('ADMIN')">
+            <div>Letzte Aktualisierung</div>
+            <div>
+                <time th:if="${request.updatedAt}" th:datetime="${request.updatedAt}">[[ ${request.updatedAt} ]]</time>
+                <span th:if="${request.updatedBy}"> durch '[[ ${request.updatedBy} ]]'</span>
+            </div>
+            <div>Patienten-Pseudonym</div>
+            <div class="patient-id">
+                <a th:href="@{/patient/{pid}(pid=${request.patientPseudonym})}">[[ ${request.patientPseudonym} ]]</a>
+            </div>
+            <div>TAN</div>
+            <div>
+                [[ ${request.tan} ]]
+            </div>
+            </th:block>
+        </div>
+    </div>
     <footer th:fragment="footer">
         <div class="container">
             <div>
@@ -57,4 +107,4 @@
         </div>
     </footer>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index da85025..7245a8b 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -41,58 +41,8 @@
 
         <div th:if="${requests.totalElements > 0}">
             <div class="paged">
-                <div class="card" th:each="request : ${requests}">
-                    <div th:if="${request.status.value.contains('success')}" class="card-header bg-green">Erfolgreiche Übertragung</div>
-                    <div th:if="${request.status.value.contains('warning')}" class="card-header bg-yellow">Übertragung mit Warnungen</div>
-                    <div th:if="${request.status.value.contains('error')}" class="card-header bg-red">Übertragung mit Fehlern</div>
-                    <div th:if="${request.status.value == 'unknown' and not request.isPendingUnknown()}" class="card-header bg-gray">Unbekannter Status</div>
-                    <div th:if="${request.status.value == 'unknown' and request.isPendingUnknown()}" class="card-header bg-gray">⏰ Unbekannter Status ⏰</div>
-                    <div th:if="${request.status.value == 'duplication'}" class="card-header bg-gray">Gestoppt: Duplikation</div>
-                    <div th:if="${request.status.value == 'no-consent'}" class="card-header bg-blue">Gestoppt: Kein Consent</div>
-                    <div th:if="${request.status.value == 'blocked-initial'}" class="card-header bg-blue">Gestoppt: Noch keine Meldebestätigung für vorhergehende Meldung</div>
-                    <div class="card-sub-header" th:classappend="${request.type.value == 'delete' ? 'delete' : ''}">
-                        <div th:if="${request.type.value != 'delete'}">
-                            <span th:if="${request.submissionType.value == 'initial'}"><span>📨 Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
-                            <span th:if="${request.submissionType.value == 'addition'}"><span>🔄 Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
-                            <span th:if="${request.submissionType.value == 'unknown'}"><span>❓ Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
-                        </div>
-                        <div th:if="${request.type.value == 'delete'}">
-                            <span>🗑 Löschanfrage vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time>
-                        </div>
-                        <div th:insert="~{fragments :: accept-initial}" sec:authorize="hasRole('USER') or hasRole('ADMIN')" th:if="${postInitialSubmissionBlock}"></div>
-                    </div>
-                    <div class="card-content">
-                        <div>Request-ID</div>
-                        <div th:if="not ${request.report}"><span>[[ ${request.uuid} ]]</span></div>
-                        <div th:if="${request.report}">
-                            <a th:href="@{/report/{id}(id=${request.uuid})}" sec:authorize="hasRole('USER') or hasRole('ADMIN')">[[ ${request.uuid} ]]</a>
-                            <th:block sec:authorize="not (hasRole('USER') or hasRole('ADMIN'))">[[ ${request.uuid} ]]</th:block>
-                        </div>
-                        <div>Typ</div>
-                        <div th:style="${request.type.value == 'delete'} ? 'color: red;'">
-                            <span>
-                                [[ ${request.type} ]]
-                                <th:block th:if="${request.submissionType.value != 'unknown'}">([[ ${request.submissionType} ]])</th:block>
-                            </span>
-                        </div>
-                        <div sec:authorize="hasRole('USER') or hasRole('ADMIN')">Letzte Aktualisierung</div>
-                        <div sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-                            <time th:if="${request.updatedAt}" th:datetime="${request.updatedAt}">[[ ${request.updatedAt} ]]</time>
-                            <span th:if="${request.updatedBy}"> durch [[ ${request.updatedBy} ]]</span>
-                        </div>
-                        <div sec:authorize="hasRole('USER') or hasRole('ADMIN')">Patienten-Pseudonym</div>
-                        <div class="patient-id" th:if="${patientPseudonym != null}" sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-                            [[ ${request.patientPseudonym} ]]
-                        </div>
-                        <div class="patient-id" th:if="${patientPseudonym == null}" sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-                            <a th:href="@{/patient/{pid}(pid=${request.patientPseudonym})}">[[ ${request.patientPseudonym} ]]</a>
-                        </div>
-                        <div sec:authorize="hasRole('USER') or hasRole('ADMIN')">TAN</div>
-                        <div class="patient-id" sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-                            [[ ${request.tan} ]]
-                        </div>
-                    </div>
-                </div>
+                <th:block th:insert="~{fragments :: request}" th:each="request : ${requests}">
+                </th:block>
             </div>
             <div th:if="${patientPseudonym == null && query == null}" class="page-control">
                 <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>
diff --git a/src/main/resources/templates/report.html b/src/main/resources/templates/report.html
index cd26672..a9d6893 100644
--- a/src/main/resources/templates/report.html
+++ b/src/main/resources/templates/report.html
@@ -11,54 +11,8 @@
 
         <h1>Anfrage <span class="monospace">[[ ${request.uuid} ]]</span></h1>
 
-        <div class="card">
-            <div th:if="${request.status.value.contains('success')}" class="card-header bg-green">Erfolgreiche Übertragung</div>
-            <div th:if="${request.status.value.contains('warning')}" class="card-header bg-yellow">Übertragung mit Warnungen</div>
-            <div th:if="${request.status.value.contains('error')}" class="card-header bg-red">Übertragung mit Fehlern</div>
-            <div th:if="${request.status.value == 'unknown' and not request.isPendingUnknown()}" class="card-header bg-gray">Unbekannter Status</div>
-            <div th:if="${request.status.value == 'unknown' and request.isPendingUnknown()}" class="card-header bg-gray">⏰ Unbekannter Status ⏰</div>
-            <div th:if="${request.status.value == 'duplication'}" class="card-header bg-gray">Gestoppt: Duplikation</div>
-            <div th:if="${request.status.value == 'no-consent'}" class="card-header bg-blue">Gestoppt: Kein Consent</div>
-            <div th:if="${request.status.value == 'blocked-initial'}" class="card-header bg-blue">Gestoppt: Noch keine Meldebestätigung für vorhergehende Meldung</div>
-            <div class="card-sub-header" th:classappend="${request.type.value == 'delete' ? 'delete' : ''}">
-                <div th:if="${request.type.value != 'delete'}">
-                    <span th:if="${request.submissionType.value == 'initial'}"><span>📨 Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
-                    <span th:if="${request.submissionType.value == 'addition'}"><span>🔄 Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
-                    <span th:if="${request.submissionType.value == 'unknown'}"><span>❓ Übertragung vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></span>
-                </div>
-                <div th:if="${request.type.value == 'delete'}">
-                    <span>🗑 Löschanfrage vom </span><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time>
-                </div>
-                <div th:insert="~{fragments :: accept-initial}" sec:authorize="hasRole('USER') or hasRole('ADMIN')" th:if="${postInitialSubmissionBlock}"></div>
-            </div>
-            <div class="card-content">
-                <div>Request-ID</div>
-                <div><span>[[ ${request.uuid} ]]</span></div>
-                <div>Typ</div>
-                <div th:style="${request.type.value == 'delete'} ? 'color: red;'">
-                            <span>
-                                [[ ${request.type} ]]
-                                <th:block th:if="${request.submissionType.value != 'unknown'}">([[ ${request.submissionType} ]])</th:block>
-                            </span>
-                </div>
-                <div sec:authorize="hasRole('USER') or hasRole('ADMIN')">Letzte Aktualisierung</div>
-                <div sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-                    <time th:if="${request.updatedAt}" th:datetime="${request.updatedAt}">[[ ${request.updatedAt} ]]</time>
-                    <span th:if="${request.updatedBy}"> durch [[ ${request.updatedBy} ]]</span>
-                </div>
-                <div sec:authorize="hasRole('USER') or hasRole('ADMIN')">Patienten-Pseudonym</div>
-                <div class="patient-id" th:if="${patientPseudonym != null}" sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-                    [[ ${request.patientPseudonym} ]]
-                </div>
-                <div class="patient-id" th:if="${patientPseudonym == null}" sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-                    <a th:href="@{/patient/{pid}(pid=${request.patientPseudonym})}">[[ ${request.patientPseudonym} ]]</a>
-                </div>
-                <div sec:authorize="hasRole('USER') or hasRole('ADMIN')">TAN</div>
-                <div class="patient-id" sec:authorize="hasRole('USER') or hasRole('ADMIN')">
-                    [[ ${request.tan} ]]
-                </div>
-            </div>
-        </div>
+        <th:block th:insert="~{fragments :: request}">
+        </th:block>
 
         <h2 th:text="${request.report.description}"></h2>
 
-- 
cgit v1.2.3