From 8e931c95e3551744bbd6c2d70d1fcb4a98b8b947 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= Date: Sun, 26 Jan 2025 18:47:11 +0100 Subject: [PATCH] feat: replace toasts --- assets/controllers/toast_controller.js | 18 --------- assets/styles/_components.css | 1 - assets/styles/components/toast.css | 20 ---------- package-lock.json | 8 +--- package.json | 3 +- templates/_partials/_alert.html.twig | 49 ++++++++++++++++++------ templates/_partials/_flashes.html.twig | 6 +-- templates/_partials/_toast.html.twig | 8 ---- templates/booking/edit.html.twig | 32 ++-------------- templates/booking/index.html.twig | 6 +-- templates/layout.html.twig | 1 - templates/personal_data/index.html.twig | 1 + templates/registration/index.html.twig | 1 + templates/reset_password/index.html.twig | 1 + templates/security/login.html.twig | 10 ++--- 15 files changed, 54 insertions(+), 111 deletions(-) delete mode 100644 assets/controllers/toast_controller.js delete mode 100644 assets/styles/components/toast.css delete mode 100644 templates/_partials/_toast.html.twig diff --git a/assets/controllers/toast_controller.js b/assets/controllers/toast_controller.js deleted file mode 100644 index f661e60..0000000 --- a/assets/controllers/toast_controller.js +++ /dev/null @@ -1,18 +0,0 @@ -import { Controller } from '@hotwired/stimulus' -import Toastify from 'toastify-js' - -export default class extends Controller { - - static values = { text: String, class: String } - - connect() { - Toastify({ - duration: 5000, - text: this.textValue, - gravity: 'top', - position: 'right', - className: this.classValue, - close: true, - }).showToast() - } -} \ No newline at end of file diff --git a/assets/styles/_components.css b/assets/styles/_components.css index 5100426..f585773 100644 --- a/assets/styles/_components.css +++ b/assets/styles/_components.css @@ -2,6 +2,5 @@ @import "components/forms.css"; @import "components/button.css"; @import "components/menu.css"; -@import "components/toast.css"; @import "components/tooltip.css"; @import "components/table-responsive.css"; \ No newline at end of file diff --git a/assets/styles/components/toast.css b/assets/styles/components/toast.css deleted file mode 100644 index b2ce158..0000000 --- a/assets/styles/components/toast.css +++ /dev/null @@ -1,20 +0,0 @@ -@import "toastify-js/src/toastify.css"; - -.toastify { - @apply shadow-lg rounded; -} - -.toastify--success { - @apply text-gray-100; - background: theme('colors.emerald.600'); -} - -.toastify--warning { - @apply text-gray-100; - background: theme('colors.red.600'); -} - -.toastify--info { - @apply text-gray-100; - background: theme('colors.blue.600'); -} diff --git a/package-lock.json b/package-lock.json index 7af7080..b5de506 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,7 @@ "license": "WTFPL", "dependencies": { "@iframe-resizer/child": "^5.3.2", - "tippy.js": "^6.3.7", - "toastify-js": "^1.12.0" + "tippy.js": "^6.3.7" }, "devDependencies": { "@babel/core": "^7.17.0", @@ -6537,11 +6536,6 @@ "node": ">=8.0" } }, - "node_modules/toastify-js": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz", - "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ==" - }, "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", diff --git a/package.json b/package.json index 902a3c7..7d64a71 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ }, "dependencies": { "@iframe-resizer/child": "^5.3.2", - "tippy.js": "^6.3.7", - "toastify-js": "^1.12.0" + "tippy.js": "^6.3.7" } } diff --git a/templates/_partials/_alert.html.twig b/templates/_partials/_alert.html.twig index 778bed1..2ab7b04 100644 --- a/templates/_partials/_alert.html.twig +++ b/templates/_partials/_alert.html.twig @@ -1,12 +1,39 @@ -{% apply spaceless %} - {% for message in messages %} - {% if message is iterable %} - {% set message = message.id | trans(message.parameters | default({}), message.domain | default(null), message.locale | default(null)) | raw %} - {% else %} - {% set message = message | trans | raw %} - {% endif %} -
- {{ message }} +
+
+
+ {% if level == 'error' %} + + {% elseif level == 'success' %} + + {% else %} + + {% endif %}
- {% endfor %} -{% endapply %} +
+ {% if messages | length == 1 %} +

+ {{ messages[0] }} +

+ {% else %} +

+ {{ title is defined ? title : 'Es gab mehrere Probleme' }} +

+
+
    + {% for message in messages %} +
  • + {{ message }} +
    • + {% endfor %} +
+
+ {% endif %} +
+
+
\ No newline at end of file diff --git a/templates/_partials/_flashes.html.twig b/templates/_partials/_flashes.html.twig index ed4261b..c886b4d 100644 --- a/templates/_partials/_flashes.html.twig +++ b/templates/_partials/_flashes.html.twig @@ -1,9 +1,9 @@ {% if app.session.flashBag.peek('error')|length > 0 %} - {% include '_partials/_toast.html.twig' with { level: 'warning', messages: app.flashes('error') } %} + {% include '_partials/_alert.html.twig' with { level: 'error', messages: app.flashes('error') } %} {% endif %} {% if app.session.flashBag.peek('success')|length > 0 %} - {% include '_partials/_toast.html.twig' with { level: 'success', messages: app.flashes('success') } %} + {% include '_partials/_alert.html.twig' with { level: 'success', messages: app.flashes('success') } %} {% endif %} {% if app.session.flashBag.peek('info')|length > 0 %} - {% include '_partials/_toast.html.twig' with { level: 'info', messages: app.flashes('info') } %} + {% include '_partials/_alert.html.twig' with { level: 'info', messages: app.flashes('info') } %} {% endif %} diff --git a/templates/_partials/_toast.html.twig b/templates/_partials/_toast.html.twig deleted file mode 100644 index 4c32044..0000000 --- a/templates/_partials/_toast.html.twig +++ /dev/null @@ -1,8 +0,0 @@ -{% for message in messages %} - {% if message is iterable %} - {% set message = message.id | trans(message.parameters | default({}), message.domain | default(null), message.locale | default(null)) | raw %} - {% else %} - {% set message = message | trans | raw %} - {% endif %} -
-{% endfor %} diff --git a/templates/booking/edit.html.twig b/templates/booking/edit.html.twig index 01fcf49..35b2a74 100644 --- a/templates/booking/edit.html.twig +++ b/templates/booking/edit.html.twig @@ -1,37 +1,11 @@ {% extends 'layout.html.twig' %} {% block content %} + {% include '_partials/_flashes.html.twig' %} {{ form_start(form) }} {% if not form.vars.valid %} -
-
-
- -
-
- {% if form.vars.errors|length > 0 %} -

- Die Buchung konnte nicht aktualisiert werden -

-
-
    - {% for error in form.vars.errors %} -
  • - {{ error.message }} -
    • - {% endfor %} -
-
- {% else %} -

- Die Buchung konnte nicht aktualisiert werden. Problematische Eingaben wurden entsprechend markiert. -

- {% endif %} -
-
-
+ {% set messages = form.vars.errors|map(error => error.message) %} + {% include '_partials/_alert.html.twig' with { 'level': 'error', 'title': 'Die Buchung konnte nicht aktualisiert werden', 'messages': messages } %} {% endif %}
{% endif %} + class="button bg-button button--small"> Bestätigung + class="button bg-button button--small"> Reisedokumente
diff --git a/templates/layout.html.twig b/templates/layout.html.twig index 2fdbd3d..1fff22c 100644 --- a/templates/layout.html.twig +++ b/templates/layout.html.twig @@ -13,7 +13,6 @@ {% endif %}
{% block content %}{% endblock %} - {% include '_partials/_flashes.html.twig' %} {% include '_partials/_loading_indicator.html.twig' %}
{% endblock %} \ No newline at end of file diff --git a/templates/personal_data/index.html.twig b/templates/personal_data/index.html.twig index 07dbb6f..7607224 100644 --- a/templates/personal_data/index.html.twig +++ b/templates/personal_data/index.html.twig @@ -6,6 +6,7 @@

Persönliche Daten

+ {% include '_partials/_flashes.html.twig' %} {{ form_start(personalDataForm, { 'attr': { 'data-action': 'loading#toggle' } }) }}
{{ form_row(personalDataForm.firstName) }} diff --git a/templates/registration/index.html.twig b/templates/registration/index.html.twig index 6e2c0a9..a7a696f 100644 --- a/templates/registration/index.html.twig +++ b/templates/registration/index.html.twig @@ -4,6 +4,7 @@

Registrierung MyE&P

+ {% include '_partials/_flashes.html.twig' %} {{ form_start(form, { 'attr': { 'data-action': 'loading#toggle' } }) }}
diff --git a/templates/reset_password/index.html.twig b/templates/reset_password/index.html.twig index 8cd2f6d..4ab4878 100644 --- a/templates/reset_password/index.html.twig +++ b/templates/reset_password/index.html.twig @@ -4,6 +4,7 @@

Passwort vergessen

+ {% include '_partials/_flashes.html.twig' %} {{ form_start(form, { 'attr': { 'data-action': 'loading#toggle' } }) }}
{{ form_row(form.email) }} diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig index e429645..8f659b8 100644 --- a/templates/security/login.html.twig +++ b/templates/security/login.html.twig @@ -5,14 +5,10 @@ Login MyE&P
-
+
+ {% include '_partials/_flashes.html.twig' %} {% if error %} -
- - - - {{ error.messageKey|trans(error.messageData, 'security') }} -
+ {% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %} {% endif %}