Laravel on Werk Space

Livewire Orchestration Pattern (LOP)

Tue, 13 May 2025 00:00:00 -0500

Livewire Orchestration Pattern (LOP)

Audience

Developers working on the Lawn Bowls Club application (or other Laravel/Livewire projects).

Purpose

This document outlines the “Livewire Orchestration Pattern” (LOP), a file and component structure designed to effectively build and manage sophisticated features using Livewire. It explains each component of the pattern and how they interact.

Core Concepts

The LOP extends the traditional Model-View-Controller (MVC) paradigm by explicitly recognizing the controller role of Livewire components and introducing the Orchestrator and Wrapper layers for structuring complex, interactive UIs in Laravel.

Laravel, Livewire, etc

Sat, 26 Apr 2025 00:00:00 -0500

Overview

Subsections cover a variety of code snippets, how-tos, hints, and other miscellany associated with my work in laravel web applications. Topics covered include, Laravel, Livewire, Tailwindcss, and Alpine.js.

Toastr

Sat, 26 Apr 2025 00:00:00 -0500

Toastr Notifications and Redirects

Audience

Developers working on the Lawn Bowls Club application (or other Laravel/Livewire projects).

Purpose

Provide consistent methods for:

Triggering toast notifications
Redirecting users after a delay while locking the page

Global Toastr Notifications via Custom Events

How It Works

Dispatch a toast CustomEvent.
A global script listens and fires Toastr.
No direct toastr.success() calls from Blade or Livewire.

Global Toastr Listener Setup (already exists)

<script>
    toastr.options = {
        "closeButton": true,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "timeOut": 4500,
    };

    window.addEventListener('toast', event => {
        const detail = Array.isArray(event.detail) ? event.detail[0] : event.detail;
        if (typeof toastr[detail.alertType] === 'function') {
            toastr[detail.alertType](detail.alertMessage);
        }
    });
</script>

Dispatching a Toast

From Blade:

Scroll

Sat, 26 Apr 2025 00:00:00 -0500

Scroll to Element

Audience

Developers working on the Lawn Bowls Club application (or other Laravel/Livewire projects).

Purpose

Provide consistent methods for:

Scrolling to a page element after an action

Scroll to an Element after a Livewire or Blade Event

How It Works

Use a global scroll-to-element event listener.
Dispatch scroll-to-element with the desired elementId.
The page will smooth scroll to that element with a customizable offset.

Setup (One Time)

Push this into @push('scripts') in your Blade view or layout: