Can I Use Modal Input as Part of Bulk Action?

[Jonnyenglish89]

I wish to set all the selected values in a column via a bulk action to a value set via a modal input.

I can select the "Set Value for All Rows" option, but the modal doesn't show and no errors are produced. I've attempted to use customView() and setConfigurableArea(), but I can't get it to work. As I'm new to coding, I might have overlooked something obvious. Could someone please help me figure out why the modal isn't displaying?

Model File (app/Models/Item.php):

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Item extends Model
{
    use HasFactory;

    protected $table = 'items';

    protected $fillable = ['value'];
}

Livewire Component (app/Livewire/ItemTable.php):

<?php
//app/Livewire/ItemTable.php
namespace App\Livewire;

use App\Models\Item;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Illuminate\Database\Eloquent\Builder;

class ItemTable extends DataTableComponent
{
    public $showValueModal = false;
    public $newValue;

    protected $model = Item::class;

    protected $listeners = ['refreshTable' => '$refresh'];

    public function configure(): void
    {
        $this->setPrimaryKey('id')
            ->setEagerLoadAllRelationsEnabled()
            ->setBulkActions([
                'showValueModal' => 'Set Value for all rows',
            ]);
        $this->setConfigurableArea('before-tools', 'livewire.value-modal');
    }

    public function columns(): array
    {
        return [
            Column::make('Value', 'value'),
        ];
    }

    public function builder(): Builder
    {
        return Item::query()
            ->select('items.*');
    }

    public function showValueModal()
    {
        $this->showValueModal = true;
    }

    public function setValue()
    {
        $this->validate([
            'newValue' => 'required|integer|min:0|max:100',
        ]);

        $selectedKeys = $this->getSelected();

        foreach ($selectedKeys as $id) {
            $model = Item::findOrFail($id);
            $model->value = $this->newValue;
            $model->save();
        }

        $this->showValueModal = false;
        $this->clearSelected();
    }

//    public function customView(): string
//    {
//        return 'livewire.value-modal';
//    }
}

Modal Blade View (resources/views/livewire/value-modal.blade.php):

<div>
    @if ($showValueModal)
        <x-dialog-modal wire:model="showValueModal">
            <x-slot name="title">
                Set Value
            </x-slot>

            <x-slot name="content">
                <div class="mt-4">
                    <x-label for="value" value="{{ __('Value') }}" />
                    <x-input id="value" type="number" min="0" max="100" class="mt-1 block w-full" wire:model="newValue" />
                    @error('newValue') <span class="text-red-500">{{ $message }}</span> @enderror
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="$toggle('showValueModal')" wire:loading.attr="disabled">
                    {{ __('Cancel') }}
                </x-secondary-button>

                <x-button class="ml-2" wire:click="setValue" wire:loading.attr="disabled">
                    {{ __('Set Value') }}
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>

Main Blade View (resources/views/item.blade.php):

<x-app-layout>
    <livewire:item-table/>
</x-app-layout>

Here are the relevant parts of my composer.json file:

{
    "laravel/framework": "^11.9",
    "laravel/jetstream": "^5.1",
    "livewire/livewire": "^3.0",
    "rappasoft/laravel-livewire-tables": "^3.2"
}

[lrljoe]

What happens if you update your blade to use

if ($this->showValueModal)

Then for the Jetstream dialog modal (x-dialog-modal), I don't believe you should set wire:model on it, as that's used for the confirmation modal only, it's been a while since I've used that tho, so it may have changed.

Also, avoid using the same name for a method, and a property, otherwise Livewire will get confused, that may also be the issue here

So either rename one or the other!

[Jonnyenglish89]

Hi,

Thank you for taking the time to respond. Thanks to your advice, it is now working! Changing the method name fixed the issue of the modal not displaying.

One slight issue I had was the modal would appear to flash when a number was entered into the input. I solved this by changing:

wire:model="newValue"

to

wire:model.defer="newValue"

Also, I tried changing:

<x-dialog-modal wire:model="showValueModal">

to

<x-dialog-modal>

but that caused the flashing issue to return.

For any that might be interested, these are the updated files:

Modal Blade View (resources/views/livewire/value-modal.blade.php):

<div>
    @if ($showValueModal)
        <x-dialog-modal wire:model="showValueModal">
            <x-slot name="title">
                Set Value
            </x-slot>

            <x-slot name="content">
                <div class="mt-4">
                    <x-label for="value" value="{{ __('Value') }}" />
                    <x-input id="value" type="number" min="0" max="100" class="mt-1 block w-full" wire:model.defer="newValue" />
                    @error('newValue') <span class="text-red-500">{{ $message }}</span> @enderror
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="toggleItemModal" wire:loading.attr="disabled">
                    {{ __('Cancel') }}
                </x-secondary-button>

                <x-button class="ml-2" wire:click="setValue" wire:loading.attr="disabled">
                    {{ __('Set Value') }}
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>

Livewire Component (app/Livewire/ItemTable.php):

<?php

namespace App\Livewire;

use App\Models\Item;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Illuminate\Database\Eloquent\Builder;

class ItemTable extends DataTableComponent
{
    public $showValueModal = false;
    public $newValue;

    protected $model = Item::class;

    protected $listeners = ['refreshTable' => '$refresh'];

    public function configure(): void
    {
        $this->setPrimaryKey('id')
            ->setEagerLoadAllRelationsEnabled()
            ->setBulkActions([
                'toggleItemModal' => 'Set Value for all rows',
            ]);
    }

    public function columns(): array
    {
        return [
            Column::make('Value', 'value'),
        ];
    }

    public function builder(): Builder
    {
        return Item::query()
            ->select('items.*');
    }

    public function toggleItemModal()
    {
        $this->showValueModal = !$this->showValueModal;
    }

    public function setValue()
    {
        $this->validate([
            'newValue' => 'required|integer|min:0|max:100',
        ]);

        $selectedKeys = $this->getSelected();

        foreach ($selectedKeys as $id) {
            $model = Item::findOrFail($id);
            $model->value = $this->newValue;
            $model->save();
        }

        $this->showValueModal = false;
        $this->clearSelected();
    }

    public function customView(): string
    {
        return 'livewire.value-modal';
    }
}