chore: use card layout in report details

1 files changed, 44 insertions, 26 deletions

diff --git a/src/main/resources/templates/report.html b/src/main/resources/templates/report.html
index 552a86c..1e2d97c 100644
--- a/src/main/resources/templates/report.html
+++ b/src/main/resources/templates/report.html
@@ -11,31 +11,49 @@
 
         <h1>Anfrage <span class="monospace">[[ ${request.uuid} ]]</span></h1>
 
-        <table>
-            <thead>
-                <tr>
-                    <th>Status</th>
-                    <th>Typ</th>
-                    <th>ID</th>
-                    <th>Datum</th>
-                    <th>Patienten-ID</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td th:if="${request.status.value == 'success'}" class="bg-green"><small>[[ ${request.status} ]]</small></td>
-                    <td th:if="${request.status.value == 'warning'}" class="bg-yellow"><small>[[ ${request.status} ]]</small></td>
-                    <td th:if="${request.status.value == 'error'}" class="bg-red"><small>[[ ${request.status} ]]</small></td>
-                    <td th:if="${request.status.value == 'unknown'}" class="bg-gray"><small>[[ ${request.status} ]]</small></td>
-                    <td th:if="${request.status.value == 'duplication'}" class="bg-gray"><small>[[ ${request.status} ]]</small></td>
-                    <td th:style="${request.type.value == 'delete'} ? 'color: red;'"><small>[[ ${request.type} ]]</small></td>
-                    <td>[[ ${request.uuid} ]]</td>
-                    <td><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></td>
-                    <td class="patient-id" sec:authorize="authenticated">[[ ${request.patientPseudonym} ]]</td>
-                    <td class="patient-id" sec:authorize="not authenticated">***</td>
-                </tr>
-            </tbody>
-        </table>
+        <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')">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>
 
         <h2 th:text="${request.report.description}"></h2>
 
@@ -68,4 +86,4 @@
     <footer th:replace="~{fragments.html :: footer}"></footer>
     <script th:src="@{/main.js}"></script>
 </body>
-</html>
\ No newline at end of file
+</html>