Passage des Alert en bootstrap-notify

app/Resources/views/base.html.twig

@@ -78,7 +78,7 @@
 			</header>
 			<main role="main">
 				<div>
-					{% for message in app.flashes('success') %}
+					{#{% for message in app.flashes('success') %}
 					<div class="alert alert-success alert-dismissible fade show" role="alert">
 						<strong>Succès</strong> {{ message }}
 						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
@@ -94,6 +94,13 @@
 							</button>
 						</div>
                     {% endfor %}
+                    #}
+					{% for type, messages in app.session.flashBag.all %}
+						{% for message in messages %}
+							{% if type == 'error' %}{% set type = 'danger' %} {% endif %}
+							<div data-toggle="notify" data-message="{{ message }}" data-type="{{ type }}"></div>
+						{% endfor %}
+					{% endfor %}
 					{% block body %}{% endblock %}
 				</div>
 

assets/js/app.js

@@ -7,9 +7,27 @@ import 'font-awesome/css/font-awesome.css';
 import 'jquery-ui/themes/base/all.css';
 import 'jquery-ui/ui/widgets/autocomplete';
 import 'bootstrap-notify/bootstrap-notify';
+import 'animate.css/animate.css';
 
 $(document).ready(function() {
     $(function() {
         $('[data-toggle="tooltip"]').tooltip();
+
+        $('[data-toggle="notify"]').each(function() {
+            $.notify({
+                message: $(this).data('message')
+            },{
+                type: $(this).data('type'),
+                animate: {
+                    enter: 'animated fadeInRight',
+                    exit: 'animated fadeOutRight'
+                },
+                delay: 4000,
+                offset: {
+                    x: 15,
+                    y: 70
+                }
+            })
+        })
     })
 })

package.json

@@ -1,6 +1,7 @@
 {
   "devDependencies": {
     "@symfony/webpack-encore": "^0.20.1",
+    "animate.css": "^3.7.0",
     "bootstrap": "^4.1.3",
     "bootstrap-notify": "^3.1.3",
     "bootstrap-star-rating": "^4.0.4",

yarn.lock

@@ -144,6 +144,11 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
+animate.css@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-3.7.0.tgz#5de25d1ee5fba11ba6a1e2c4fa568f512eb7d4da"
+  integrity sha512-u3iMXDJr0cxMdQocIciDiou9Au4L5f9uT+/jCtprw3s1j3HcfCuI+khF+90Ps2KdsEhM2soF7SXB4WUvI3HlXg==
+
 ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"