Notifications

AlertService lets you show Alerts as notifications from your PHP code. The messages appear in the bottom right corner of the page.

Usage

Include the AlertContainer component in your root layout (the one that contains the body tag):

<!DOCTYPE html>
<html lang="en">

<head>
    ...
</head>

<body>
    <slot></slot>
    <ViewiAssets />
</body>

</html>

Inject AlertService in your component.

Example

HTML:

<button type="button" class="btn btn-success" (click)="showSuccess">Show success</button>
<button type="button" class="btn btn-danger" (click)="showError">Show error</button>

PHP:

<?php

use Viewi\Components\BaseComponent;
use Viewi\UI\Components\Alerts\AlertService;

class ProfilePage extends BaseComponent
{
    public function __construct(private AlertService $alerts) {}

    public function showSuccess()
    {
        $this->alerts->success('Your changes have been saved.', 5000);
    }

    public function showError()
    {
        $this->alerts->error('Could not save your changes. Please try again.', 5000);
    }
}

Notification with an action

Use the action method to add a button to the message, for example "Undo" after a bulk change or "Retry" after a failed request. When the user presses the button, your callback runs and the message closes. If the message closes by timeout or by the close button, the callback does not run.

Try "Archive all" in the example above, then press "Undo" in the notification.

HTML:

<div if="{hasFiles()}">
    <ul class="list-group mb-3">
        <li foreach="$files as $file" class="list-group-item">$file</li>
    </ul>
    <button type="button" class="btn btn-primary" (click)="archiveAll">Archive all</button>
</div>
<p if="{!hasFiles()}" class="text-muted">All files are archived.</p>

PHP:

<?php

use Viewi\Components\BaseComponent;
use Viewi\UI\Components\Alerts\AlertService;

class FilesPage extends BaseComponent
{
    public array $files = ['Report.pdf', 'Invoice.pdf', 'Notes.txt'];
    public array $archived = [];

    public function __construct(private AlertService $alerts) {}

    public function hasFiles()
    {
        return count($this->files) > 0;
    }

    public function archiveAll()
    {
        $total = count($this->files);
        $this->archived = $this->files;
        $this->files = [];
        $this->alerts->action(
            'success',
            'Moved ' . $total . ' files to Archive.',
            'Undo',
            function () {
                $this->files = $this->archived;
                $this->archived = [];
            },
            8000
        );
    }
}

Give action messages a timeout. The offer to undo only makes sense for a short time after the change.

Methods

success(string $message, ?int $timeout = null) - success notification.

error(string $message, ?int $timeout = null) - error notification.

warning(string $message, ?int $timeout = null) - warning notification.

info(string $message, ?int $timeout = null) - information notification.

message(string $variant, string $body, ?int $timeout = null) - notification with any variant. Accepts the same variants as the Alert component.

action(string $variant, string $body, string $actionLabel, callable $action, ?int $timeout = null) - notification with an action button.

remove(MessageModel $message) - removes a message from the list. AlertContainer calls it when a message closes.

Parameters

message, body - the text that you want to display.

variant - the variant of the Alert: success, error, warning, info, or a custom CSS class.

actionLabel - the text of the action button.

action - the callback that runs when the user presses the action button.

timeout - (optional), time in milliseconds after which the message closes by itself. Default: null, the message stays until the user closes it.