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

DIIDevHeads IoT Integration Server

•Created by Parimal on 7/2/2024 in #iot-cloud

Seeking Assistance with Typed Search System for Electronic Components Organizer

I’m working on a project to build a storage system for electronic components where its kept inrack’s drawer. Inspired by the FindyBot3000, I aim to create a typed search interface instead of a voice-controlled one. The system will allow users to type in component names, which will then be located and blink one LED. Can this system run on local Wi-Fi without connected to internet? If anyone have any idea please guide me.

5 replies

Gaming

Programming