Add error message above field

MinBZK · Oct 21, 2024 · 21893ed · 21893ed
1 parent f54590c
commit 21893ed
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>