From 709ae9e69089f5df987e1a8263a6a3ba74b8c89a Mon Sep 17 00:00:00 2001 From: Sam Poyigi <6567634+sampoyigi@users.noreply.github.com> Date: Sat, 15 Jul 2023 12:31:18 +0100 Subject: [PATCH] Improve flashmessage exception Signed-off-by: Sam Poyigi <6567634+sampoyigi@users.noreply.github.com> --- resources/js/partials/flashmessage.js | 50 +++++++++++++------ resources/js/partials/request.js | 4 +- resources/lang/en/admin.php | 2 +- resources/scss/components/_alert.scss | 7 ++- .../views/admin/_partials/flash.blade.php | 2 +- src/Flame/Exception/ErrorHandler.php | 2 +- src/Flame/Exception/FlashException.php | 10 ++++ 7 files changed, 53 insertions(+), 24 deletions(-) diff --git a/resources/js/partials/flashmessage.js b/resources/js/partials/flashmessage.js index c1e45a82..86dc88b0 100644 --- a/resources/js/partials/flashmessage.js +++ b/resources/js/partials/flashmessage.js @@ -22,17 +22,23 @@ return FlashMessage.overlay(options) } - options = $.extend(options, FlashMessage.TOAST_DEFAULTS, FlashMessage.getIcon(options)) + options = $.extend(FlashMessage.TOAST_DEFAULTS, options, FlashMessage.getIcon(options)) return Swal.fire(FlashMessage.parseOptions(options)) } FlashMessage.overlay = function (options) { - options = $.extend({}, FlashMessage.DEFAULTS, FlashMessage.SWAL_DEFAULTS, options) + options = $.extend({}, + FlashMessage.DEFAULTS, + FlashMessage.SWAL_DEFAULTS, + options, FlashMessage.getIcon(options) + ) - options = $.extend(options, FlashMessage.getIcon(options)) - - return Swal.fire(FlashMessage.parseOptions(options)) + return Swal.fire(FlashMessage.parseOptions(options)).then((result) => { + if (result.isConfirmed && options.actionUrl) { + window.location.assign(options.actionUrl) + } + }) } FlashMessage.confirm = function (message, confirmCallback, cancelCallback) { @@ -49,7 +55,6 @@ cancelCallback() } }) - } FlashMessage.getIcon = function (options) { @@ -80,20 +85,30 @@ didOpen: (toast) => { toast.addEventListener('mouseenter', Swal.stopTimer) toast.addEventListener('mouseleave', Swal.resumeTimer) - } + }, + customClass: { + popup: 'bg-light', + }, } FlashMessage.SWAL_DEFAULTS = { position: 'top', timerProgressBar: true, + reverseButtons: true, + buttonsStyling: false, customClass: { container: 'modal-backdrop', - confirmButton: 'btn btn-primary', - cancelButton: 'btn btn-secondary', + confirmButton: 'btn btn-primary mx-2', + cancelButton: 'btn btn-light mx-2', + closeButton: 'btn btn-danger mx-2', + denyButton: 'btn btn-danger mx-2', }, showClass: { popup: 'animated fadeInDown' }, + hideClass: { + popup: 'animated fadeOutUp' + }, } FlashMessage.DEFAULTS = { @@ -104,28 +119,29 @@ class: 'success', interval: 5, allowDismiss: true, + actionUrl: undefined, } FlashMessage.ICONS = { warning: { icon: 'warning', - iconHtml: '', + iconHtml: '', }, danger: { icon: 'error', - iconHtml: '', + iconHtml: '', }, success: { icon: 'success', - iconHtml: '', + iconHtml: '', }, info: { icon: 'info', - iconHtml: '', + iconHtml: '', }, question: { icon: 'question', - iconHtml: '', + iconHtml: '', }, } @@ -141,16 +157,18 @@ // =============== $(document).render(function () { - $('[data-control="flash-message"]').each(function (index, element) { + $('[data-control="flash-message"]:not(.loaded)').each(function (index, element) { setTimeout(function () { $.ti.flashMessage($(element).data(), element) }, (index + 1) * 500) + $(element).addClass('loaded') }) - $('[data-control="flash-overlay"]').each(function (index, element) { + $('[data-control="flash-overlay"]:not(.loaded)').each(function (index, element) { $.ti.flashMessage.overlay($.extend({}, $(element).data(), $(element).data('closeOnEsc') === true ? { timer: (index + 1) * 3000 } : {})) + $(element).addClass('loaded') }) }) diff --git a/resources/js/partials/request.js b/resources/js/partials/request.js index 7c7183a5..f4598365 100644 --- a/resources/js/partials/request.js +++ b/resources/js/partials/request.js @@ -199,7 +199,9 @@ if (window.jQuery.request !== undefined) var _event = jQuery.Event('ajaxErrorMessage') $(window).trigger(_event, [message]) if (_event.isDefaultPrevented()) return - if (message) alert(message) + if (message) { + $.ti.flashMessage({text: message, class: 'danger'}) + } }, handleValidationMessage: function (message, fields) { diff --git a/resources/lang/en/admin.php b/resources/lang/en/admin.php index 440256ac..1265eb4e 100644 --- a/resources/lang/en/admin.php +++ b/resources/lang/en/admin.php @@ -100,7 +100,7 @@ 'alert_user_restricted' => 'Warning: You do not have the right permission to view this page, please contact the system administrator.', 'alert_location_restricted' => 'Warning: You do not have the right permission to access context outside your location, please contact the system administrator.', 'alert_warning_locationable_delete' => 'Warning: You do not have the right permission to delete record(s) attached to multiple locations, please contact the system administrator.', - 'alert_form_error_message' => 'Please correct the errors below.', + 'alert_form_error_message' => 'Sorry, there seems to be an error with your submission, Check the highlighted fields and try again.', 'alert_error_set_default' => '"%s" is disabled and cannot be set as default.', 'alert_missing_method' => 'Missing method [%s] in %s.', 'alert_missing_model_definition' => "Model '%s' does not contain a definition for '%s'.", diff --git a/resources/scss/components/_alert.scss b/resources/scss/components/_alert.scss index 44f68fcc..aee5126d 100644 --- a/resources/scss/components/_alert.scss +++ b/resources/scss/components/_alert.scss @@ -38,8 +38,6 @@ body.swal2-toast-shown { .swal2-container { - width: 420px; - &.swal2-top-end { top: 65px !important; right: 15px !important; @@ -58,14 +56,15 @@ body:not(.swal2-toast-shown) { background-color: $gray-200; border: 0; - .swal2-toast { - background-color: $gray-100; + &.swal2-toast { + padding: 0.6em 1em; .swal2-icon { width: 1.5em; min-width: 1.5em; height: 1.5em; margin: 0; + border-width: 0; } } diff --git a/resources/views/admin/_partials/flash.blade.php b/resources/views/admin/_partials/flash.blade.php index c1a61871..17c0d658 100644 --- a/resources/views/admin/_partials/flash.blade.php +++ b/resources/views/admin/_partials/flash.blade.php @@ -13,7 +13,7 @@ @class(['alert alert-'.$message['level'], 'alert-important' => $message['important']]) data-control="flash-message" data-icon="{{ $message['level'] }}" - data-title="{!! array_get($message, 'message') !!}" + data-text="{!! array_get($message, 'message') !!}" data-allow-dismiss="{{ $message['important'] ? 'false' : 'true' }}" role="alert" >{!! $message['message'] !!} diff --git a/src/Flame/Exception/ErrorHandler.php b/src/Flame/Exception/ErrorHandler.php index 003527b8..93d69f31 100644 --- a/src/Flame/Exception/ErrorHandler.php +++ b/src/Flame/Exception/ErrorHandler.php @@ -40,7 +40,7 @@ public function __construct(ExceptionHandler $handler) $handler->map(TokenMismatchException::class, function (TokenMismatchException $e) { return (new FlashException( lang('igniter::admin.alert_invalid_csrf_token'), 'danger', 419, $e->getPrevious() - ))->important()->overlay(); + ))->important()->overlay()->actionUrl(url()->current()); }); } diff --git a/src/Flame/Exception/FlashException.php b/src/Flame/Exception/FlashException.php index dc441aa6..0173ebec 100644 --- a/src/Flame/Exception/FlashException.php +++ b/src/Flame/Exception/FlashException.php @@ -16,6 +16,8 @@ class FlashException extends Exception protected bool $shouldReport = false; + protected ?string $actionUrl; + public function __construct($message, protected string $type = 'danger', $code = 406, Exception $previous = null) { $this->message = $message; @@ -69,6 +71,13 @@ public function important(): self return $this; } + public function actionUrl(string $url): self + { + $this->actionUrl = $url; + + return $this; + } + public function shouldReport(): self { $this->shouldReport = true; @@ -84,6 +93,7 @@ public function getContents() 'text' => $this->message, 'important' => $this->important, 'overlay' => $this->overlay, + 'actionUrl' => $this->actionUrl, ]; }