aigroup-workflow 2.2.1 → 2.2.3

package/skills/php/laravel-specialist/references/livewire.md

@@ -1,512 +1,512 @@
-# Livewire Components
-
-## Component Patterns
-
-```php
-namespace App\Http\Livewire;
-
-use Livewire\Component;
-use Livewire\WithPagination;
-use Livewire\WithFileUploads;
-use App\Models\Post;
-
-class PostList extends Component
-{
-    use WithPagination, WithFileUploads;
-
-    public string $search = '';
-    public string $sortBy = 'created_at';
-    public string $sortDirection = 'desc';
-    public ?int $categoryId = null;
-
-    protected $queryString = [
-        'search' => ['except' => ''],
-        'sortBy' => ['except' => 'created_at'],
-        'categoryId' => ['except' => null],
-    ];
-
-    public function updatingSearch(): void
-    {
-        $this->resetPage();
-    }
-
-    public function sortBy(string $field): void
-    {
-        if ($this->sortBy === $field) {
-            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
-        } else {
-            $this->sortBy = $field;
-            $this->sortDirection = 'asc';
-        }
-    }
-
-    public function render()
-    {
-        return view('livewire.post-list', [
-            'posts' => Post::query()
-                ->when($this->search, fn($q) => $q->where('title', 'like', "%{$this->search}%"))
-                ->when($this->categoryId, fn($q) => $q->where('category_id', $this->categoryId))
-                ->orderBy($this->sortBy, $this->sortDirection)
-                ->paginate(10),
-        ]);
-    }
-}
-```
-
-## Blade Template
-
-```blade
-<div>
-    {{-- Search --}}
-    <input
-        type="text"
-        wire:model.debounce.300ms="search"
-        placeholder="Search posts..."
-        class="form-input"
-    >
-
-    {{-- Filter by category --}}
-    <select wire:model="categoryId">
-        <option value="">All Categories</option>
-        @foreach($categories as $category)
-            <option value="{{ $category->id }}">{{ $category->name }}</option>
-        @endforeach
-    </select>
-
-    {{-- Sortable table --}}
-    <table>
-        <thead>
-            <tr>
-                <th wire:click="sortBy('title')" style="cursor: pointer">
-                    Title
-                    @if($sortBy === 'title')
-                        <span>{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
-                    @endif
-                </th>
-                <th wire:click="sortBy('created_at')" style="cursor: pointer">
-                    Date
-                    @if($sortBy === 'created_at')
-                        <span>{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
-                    @endif
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach($posts as $post)
-                <tr>
-                    <td>{{ $post->title }}</td>
-                    <td>{{ $post->created_at->diffForHumans() }}</td>
-                </tr>
-            @endforeach
-        </tbody>
-    </table>
-
-    {{-- Pagination --}}
-    {{ $posts->links() }}
-
-    {{-- Loading states --}}
-    <div wire:loading wire:target="search">
-        Searching...
-    </div>
-</div>
-```
-
-## Form Component
-
-```php
-namespace App\Http\Livewire;
-
-use Livewire\Component;
-use App\Models\Post;
-
-class PostForm extends Component
-{
-    public ?Post $post = null;
-    public string $title = '';
-    public string $content = '';
-    public array $tags = [];
-    public $image;
-
-    protected function rules(): array
-    {
-        return [
-            'title' => 'required|min:3|max:255',
-            'content' => 'required|min:10',
-            'tags' => 'array|max:5',
-            'tags.*' => 'exists:tags,id',
-            'image' => 'nullable|image|max:2048',
-        ];
-    }
-
-    public function mount(?Post $post = null): void
-    {
-        if ($post) {
-            $this->post = $post;
-            $this->title = $post->title;
-            $this->content = $post->content;
-            $this->tags = $post->tags->pluck('id')->toArray();
-        }
-    }
-
-    public function updated($propertyName): void
-    {
-        $this->validateOnly($propertyName);
-    }
-
-    public function save(): void
-    {
-        $validated = $this->validate();
-
-        if ($this->post) {
-            $this->post->update($validated);
-            $message = 'Post updated successfully!';
-        } else {
-            $this->post = Post::create($validated);
-            $message = 'Post created successfully!';
-        }
-
-        if ($this->image) {
-            $this->post->update([
-                'image_path' => $this->image->store('posts', 'public'),
-            ]);
-        }
-
-        $this->post->tags()->sync($this->tags);
-
-        session()->flash('message', $message);
-        $this->redirect(route('posts.show', $this->post));
-    }
-
-    public function render()
-    {
-        return view('livewire.post-form');
-    }
-}
-```
-
-## Form Template
-
-```blade
-<form wire:submit.prevent="save">
-    {{-- Title --}}
-    <div>
-        <label for="title">Title</label>
-        <input
-            type="text"
-            wire:model.defer="title"
-            id="title"
-            class="@error('title') border-red-500 @enderror"
-        >
-        @error('title')
-            <span class="text-red-500">{{ $message }}</span>
-        @enderror
-    </div>
-
-    {{-- Content --}}
-    <div>
-        <label for="content">Content</label>
-        <textarea
-            wire:model.defer="content"
-            id="content"
-            class="@error('content') border-red-500 @enderror"
-        ></textarea>
-        @error('content')
-            <span class="text-red-500">{{ $message }}</span>
-        @enderror
-    </div>
-
-    {{-- Tags --}}
-    <div>
-        <label>Tags</label>
-        @foreach($availableTags as $tag)
-            <label>
-                <input
-                    type="checkbox"
-                    wire:model="tags"
-                    value="{{ $tag->id }}"
-                >
-                {{ $tag->name }}
-            </label>
-        @endforeach
-        @error('tags')
-            <span class="text-red-500">{{ $message }}</span>
-        @enderror
-    </div>
-
-    {{-- File Upload --}}
-    <div>
-        <label>Image</label>
-        <input type="file" wire:model="image">
-
-        @error('image')
-            <span class="text-red-500">{{ $message }}</span>
-        @enderror
-
-        {{-- Upload progress --}}
-        <div wire:loading wire:target="image">
-            Uploading...
-        </div>
-
-        {{-- Preview --}}
-        @if ($image)
-            <img src="{{ $image->temporaryUrl() }}" alt="Preview">
-        @endif
-    </div>
-
-    {{-- Submit --}}
-    <button type="submit" wire:loading.attr="disabled">
-        <span wire:loading.remove>Save</span>
-        <span wire:loading>Saving...</span>
-    </button>
-</form>
-
-@if (session()->has('message'))
-    <div class="alert alert-success">
-        {{ session('message') }}
-    </div>
-@endif
-```
-
-## Real-time Validation
-
-```php
-class PostForm extends Component
-{
-    public string $title = '';
-
-    protected $rules = [
-        'title' => 'required|min:3|unique:posts,title',
-    ];
-
-    // Real-time validation
-    public function updated($propertyName): void
-    {
-        $this->validateOnly($propertyName);
-    }
-
-    // Custom validation messages
-    protected $messages = [
-        'title.required' => 'The post title is required.',
-        'title.min' => 'The title must be at least 3 characters.',
-        'title.unique' => 'This title is already taken.',
-    ];
-
-    // Custom attribute names
-    protected $validationAttributes = [
-        'title' => 'post title',
-    ];
-}
-```
-
-## Events
-
-```php
-// Emit event
-class PostList extends Component
-{
-    public function deletePost($postId): void
-    {
-        Post::find($postId)->delete();
-
-        $this->emit('postDeleted', $postId);
-    }
-}
-
-// Listen to event
-class PostStats extends Component
-{
-    protected $listeners = ['postDeleted' => 'updateStats'];
-
-    public function updateStats($postId): void
-    {
-        // Update statistics
-    }
-}
-
-// Emit to specific component
-$this->emitTo('post-stats', 'refresh');
-
-// Emit to parent/children
-$this->emitUp('saved');
-$this->emitSelf('refresh');
-
-// Browser events
-$this->dispatchBrowserEvent('post-saved', ['id' => $post->id]);
-```
-
-## Listen to Browser Events
-
-```blade
-<div
-    x-data
-    @post-saved.window="alert('Post saved!')"
->
-    <!-- content -->
-</div>
-
-<script>
-window.addEventListener('post-saved', event => {
-    console.log('Post ID:', event.detail.id);
-});
-</script>
-```
-
-## Polling
-
-```blade
-{{-- Poll every 2 seconds --}}
-<div wire:poll.2s>
-    Current time: {{ now() }}
-</div>
-
-{{-- Poll specific action --}}
-<div wire:poll.5s="checkStatus">
-    Status: {{ $status }}
-</div>
-
-{{-- Keep polling until condition --}}
-<div wire:poll.keep-alive.2s>
-    <!-- content -->
-</div>
-```
-
-## Loading States
-
-```blade
-{{-- Basic loading state --}}
-<div wire:loading>
-    Loading...
-</div>
-
-{{-- Target specific action --}}
-<div wire:loading wire:target="save">
-    Saving...
-</div>
-
-{{-- Hide element while loading --}}
-<div wire:loading.remove>
-    Content (hidden during load)
-</div>
-
-{{-- Delay loading indicator --}}
-<div wire:loading.delay>
-    This appears after 200ms
-</div>
-
-{{-- Custom delay --}}
-<div wire:loading.delay.longest>
-    This appears after 1s
-</div>
-
-{{-- Loading classes --}}
-<button
-    wire:click="save"
-    wire:loading.class="opacity-50"
-    wire:loading.class.remove="bg-blue-500"
->
-    Save
-</button>
-
-{{-- Loading attributes --}}
-<button
-    wire:click="save"
-    wire:loading.attr="disabled"
->
-    Save
-</button>
-```
-
-## Traits
-
-```php
-// Pagination
-use Livewire\WithPagination;
-
-class PostList extends Component
-{
-    use WithPagination;
-
-    public function render()
-    {
-        return view('livewire.post-list', [
-            'posts' => Post::paginate(10),
-        ]);
-    }
-}
-
-// File uploads
-use Livewire\WithFileUploads;
-
-class UploadPhoto extends Component
-{
-    use WithFileUploads;
-
-    public $photo;
-
-    public function save(): void
-    {
-        $this->validate([
-            'photo' => 'image|max:1024',
-        ]);
-
-        $this->photo->store('photos');
-    }
-}
-```
-
-## Authorization
-
-```php
-class PostForm extends Component
-{
-    public Post $post;
-
-    public function mount(Post $post): void
-    {
-        $this->authorize('update', $post);
-        $this->post = $post;
-    }
-
-    public function save(): void
-    {
-        $this->authorize('update', $this->post);
-        // Save logic
-    }
-}
-```
-
-## Performance Tips
-
-1. **Use wire:model.defer** - Batch updates on form submit
-2. **Lazy load components** - Use wire:init for heavy operations
-3. **Cache computed properties** - Use #[Computed] attribute
-4. **Disable polling when hidden** - Use wire:poll.visible
-5. **Optimize queries** - Eager load relationships
-6. **Use wire:key** - Prevent re-rendering entire lists
-7. **Debounce input** - Use wire:model.debounce
-8. **Use pagination** - Don't load all records at once
-
-```php
-use Livewire\Attributes\Computed;
-
-class PostList extends Component
-{
-    #[Computed]
-    public function posts()
-    {
-        return Post::with('user')->paginate(10);
-    }
-
-    public function render()
-    {
-        return view('livewire.post-list');
-    }
-}
-```
-
-```blade
-{{-- Access computed property --}}
-@foreach($this->posts as $post)
-    <!-- content -->
-@endforeach
-```
+# Livewire Components
+
+## Component Patterns
+
+```php
+namespace App\Http\Livewire;
+
+use Livewire\Component;
+use Livewire\WithPagination;
+use Livewire\WithFileUploads;
+use App\Models\Post;
+
+class PostList extends Component
+{
+    use WithPagination, WithFileUploads;
+
+    public string $search = '';
+    public string $sortBy = 'created_at';
+    public string $sortDirection = 'desc';
+    public ?int $categoryId = null;
+
+    protected $queryString = [
+        'search' => ['except' => ''],
+        'sortBy' => ['except' => 'created_at'],
+        'categoryId' => ['except' => null],
+    ];
+
+    public function updatingSearch(): void
+    {
+        $this->resetPage();
+    }
+
+    public function sortBy(string $field): void
+    {
+        if ($this->sortBy === $field) {
+            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            $this->sortBy = $field;
+            $this->sortDirection = 'asc';
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.post-list', [
+            'posts' => Post::query()
+                ->when($this->search, fn($q) => $q->where('title', 'like', "%{$this->search}%"))
+                ->when($this->categoryId, fn($q) => $q->where('category_id', $this->categoryId))
+                ->orderBy($this->sortBy, $this->sortDirection)
+                ->paginate(10),
+        ]);
+    }
+}
+```
+
+## Blade Template
+
+```blade
+<div>
+    {{-- Search --}}
+    <input
+        type="text"
+        wire:model.debounce.300ms="search"
+        placeholder="Search posts..."
+        class="form-input"
+    >
+
+    {{-- Filter by category --}}
+    <select wire:model="categoryId">
+        <option value="">All Categories</option>
+        @foreach($categories as $category)
+            <option value="{{ $category->id }}">{{ $category->name }}</option>
+        @endforeach
+    </select>
+
+    {{-- Sortable table --}}
+    <table>
+        <thead>
+            <tr>
+                <th wire:click="sortBy('title')" style="cursor: pointer">
+                    Title
+                    @if($sortBy === 'title')
+                        <span>{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
+                    @endif
+                </th>
+                <th wire:click="sortBy('created_at')" style="cursor: pointer">
+                    Date
+                    @if($sortBy === 'created_at')
+                        <span>{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
+                    @endif
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach($posts as $post)
+                <tr>
+                    <td>{{ $post->title }}</td>
+                    <td>{{ $post->created_at->diffForHumans() }}</td>
+                </tr>
+            @endforeach
+        </tbody>
+    </table>
+
+    {{-- Pagination --}}
+    {{ $posts->links() }}
+
+    {{-- Loading states --}}
+    <div wire:loading wire:target="search">
+        Searching...
+    </div>
+</div>
+```
+
+## Form Component
+
+```php
+namespace App\Http\Livewire;
+
+use Livewire\Component;
+use App\Models\Post;
+
+class PostForm extends Component
+{
+    public ?Post $post = null;
+    public string $title = '';
+    public string $content = '';
+    public array $tags = [];
+    public $image;
+
+    protected function rules(): array
+    {
+        return [
+            'title' => 'required|min:3|max:255',
+            'content' => 'required|min:10',
+            'tags' => 'array|max:5',
+            'tags.*' => 'exists:tags,id',
+            'image' => 'nullable|image|max:2048',
+        ];
+    }
+
+    public function mount(?Post $post = null): void
+    {
+        if ($post) {
+            $this->post = $post;
+            $this->title = $post->title;
+            $this->content = $post->content;
+            $this->tags = $post->tags->pluck('id')->toArray();
+        }
+    }
+
+    public function updated($propertyName): void
+    {
+        $this->validateOnly($propertyName);
+    }
+
+    public function save(): void
+    {
+        $validated = $this->validate();
+
+        if ($this->post) {
+            $this->post->update($validated);
+            $message = 'Post updated successfully!';
+        } else {
+            $this->post = Post::create($validated);
+            $message = 'Post created successfully!';
+        }
+
+        if ($this->image) {
+            $this->post->update([
+                'image_path' => $this->image->store('posts', 'public'),
+            ]);
+        }
+
+        $this->post->tags()->sync($this->tags);
+
+        session()->flash('message', $message);
+        $this->redirect(route('posts.show', $this->post));
+    }
+
+    public function render()
+    {
+        return view('livewire.post-form');
+    }
+}
+```
+
+## Form Template
+
+```blade
+<form wire:submit.prevent="save">
+    {{-- Title --}}
+    <div>
+        <label for="title">Title</label>
+        <input
+            type="text"
+            wire:model.defer="title"
+            id="title"
+            class="@error('title') border-red-500 @enderror"
+        >
+        @error('title')
+            <span class="text-red-500">{{ $message }}</span>
+        @enderror
+    </div>
+
+    {{-- Content --}}
+    <div>
+        <label for="content">Content</label>
+        <textarea
+            wire:model.defer="content"
+            id="content"
+            class="@error('content') border-red-500 @enderror"
+        ></textarea>
+        @error('content')
+            <span class="text-red-500">{{ $message }}</span>
+        @enderror
+    </div>
+
+    {{-- Tags --}}
+    <div>
+        <label>Tags</label>
+        @foreach($availableTags as $tag)
+            <label>
+                <input
+                    type="checkbox"
+                    wire:model="tags"
+                    value="{{ $tag->id }}"
+                >
+                {{ $tag->name }}
+            </label>
+        @endforeach
+        @error('tags')
+            <span class="text-red-500">{{ $message }}</span>
+        @enderror
+    </div>
+
+    {{-- File Upload --}}
+    <div>
+        <label>Image</label>
+        <input type="file" wire:model="image">
+
+        @error('image')
+            <span class="text-red-500">{{ $message }}</span>
+        @enderror
+
+        {{-- Upload progress --}}
+        <div wire:loading wire:target="image">
+            Uploading...
+        </div>
+
+        {{-- Preview --}}
+        @if ($image)
+            <img src="{{ $image->temporaryUrl() }}" alt="Preview">
+        @endif
+    </div>
+
+    {{-- Submit --}}
+    <button type="submit" wire:loading.attr="disabled">
+        <span wire:loading.remove>Save</span>
+        <span wire:loading>Saving...</span>
+    </button>
+</form>
+
+@if (session()->has('message'))
+    <div class="alert alert-success">
+        {{ session('message') }}
+    </div>
+@endif
+```
+
+## Real-time Validation
+
+```php
+class PostForm extends Component
+{
+    public string $title = '';
+
+    protected $rules = [
+        'title' => 'required|min:3|unique:posts,title',
+    ];
+
+    // Real-time validation
+    public function updated($propertyName): void
+    {
+        $this->validateOnly($propertyName);
+    }
+
+    // Custom validation messages
+    protected $messages = [
+        'title.required' => 'The post title is required.',
+        'title.min' => 'The title must be at least 3 characters.',
+        'title.unique' => 'This title is already taken.',
+    ];
+
+    // Custom attribute names
+    protected $validationAttributes = [
+        'title' => 'post title',
+    ];
+}
+```
+
+## Events
+
+```php
+// Emit event
+class PostList extends Component
+{
+    public function deletePost($postId): void
+    {
+        Post::find($postId)->delete();
+
+        $this->emit('postDeleted', $postId);
+    }
+}
+
+// Listen to event
+class PostStats extends Component
+{
+    protected $listeners = ['postDeleted' => 'updateStats'];
+
+    public function updateStats($postId): void
+    {
+        // Update statistics
+    }
+}
+
+// Emit to specific component
+$this->emitTo('post-stats', 'refresh');
+
+// Emit to parent/children
+$this->emitUp('saved');
+$this->emitSelf('refresh');
+
+// Browser events
+$this->dispatchBrowserEvent('post-saved', ['id' => $post->id]);
+```
+
+## Listen to Browser Events
+
+```blade
+<div
+    x-data
+    @post-saved.window="alert('Post saved!')"
+>
+    <!-- content -->
+</div>
+
+<script>
+window.addEventListener('post-saved', event => {
+    console.log('Post ID:', event.detail.id);
+});
+</script>
+```
+
+## Polling
+
+```blade
+{{-- Poll every 2 seconds --}}
+<div wire:poll.2s>
+    Current time: {{ now() }}
+</div>
+
+{{-- Poll specific action --}}
+<div wire:poll.5s="checkStatus">
+    Status: {{ $status }}
+</div>
+
+{{-- Keep polling until condition --}}
+<div wire:poll.keep-alive.2s>
+    <!-- content -->
+</div>
+```
+
+## Loading States
+
+```blade
+{{-- Basic loading state --}}
+<div wire:loading>
+    Loading...
+</div>
+
+{{-- Target specific action --}}
+<div wire:loading wire:target="save">
+    Saving...
+</div>
+
+{{-- Hide element while loading --}}
+<div wire:loading.remove>
+    Content (hidden during load)
+</div>
+
+{{-- Delay loading indicator --}}
+<div wire:loading.delay>
+    This appears after 200ms
+</div>
+
+{{-- Custom delay --}}
+<div wire:loading.delay.longest>
+    This appears after 1s
+</div>
+
+{{-- Loading classes --}}
+<button
+    wire:click="save"
+    wire:loading.class="opacity-50"
+    wire:loading.class.remove="bg-blue-500"
+>
+    Save
+</button>
+
+{{-- Loading attributes --}}
+<button
+    wire:click="save"
+    wire:loading.attr="disabled"
+>
+    Save
+</button>
+```
+
+## Traits
+
+```php
+// Pagination
+use Livewire\WithPagination;
+
+class PostList extends Component
+{
+    use WithPagination;
+
+    public function render()
+    {
+        return view('livewire.post-list', [
+            'posts' => Post::paginate(10),
+        ]);
+    }
+}
+
+// File uploads
+use Livewire\WithFileUploads;
+
+class UploadPhoto extends Component
+{
+    use WithFileUploads;
+
+    public $photo;
+
+    public function save(): void
+    {
+        $this->validate([
+            'photo' => 'image|max:1024',
+        ]);
+
+        $this->photo->store('photos');
+    }
+}
+```
+
+## Authorization
+
+```php
+class PostForm extends Component
+{
+    public Post $post;
+
+    public function mount(Post $post): void
+    {
+        $this->authorize('update', $post);
+        $this->post = $post;
+    }
+
+    public function save(): void
+    {
+        $this->authorize('update', $this->post);
+        // Save logic
+    }
+}
+```
+
+## Performance Tips
+
+1. **Use wire:model.defer** - Batch updates on form submit
+2. **Lazy load components** - Use wire:init for heavy operations
+3. **Cache computed properties** - Use #[Computed] attribute
+4. **Disable polling when hidden** - Use wire:poll.visible
+5. **Optimize queries** - Eager load relationships
+6. **Use wire:key** - Prevent re-rendering entire lists
+7. **Debounce input** - Use wire:model.debounce
+8. **Use pagination** - Don't load all records at once
+
+```php
+use Livewire\Attributes\Computed;
+
+class PostList extends Component
+{
+    #[Computed]
+    public function posts()
+    {
+        return Post::with('user')->paginate(10);
+    }
+
+    public function render()
+    {
+        return view('livewire.post-list');
+    }
+}
+```
+
+```blade
+{{-- Access computed property --}}
+@foreach($this->posts as $post)
+    <!-- content -->
+@endforeach
+```