Improve flashmessage exception

Signed-off-by: Sam Poyigi <[email protected]>

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: '<i class="fa fa-fw fa-exclamation-triangle"></i>',
+ iconHtml: '<i class="fa fa-fw fa-xs fa-exclamation-triangle"></i>',
  },
  danger: {
  icon: 'error',
- iconHtml: '<i class="fa fa-fw fa-times-circle"></i>',
+ iconHtml: '<i class="fa fa-fw fa-xs fa-times-circle"></i>',
  },
  success: {
  icon: 'success',
- iconHtml: '<i class="fa fa-fw fa-check"></i>',
+ iconHtml: '<i class="fa fa-fw fa-xs fa-check"></i>',
  },
  info: {
  icon: 'info',
- iconHtml: '<i class="fa fa-fw fa-info-circle"></i>',
+ iconHtml: '<i class="fa fa-fw fa-xs fa-info-circle"></i>',
  },
  question: {
  icon: 'question',
- iconHtml: '<i class="fa fa-fw fa-question-circle"></i>',
+ iconHtml: '<i class="fa fa-fw fa-xs fa-question-circle"></i>',
  },
  }
 
@@ -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')
  })
  })
 

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) {

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'.",

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;
  }
  }
 

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'] !!}</div>

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());
  });
  }
 

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,
  ];
  }