Parimal Posts - Answer Overflow

Parimal

Explore posts from servers

FFilament DIIDevHeads IoT Integration Server

•Created by Parimal on 10/16/2024 in #❓┊help

Event Not Dispatching to other 'TaskUpdateModal' Component

I’m having trouble dispatching an event to another Livewire component (TaskUpdateModal) in my Laravel project using Livewire 3. The event dispatch seems correct, but the listener in the TaskUpdateModal component is not triggered, and I can’t figure out why. 1.In the TaskTable component, I’m dispatching the event like this:

->actions([
    Action::make('in_progress')
    ->action(function (Task $task) {
        $this->updateStatus($task, 'in_progress'); // Call updateStatus
        $this->dispatch('TaskUpdateModal', taskId: $task->id, status: 'in_progress'); // Dispatch to TaskUpdateModal
    })
    ->label('In Progress')->color('warning')->icon('heroicon-o-forward')
    ->disabled(fn(Task $task) => $task->status === 'in_progress' || $task->status === 'completed')
    ->tooltip(fn(Task $task) => $task->status === 'in_progress' ? 'Task is already in progress' : ($task->status === 'completed' ? 'Task is completed, cannot mark in progress' : '')),
])

->actions([
    Action::make('in_progress')
    ->action(function (Task $task) {
        $this->updateStatus($task, 'in_progress'); // Call updateStatus
        $this->dispatch('TaskUpdateModal', taskId: $task->id, status: 'in_progress'); // Dispatch to TaskUpdateModal
    })
    ->label('In Progress')->color('warning')->icon('heroicon-o-forward')
    ->disabled(fn(Task $task) => $task->status === 'in_progress' || $task->status === 'completed')
    ->tooltip(fn(Task $task) => $task->status === 'in_progress' ? 'Task is already in progress' : ($task->status === 'completed' ? 'Task is completed, cannot mark in progress' : '')),
])

2.In the TaskUpdateModal component, I have the listener set up like this:

class TaskUpdateModal extends Component
{
    public $taskId;
    public $status;

    protected $listeners = ['TaskUpdateModal'];

    public function TaskUpdateModal($taskId, $status)
    {
        $this->taskId = $taskId;
        $this->status = $status;

        // Additional logic
    }
}

class TaskUpdateModal extends Component
{
    public $taskId;
    public $status;

    protected $listeners = ['TaskUpdateModal'];

    public function TaskUpdateModal($taskId, $status)
    {
        $this->taskId = $taskId;
        $this->status = $status;

        // Additional logic
    }
}

1 replies

FFilament

•Created by Parimal on 9/26/2024 in #❓┊help

Show loader on table component render only.

Here loader shows on every server request like when open delete modal, deletign task, etc. I want to show loader only on table component rendering. I have added blade and class below. Thank you. Blade:

<div>
    <div class="antialiased bg-gray-50 dark:bg-gray-900">
        <main class="scrollcontainer p-4 md:ml-64 h-auto pt-20 pb-16">
            <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                <section class="pt-4">
                    @if (session()->has('message'))
                    <div x-init="$dispatch('notify', { msg: '{{ session('message') }}', type: 'success' })"></div>
                @endif
                    <!-- Loader -->
                    <div wire:loading.flex class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-50">
                        <svg class="animate-spin h-8 w-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                        </svg>
                        <span class="ml-2 text-gray-500">Loading Task...</span>
                    </div>

                    <!-- Table -->
                    {{ $this->table }}

                </section>
            </div>
        </main>
    </div>
</div>

<div>
    <div class="antialiased bg-gray-50 dark:bg-gray-900">
        <main class="scrollcontainer p-4 md:ml-64 h-auto pt-20 pb-16">
            <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                <section class="pt-4">
                    @if (session()->has('message'))
                    <div x-init="$dispatch('notify', { msg: '{{ session('message') }}', type: 'success' })"></div>
                @endif
                    <!-- Loader -->
                    <div wire:loading.flex class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-50">
                        <svg class="animate-spin h-8 w-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                        </svg>
                        <span class="ml-2 text-gray-500">Loading Task...</span>
                    </div>

                    <!-- Table -->
                    {{ $this->table }}

                </section>
            </div>
        </main>
    </div>
</div>

3 replies

Gaming

Programming