Cómo mostrar alertas en Laravel con SweetAlert2 y validaciones personalizadas

En esta entrada te mostraré cómo integrar SweetAlert2 en Laravel para mostrar alertas interactivas al eliminar registros. Además, implementaremos validaciones que verifican si hay dependencias antes de eliminar, asegurando que el proceso sea seguro y controlado. Con un ejemplo práctico, veremos cómo SweetAlert2 mejora la experiencia de usuario al mostrar mensajes personalizados según el resultado de la operación.

class RoleController extends Controller
{
    public function destroy(Role $role)
    {
        if ($role->users()->exists()) {
            return response()->json([
                'message' => __('Exists :quantity users with this role', ['quantity' => $role->users()->count()]),
            ], 409);
        }

        $role->delete();

     return response()->json([
            'message' => __('Role deleted successfully'),
        ]);
    }
}

Blade

@section('content')
<button class="btn btn-sm btn-danger" onclick="deleteData({{ $role->id }})">
    <i class="ti ti-trash text-white"></i>
</button>
@endsection
@push('scripts')
    <script>
        function deleteData(id) {
            Swal.fire({
                title: '{{ __('Are you sure?') }}',
                text: '{{ __('You will not be able to recover this record!') }}',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '{{ __('Yes, delete it!') }}',
                cancelButtonText: '{{ __('Cancel') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route('roles.destroy', ':id') }}'.replace(':id', id),
                        type: 'POST',
                        data: {
                            _method: 'DELETE',
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            message = response.message;
                            Swal.fire(
                                '{{ __('Deleted!') }}',
                                message,
                                'success'
                            ).then(() => {
                                location.reload();
                            });
                        },
                        error: function(response) {
                            message = JSON.parse(response.responseText).message;
                            Swal.fire(
                                '{{ __('Error!') }}',
                                message,
                                'warning'
                            );
                        }
                    });
                }
            });
        }
    </script>
@endpush