From c24d09fdd8619cc684fcf1bd961dc3f8128dd6a8 Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Sun, 7 Apr 2024 00:50:30 +0200
Subject: [PATCH] Toast

---
 project/main/templates/main/base/base.html    |  1 +
 .../main/templates/main/components/toast.html |  9 ++++
 .../main/templates/main/form_validation.html  | 43 +++++++++++++------
 .../main/form_validation_content.html         |  7 +++
 project/main/views/form_validation.py         |  5 +++
 5 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 project/main/templates/main/components/toast.html

diff --git a/project/main/templates/main/base/base.html b/project/main/templates/main/base/base.html
index 99fad34..690ea44 100644
--- a/project/main/templates/main/base/base.html
+++ b/project/main/templates/main/base/base.html
@@ -5,6 +5,7 @@
     <meta name="viewport"
           content="width=100%, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
     <title>{{ title or "Django-html demo" }}</title>
 </head>
diff --git a/project/main/templates/main/components/toast.html b/project/main/templates/main/components/toast.html
new file mode 100644
index 0000000..eb508c3
--- /dev/null
+++ b/project/main/templates/main/components/toast.html
@@ -0,0 +1,9 @@
+{% macro toast(title, id) %}
+    <div class="toast-container position-absolute top-0 start-50 translate-middle-x mt-2">
+        <div id="{{ id }}" class="toast text-bg-success">
+            <div class="toast-body">
+                {{ title }}
+            </div>
+        </div>
+    </div>
+{% endmacro %}
diff --git a/project/main/templates/main/form_validation.html b/project/main/templates/main/form_validation.html
index f6d8c83..bb6082a 100644
--- a/project/main/templates/main/form_validation.html
+++ b/project/main/templates/main/form_validation.html
@@ -1,19 +1,34 @@
 {% extends "main/base/layout.html" %}
+{% from "main/components/toast.html" import toast %}
 
 
 {% block content %}
-	<form
-		hx-post="{{ url("form-validation") }}"
-		hx-target="#validation-form-content"
-		hx-swap="outerHTML"
-	>
-		<div class="card p-4">
-			{% include "main/form_validation_content.html" %}
-			<div class="d-flex">
-				<button type="submit" class="btn btn-success ms-auto">
-					Submit
-				</button>
-			</div>
-		</div>
-	</form>
+    <form
+        hx-post="{{ url("form-validation") }}"
+        hx-target="#validation-form-content"
+        hx-swap="outerHTML"
+    >
+        <div class="card p-4">
+            {% include "main/form_validation_content.html" %}
+            <div class="d-flex">
+                <button type="submit" class="btn btn-success ms-auto">
+                    Submit
+                </button>
+            </div>
+        </div>
+    </form>
+
+    {{ toast(title="Form validated and saved successfully", id="toast-success") }}
+
+
+    <script>
+        let toastSuccess = null;
+
+        document.addEventListener("DOMContentLoaded", function () {
+            const toastElement = document.querySelector("#toast-success");
+            toastSuccess = new bootstrap.Toast(toastElement, {
+                delay: 3000,
+            })
+        });
+    </script>
 {% endblock %}
diff --git a/project/main/templates/main/form_validation_content.html b/project/main/templates/main/form_validation_content.html
index f0cd0b0..15ed66a 100644
--- a/project/main/templates/main/form_validation_content.html
+++ b/project/main/templates/main/form_validation_content.html
@@ -57,3 +57,10 @@
         {% endif %}
     </div>
 </div>
+
+
+{% if validation.is_valid %}
+    <script>
+        toastSuccess.show();
+    </script>
+{% endif %}
diff --git a/project/main/views/form_validation.py b/project/main/views/form_validation.py
index a462d72..8c0d119 100644
--- a/project/main/views/form_validation.py
+++ b/project/main/views/form_validation.py
@@ -11,6 +11,7 @@ from project.main.views.demo_view_base import DemoViewBase
 @dataclass
 class Validation:
     validated: bool = False
+    is_valid: bool = False
 
     name: Optional[str] = None
     consent: Optional[bool] = None
@@ -57,6 +58,10 @@ class FormValidationView(DemoViewBase):
         if not validation.consent:
             validation.consent_error = "You should consent"
 
+        validation.is_valid = not (
+            validation.name_error or validation.age_error or validation.consent_error
+        )
+
         return render(
             context={
                 "validation": validation,