SweetAlert2

• SweetAlert2 (opens new window) is a popular JavaScript library that provides:
  • Toast messages e.g. when a record is successfully deleted from or updated in the database
  • Popup confirmation dialog box e.g. when deleting a record from the database
• To use SweetAlert2 in a Laravel project, you need to install the npm package (as a dev dependency) and create a JavaScript file that imports the SweetAlert2 library

Install SweetAlert2

• Start by installing SweetAlert2 with the terminal command: npm install sweetalert2 --save-dev

Preparation

• Create a JavaScript file sweetAlert2.js in the resources/js folder
• Open the resources/js/app.js file and add import sweetAlert2.js at the end of the file

...

import './sweetAlert2';

• Open the JavaScript file resources/js/sweetAlert2.js
  • Import the SweetAlert2 library
  • Add the SweetAlert2 library (Swal) to the window object

import Swal from 'sweetalert2';
window.Swal = Swal;

• Now you can use SweetAlert2 on every page of your application
• The disadvantage of this approach is that you have to write the full Swal 'fire' method every time you want to use SweetAlert2
• To avoid this, you can create a default configuration for a toast message and for a popup confirmation dialog box and overwrite the default configuration when needed
• This keeps the code DRY (Don't Repeat Yourself) and makes our code in the components and Blade files more readable and a lot shorter

Toast message

• Add the following code to the sweetalert2.js file:
• This code creates a default toast message with the SweetAlert2 library
  • Line 5: this function is called whenever an event with the name swal:toast is triggered
  • Line 7 - 18: Swal.mixin() contains the default configuration for our toast message
  • Line 20: calls the convertAttributes() function to convert some attributes of the event
    • The property background can contain, by default, any CSS color value (e.g. #ff0000, red, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), ...)
    • But now we can also use some predefined names for the background color: danger, error, warning, primary ;info and success (the words danger and error are converted to 'rgb(254, 226, 226)' etc.)
    • If the property text is set, the property will be transformed to the property html and then removed
  • Line 22: calls the Toast.fire() method and pass the configuration properties to show the actual toast message

import Swal from "sweetalert2";
window.Swal = Swal;

// toast with default settings and event listener
window.addEventListener('swal:toast', event => {
    // default settings for toasts
    const Toast = Swal.mixin({   
        toast: true,
        position: 'top-end',
        background: 'white',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    });
    // convert some attributes
    const Config = convertAttributes(event.detail);
    // override default settings or add new settings
    Toast.fire(Config);     
});

function convertAttributes(attributes) {
    // convert predefined 'words' to a real color
    switch (attributes.background) {
        case 'danger':
        case 'error':
            attributes.background = 'rgb(254, 226, 226)';
            break;
        case 'warning':
            attributes.background = 'rgb(255, 237, 213)';
            break;
        case 'primary':
        case 'info':
            attributes.background = 'rgb(207, 250, 254)';
            break;
        case 'success':
            attributes.background = 'rgb(220, 252, 231)';
            break;
    }
    // if the attribute 'text' is set, convert it to the attribute 'html'
    if (attributes.text) {      
        attributes.html = attributes.text;
        delete attributes.text;
    }
    return attributes;
}

TIP

• All possible options for the toast message can be found on the SweetAlert2 website (opens new window)
• You need at least the title or the text/html properties configured, otherwise the toast will be empty

• Some examples of how to use the toast message:

document.getElementById('btnToast').addEventListener('click', () => {
    window.dispatchEvent(new CustomEvent('swal:toast', {
        detail: {
          title:'Hello world',
          text: 'Message from vanilla js',
          icon: 'success',
          background: 'success',
        }
    }));
});

• Dispatch the browser event swal:toast from a Livewire component

$this->dispatchBrowserEvent('swal:toast', [
    'background' => 'info',
    'html' => "The genre  <b><i>{$this->name}</i></b> has been created",
]);

• Dispatch the browser event swal:toast from an Alpine component

@click="$dispatch('swal:toast', {
  title: 'A message from Alpine JS',
  icon: 'info',
  iconColor: 'gold',
  background: 'salmon',
  color: 'white',
  position: 'top',
})"

Popup confirmation dialog box

• Add the following code to the sweetalert2.js file:
• This code creates a default popup confirmation dialog box with the SweetAlert2 library
  • Line 8: this function is called whenever an event with the name swal:confirm is triggered
  • Line 10 - 23: Swal.mixin() contains the default configuration for the confirmation dialog box
  • Line 25 - 26: move the next property to the nextEvent variable and delete it from the event.detail object
  • Line 28: cals the convertAttributes() function to convert some attributes of the event (see above)
  • Line 30: calls the fire() method and pass the configuration properties to show the actual confirmation dialog box
  • Line 31 - 39: the fire() method returns a promise
    • Line 33: if the promise is resolved, check if the value of isConfirmed is set to true (you clicked on the conform button ) and if the variable NextEvent is set
    • If both conditions are true:
      • Line 35: dispatch a Livewire event with event as the event name and params as the payload
      • Line 37: dispatch a browser event with event as the event name and params as the payload

import Swal from "sweetalert2";
window.Swal = Swal;

// toast with default settings and event listener
window.addEventListener('swal:toast', event => { ... });

// confirm modal with default settings and event listener
window.addEventListener('swal:confirm', event => {
    // default settings for confirm modals
    const Confirm = Swal.mixin({
        width: 600,
        position: 'center',
        backdrop: true,
        showCancelButton: true,
        cancelButtonText: 'Cancel',
        cancelButtonColor: 'silver',
        showConfirmButton: true,
        confirmButtonText: 'Yes',
        confirmButtonColor: 'rgb(31, 41, 55)',
        reverseButtons: true,
        allowEscapeKey: true,
        allowOutsideClick: true,
    });
    // move the 'next' property to the 'nextEvent' variable and delete it from the 'event.detail' object
    const NextEvent = event.detail.next ;
    delete event.detail.next;
    // convert some attributes
    const Config = convertAttributes(event.detail);
    // override default settings or add new settings
    Confirm.fire(Config)
        .then(result => {
            // execute this function if the confirm button is clicked AND if a 'NextEvent' is not empty
            if (result.isConfirmed && NextEvent) {
                // dispatch a Livewire event with 'event' as the event name and 'params' as the payload
                window.Livewire.emit(NextEvent.event, NextEvent.params);
                // dispatch a browser event with 'closeModal' as the event name and 'params' as the payload
                window.dispatchEvent(new CustomEvent(NextEvent.event, NextEvent.params));
            }
        });
});

function convertAttributes(attributes) { ...}

• An example of how to use the popup confirmation dialog box:
  (This example is a simplified version of how we delete a genre in this project)

• When you click on the delete (trash) button, the confirmation dialog box is shown
• The property next contains the event name (event) and the payload (params) that will be dispatched when the confirm button is clicked
• If the cancel button is clicked, the confirmation dialog box is closed and nothing happens

@click="$dispatch('swal:confirm', {
    html: 'Delete {{ $genre->name }}?',
    cancelButtonText: 'NO!',
    confirmButtonText: 'YES DELETE THIS GENRE',
    next: {
        event: 'delete-genre',
        params: {
            id: {{ $genre->id }}
        }
    }
})"

• Line 2: the component 'listens' to the event delete-genre and executes the delete() method when the event is triggered
• Line 8: the genre is deleted from the database
• Line 9: show a toast message to confirm that the genre has been deleted

protected $listeners = [
    'delete-genre' => 'delete',
];

// delete the genre
public function delete(Genre $genre)
{
    $genre->delete();
    $this->dispatchBrowserEvent('swal:toast', [
        'background' => 'success',
        'text' => "The genre <b><i>{$genre->name}</i></b> has been deleted",
    ]);
}

• Use the script below to listen to the browser event that is dispatched when the confirm button is clicked

<script>
  window.addEventListener('delete-genre', event => {
    console.log('delete-genre triggered');
  });
</script>