From 21893ed9646522b71e8087561034a5901d0cc471 Mon Sep 17 00:00:00 2001
From: Berry den Hartog <38954346+berrydenhartog@users.noreply.github.com>
Date: Mon, 21 Oct 2024 13:18:06 +0000
Subject: [PATCH] Add error message above field

---
 amt/core/exception_handlers.py                             | 4 ++--
 amt/site/static/scss/layout.scss                           | 4 ++++
 .../templates/errors/_RequestValidationError_400.html.j2   | 7 +++++++
 amt/site/templates/projects/new.html.j2                    | 6 +++++-
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 amt/site/templates/errors/_RequestValidationError_400.html.j2

diff --git a/amt/core/exception_handlers.py b/amt/core/exception_handlers.py
index 1806eb23..f5da82fa 100644
--- a/amt/core/exception_handlers.py
+++ b/amt/core/exception_handlers.py
@@ -27,8 +27,7 @@ async def general_exception_handler(request: Request, exc: Exception) -> HTMLRes
     elif isinstance(exc, StarletteHTTPException):
         message = AMTNotFound().getmessage(translations) if exc.status_code == status.HTTP_404_NOT_FOUND else exc.detail
     elif isinstance(exc, RequestValidationError):
-        messages: list[str] = [f"{error['loc'][-1]}: {error['msg']}" for error in exc.errors()]
-        message = "\n".join(messages)
+        message = exc.errors()
 
     status_code = status.HTTP_500_INTERNAL_SERVER_ERROR
     if isinstance(exc, StarletteHTTPException):
@@ -42,6 +41,7 @@ async def general_exception_handler(request: Request, exc: Exception) -> HTMLRes
         if request.state.htmx
         else f"errors/{exception_name}_{status_code}.html.j2"
     )
+
     fallback_template_name = "errors/_Exception.html.j2" if request.state.htmx else "errors/Exception.html.j2"
 
     response: HTMLResponse | None = None
diff --git a/amt/site/static/scss/layout.scss b/amt/site/static/scss/layout.scss
index 85bc9933..96a17d09 100644
--- a/amt/site/static/scss/layout.scss
+++ b/amt/site/static/scss/layout.scss
@@ -286,3 +286,7 @@ main {
 .rvo-table-row td:first-child {
     width: 20%;
 }
+
+.amt-color-rood-600 {
+    color: red;
+}
diff --git a/amt/site/templates/errors/_RequestValidationError_400.html.j2 b/amt/site/templates/errors/_RequestValidationError_400.html.j2
new file mode 100644
index 00000000..29cc5c32
--- /dev/null
+++ b/amt/site/templates/errors/_RequestValidationError_400.html.j2
@@ -0,0 +1,7 @@
+{% for msg in message %}
+<div id="error-{{msg['loc'][-1]}}" class="htmx-error-oob" hx-swap-oob="true">
+    <span class="utrecht-icon rvo-icon rvo-icon-waarschuwing rvo-icon--md rvo-status-icon-waarschuwing" role="img"
+        aria-label="Waarschuwing"></span>
+    <span class="amt-color-rood-600">{{ msg['msg'] }}</span>
+</div>
+{% endfor %}
diff --git a/amt/site/templates/projects/new.html.j2 b/amt/site/templates/projects/new.html.j2
index cbf11a0e..a0c80606 100644
--- a/amt/site/templates/projects/new.html.j2
+++ b/amt/site/templates/projects/new.html.j2
@@ -22,6 +22,7 @@
                                 <div class="rvo-form-field__label">
                                     <label class="rvo-label rvo-label--required">{% trans %}Algorithm System name{% endtrans %}</label>
                                 </div>
+                                <div id="error-name" class="htmx-error-oob"></div>
                                 <input id="name"
                                        placeholder="{% trans %}Your algorithm system name here{% endtrans %}"
                                        name="name"
@@ -35,6 +36,7 @@
                                  class="utrecht-form-field utrecht-form-field--text rvo-form-field">
                                 <div class="rvo-form-field__label">
                                     <label class="rvo-label rvo-label--required">{% trans %}Lifecycle{% endtrans %}</label>
+                                    <div id="error-lifecycle" class="htmx-error-oob"></div>
                                     <p>
                                         {% trans %}Select the lifecycle your algorithm system is currently in.{% endtrans %}
                                         {% trans %}For more information on lifecycle, read the{% endtrans %}
@@ -173,7 +175,9 @@
                     <p class="utrecht-button-group">
                         <button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md"
                                 type="submit"
-                                id="button-new-project-create">
+                                id="button-new-project-create"
+                                hx-on:click="document.querySelectorAll('div.htmx-error-oob').forEach(e => e.innerHTML = '')"
+                                >
                             {% trans %}Create Algorithm System{% endtrans %}
                         </button>
                     </p>