feat: search by patient pseudonym and TAN (#256)

1 files changed, 28 insertions, 7 deletions

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index db85196..cea3f73 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -9,6 +9,13 @@
     <div th:replace="~{fragments.html :: nav}"></div>
     <main>
 
+        <div class="search-form" sec:authorize="hasRole('USER') or hasRole('ADMIN')">
+            <form th:action="@{/}" method="get">
+                <input id="search-input" type="text" name="q" maxlength="64" placeholder="Suche nach Patienten-Pseudonym oder TAN" th:value="${query}"/>
+                <a th:href="@{/}">🞫</a>
+            </form>
+        </div>
+
         <h1>
             Alle Anfragen
             <a id="reload-notify" class="btn btn-red reload" title="Neue Anfragen laden" th:href="@{/}">
@@ -19,7 +26,12 @@
         <div>
             <h2 th:if="${patientPseudonym != null}">
                 Betreffend Patienten-Pseudonym <span class="monospace" th:text="${patientPseudonym}">***</span>
-                <a class="btn btn-blue" th:if="${patientPseudonym != null}" th:href="@{/}">Alle anzeigen</a>
+                <a class="btn btn-blue" th:href="@{/}">Alle anzeigen</a>
+            </h2>
+
+            <h2 th:if="not ${null == query || query.isBlank()}">
+                Für die Suche nach &#8222;<span class="monospace" th:text="${query}">***</span>&#8220;
+                <a class="btn btn-blue" th:href="@{/}">Alle anzeigen</a>
             </h2>
         </div>
 
@@ -27,7 +39,7 @@
             <div class="notification info">Noch keine Anfragen eingegangen</div>
         </div>
 
-        <div class="border" th:if="${requests.totalElements > 0}">
+        <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>
@@ -77,13 +89,20 @@
                     </div>
                 </div>
             </div>
-            <div th:if="${patientPseudonym == null}" class="page-control">
+            <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>
                 <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>
                 <span>Seite [[ ${requests.getNumber() + 1} ]] von [[ ${requests.getTotalPages()} ]]</span>
                 <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>
                 <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>
             </div>
+            <div th:if="${patientPseudonym == null && query != null}" class="page-control">
+                <a id="first-page-link" th:href="@{/(q=${query},page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">&larrb;</a><a th:if="${requests.isFirst()}">&larrb;</a>
+                <a id="prev-page-link" th:href="@{/(q=${query},page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">&larr;</a><a th:if="${requests.isFirst()}">&larr;</a>
+                <span>Seite [[ ${requests.getNumber() + 1} ]] von [[ ${requests.getTotalPages()} ]]</span>
+                <a id="next-page-link" th:href="@{/(q=${query},page=${requests.getNumber() + 1})}" title="Seite vor: Taste D" th:if="${not requests.isLast()}">&rarr;</a><a th:if="${requests.isLast()}">&rarr;</a>
+                <a id="last-page-link" th:href="@{/(q=${query},page=${requests.getTotalPages() - 1})}" title="Zum Ende: Taste S" th:if="${not requests.isLast()}">&rarrb;</a><a th:if="${requests.isLast()}">&rarrb;</a>
+            </div>
             <div th:if="${patientPseudonym != null}" class="page-control">
                 <a id="first-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${0})}" title="Zum Anfang: Taste W" th:if="${not requests.isFirst()}">&larrb;</a><a th:if="${requests.isFirst()}">&larrb;</a>
                 <a id="prev-page-link" th:href="@{/patient/{patientPseudonym}(patientPseudonym=${patientPseudonym},page=${requests.getNumber() - 1})}" title="Seite zurück: Taste A" th:if="${not requests.isFirst()}">&larr;</a><a th:if="${requests.isFirst()}">&larr;</a>
@@ -105,10 +124,12 @@
                 '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();
+                if (document.activeElement.id !== 'search-input') {
+                    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();
+                        }
                     }
                 }
             };