EP/myep
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace toasts

Browse Source
This commit is contained in:
Björn Fromme
2025-01-26 18:47:11 +01:00
parent 289668bcbd
commit 8e931c95e3
15 changed files with 54 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/controllers/toast_controller.js
-18
View File
@@ -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()
}
}
assets/styles/_components.css
-1
View File
@@ -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";
assets/styles/components/toast.css
-20
View File
@@ -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');
}
package-lock.json
Generated
+1 -7
View File
@@ -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",
package.json
+1 -2
View File
@@ -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"
}
}
templates/_partials/_alert.html.twig
+38 -11
View File
@@ -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 %}
<div>
{{ message }}
<div class="{{ html_classes('rounded-md p-4 mb-4', { 'bg-red-50': level == 'error', 'bg-green-50': level == 'success', 'bg-blue-50': level == 'info' }) }}">
<div class="flex">
<div class="shrink-0">
{% if level == 'error' %}
<svg class="size-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
</svg>
{% elseif level == 'success' %}
<svg class="size-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
{% else %}
<svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
</svg>
{% endif %}
</div>
{% endfor %}
{% endapply %}
<div class="ml-3">
{% if messages | length == 1 %}
<p class="{{ html_classes('text-sm font-medium', { 'text-red-800': level == 'error', 'text-green-800': level == 'success', 'text-blue-800': level == 'info' }) }}">
{{ messages[0] }}
</p>
{% else %}
<h3 class="{{ html_classes('text-sm font-medium', { 'text-red-800': level == 'error', 'text-green-800': level == 'success', 'text-blue-800': level == 'info' }) }}">
{{ title is defined ? title : 'Es gab mehrere Probleme' }}
</h3>
<div class="{{ html_classes('mt-2 text-sm', { 'text-red-700': level == 'error', 'text-green-700': level == 'success', 'text-blue-700': level == 'info' }) }}">
<ul role="list" class="list-disc space-y-1 pl-5">
{% for message in messages %}
<li>
{{ message }}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</div>
templates/_partials/_flashes.html.twig
+3 -3
View File
@@ -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 %}
templates/_partials/_toast.html.twig
-8
View File
@@ -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 %}
<div {{ stimulus_controller('toast', { 'text': message, 'class': 'toastify--' ~ level }) }}></div>
{% endfor %}
templates/booking/edit.html.twig
+3 -29
View File
@@ -1,37 +1,11 @@
{% extends 'layout.html.twig' %}
{% block content %}
{% include '_partials/_flashes.html.twig' %}
{{ form_start(form) }}
{% if not form.vars.valid %}
<div class="rounded-md bg-red-50 p-4 mb-4">
<div class="flex">
<div class="shrink-0">
<svg class="size-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
{% if form.vars.errors|length > 0 %}
<h3 class="text-sm font-medium text-red-800">
Die Buchung konnte nicht aktualisiert werden
</h3>
<div class="mt-2 text-sm text-red-700">
<ul role="list" class="list-disc space-y-1 pl-5">
{% for error in form.vars.errors %}
<li>
{{ error.message }}
</li>
{% endfor %}
</ul>
</div>
{% else %}
<h3 class="text-sm font-medium text-red-800">
Die Buchung konnte nicht aktualisiert werden. Problematische Eingaben wurden entsprechend markiert.
</h3>
{% endif %}
</div>
</div>
</div>
{% 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 %}
<div class="flex flex-col space-y-8 pb-4" {{ stimulus_controller('booking', { 'availabilities': availabilities.items }) }}>
<div class="p-8 border border-gray-300 rounded-md"
templates/booking/index.html.twig
+2 -4
View File
@@ -70,13 +70,11 @@
</a>
{% endif %}
<a href="{{ path('app_booking_confirmation', { 'id': booking.id }) }}"
class="button bg-button button--small"
target="_blank" {{ stimulus_action('loading', 'toggle') }}>
class="button bg-button button--small">
Bestätigung
</a>
<a href="{{ path('app_booking_documents', { 'id': booking.id }) }}"
class="button bg-button button--small"
target="_blank" {{ stimulus_action('loading', 'toggle') }}>
class="button bg-button button--small">
Reisedokumente
</a>
</div>
templates/layout.html.twig
-1
View File
@@ -13,7 +13,6 @@
{% endif %}
</div>
{% block content %}{% endblock %}
{% include '_partials/_flashes.html.twig' %}
{% include '_partials/_loading_indicator.html.twig' %}
</div>
{% endblock %}
templates/personal_data/index.html.twig
+1
View File
@@ -6,6 +6,7 @@
<h2 class="text-2xl font-semibold pb-4">
Persönliche Daten
</h2>
{% include '_partials/_flashes.html.twig' %}
{{ form_start(personalDataForm, { 'attr': { 'data-action': 'loading#toggle' } }) }}
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
{{ form_row(personalDataForm.firstName) }}
templates/registration/index.html.twig
+1
View File
@@ -4,6 +4,7 @@
<h1 class="mb-4">
Registrierung MyE&amp;P
</h1>
{% include '_partials/_flashes.html.twig' %}
{{ form_start(form, { 'attr': { 'data-action': 'loading#toggle' } }) }}
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 mb-4">
<div>
templates/reset_password/index.html.twig
+1
View File
@@ -4,6 +4,7 @@
<h1 class="mb-4">
Passwort vergessen
</h1>
{% include '_partials/_flashes.html.twig' %}
{{ form_start(form, { 'attr': { 'data-action': 'loading#toggle' } }) }}
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 mb-4">
{{ form_row(form.email) }}
templates/security/login.html.twig
+3 -7
View File
@@ -5,14 +5,10 @@
Login MyE&amp;P
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div id="login-form">
<div>
{% include '_partials/_flashes.html.twig' %}
{% if error %}
<div class="flex items-center space-x-1 bg-red-500 text-white p-2 rounded-md mb-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
<span class="flex-1 text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</span>
</div>
{% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %}
{% endif %}
<form action="{{ path('app_login') }}" method="post" {{ stimulus_action('loading', 'toggle') }}>
<div class="mb-4">