PHP8 - Laravel 11

Appearance

SweetAlert2 ​

PODCAST
  • SweetAlert2 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
js
import './bootstrap';
...
import './sweetAlert2';     
...
  • Open the JavaScript file resources/js/sweetAlert2.js
    • Import the SweetAlert2 library
js
import Swal from 'sweetalert2';
  • 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 4: this function is called whenever an event with the name swal:toast is triggered
    • Line 6 - 17: Swal.mixin() contains the default configuration for our toast message
    • Line 21: 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 24: calls the Toast.fire() method and pass the configuration properties to show the actual toast message
js
import Swal from 'sweetalert2';

// 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.onmouseenter = Swal.stopTimer;
      toast.onmouseleave = Swal.resumeTimer;
    }
  });

  // convert some attributes
  let config = Array.isArray(event.detail) ? event.detail[0] : event.detail;
  config = convertAttributes(config);

  // override default settings or add new settings
  Toast.fire(config);
});

function convertAttributes(attributes) {
  // convert predefined 'words' to a real color
  const colorMap = {
    danger: 'rgb(254, 226, 226)',
    error: 'rgb(254, 226, 226)',
    warning: 'rgb(255, 237, 213)',
    primary: 'rgb(207, 250, 254)',
    info: 'rgb(207, 250, 254)',
    success: 'rgb(220, 252, 231)'
  };

  if (colorMap[attributes.background]) {
    attributes.background = colorMap[attributes.background];
  }

  // 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
  • 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:
    (These examples are just for illustration purposes. You don't have to make them right now.)
js
document.getElementById('btnToast').addEventListener('click', () => {
    window.dispatchEvent(new CustomEvent('swal:toast', {
        detail: {
          title:'Hello world',
          text: 'Message from vanilla js',
          icon: 'success',
          background: 'success',
        }
    }));
});

Toast message

  • 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 26 - 27: move the next property to the nextEvent variable and delete it from the event.detail object
    • Line 29: cals the convertAttributes() function to convert some attributes of the event (see above)
    • Line 31: calls the fire() method and pass the configuration properties to show the actual confirmation dialog box
    • Line 32 - 38: the fire() method returns a promise
      • Line 34: 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 36: dispatch a Livewire event with event as the event name and params as the payload
js
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
    let config = Array.isArray(event.detail) ? event.detail[0] : event.detail;
    const NextEvent = config.next ;
    delete config.next;
    // convert some attributes
    config = convertAttributes(config);
    // 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.dispatch(NextEvent.event, NextEvent.params);
            }
        });
});

function convertAttributes(attributes) {...}
  • An example of how to use the popup confirmation dialog box:
    (These examples are just for illustration purposes. You don't have to make them right now.)
  • 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
php
@click="$dispatch('swal:confirm', {
    html: 'Delete {{ $genre->name }}?',
    cancelButtonText: 'NO!',
    confirmButtonText: 'YES DELETE THIS GENRE',
    next: {
        event: 'delete-genre',
        params: {
            id: {{ $genre->id }}
        }
    }
})"

Delete genre

Trait ​

  • Trails are a way to group reusable code in a single file
  • Trails let you define methods and properties that can be "mixed in" to multiple classes, promoting modularity and reducing code duplication.
  • Why Use Traits in Laravel?
    • Code Organization: Group related functionality together, making your codebase more structured and understandable.
    • Reusability: Avoid writing the same logic in different classes.
    • Flexibility: Combine traits to create unique class behaviors.

Create a SweetAlertTrait ​

  • Run the command php artisan make:trait Traits/SweetAlertTrait
  • Open the file app/Traits/SweetAlertTrait.php and replace the content with the following code:
php
<?php

namespace App\Traits;

use Livewire\WithPagination;

trait SweetAlertTrait
{
    /**
     * @param string $text
     * @param string $background ('success', 'danger', 'error', 'warning', 'primary' 'info')
     * @param array $options (see link below for all options)
     * @see https://sweetalert2.github.io/#configuration
     * @return void
     */
    public function swalToast(string $text = '', string $background = 'success', array $options = []): void
    {
        $defaults = [
            'text' => $text,
            'background' => $background,
        ];

        $options = array_merge($defaults, $options);
        $this->dispatch('swal:toast', $options);
    }

    /**
     * Display a confirmation dialog with SweetAlert.
     *
     * @param string $title The title of the dialog.
     * @param string $text The text of the dialog.
     * @param string $background ('success', 'danger', 'error', 'warning', 'primary' 'info')
     * @param string|null $nextEvent The event to fire when the user confirms.
     * @param int $id The id to pass to the event.
     * @param array $options (see link below for all options)
     * @see https://sweetalert2.github.io/#configuration
     *
     * @return void
     */
    public function swalConfirm(string $title = '', string $text = '', string $background = 'white', string|null $nextEvent = null, int $id = 0, array $options = []): void
    {
        $defaults = [
            'title' => $title,
            'text' => $text,
            'background' => $background,
            'next' => [
                'event' => $nextEvent,
                'params' => ['id' => $id],
            ],
        ];

        $options = array_merge($defaults, $options);
        $this->dispatch('swal:confirm', $options);
    }
}
  • This trait contains two methods:
    • swalToast(): show a toast message
    • swalConfirm(): show a confirmation dialog box
  • The first parameter of each method are the one that are most likely to change, so they are required
  • The other parameters are optional and can be added to the last parameter (an array) of the method
  • All settings are explained in the SweetAlert2 documentation: https://sweetalert2.github.io/#configuration

Use SweetAlertTrait in a (livewire) Component ​

This example shows how to use the SweetAlertTrait in a Livewire component (you don't have to make this right now)

  • Line 6: import the SweetAlertTrait
  • Line 12 - 15: call the swalToast() method to show a toast message
    • First parameter: the text to show in the toast message
    • Second parameter: the background color of the toast message
    • Third parameter: an array with additional options like the position of the toast message and the icon
php
<?php
...

class Genres extends Component
{
    use SweetAlertTrait;            

    // delete a genre     
    public function delete(Genre $genre)
    {
        $genre->delete();
        $this->swalToast('The genre <b><i>{$genre->name}</i></b> has been deleted', 'success', [     
            'icon' => 'success',
            'position' => 'top-start',
        ]); 
    }
}

Last updated:

© 2024 - Vince Colson & Patrick Verhaert