F
Filament•2w ago
Rolland

How to make a list of action in custom modal unique?

<?php

namespace App\Filament\Resources\Inventories\RequisitionResource\Tables\Actions\Rfp;

class RfpDeleteAction extends BaseRequestAction implements HandleCustomActionInterface
{
    public function getIdentifier(): string
    {
        return 'delete_rfp_action';
    }

    public function getLabel(): string
    {
        return 'Delete RFP';
    }

    public function getIcon(): string
    {
        return 'heroicon-s-trash';
    }

    public function getColor(): array|string|null
    {
        return Color::Red;
    }

    public function setUp(): void
    {
        parent::setUp();
        $this->requiresConfirmation();
        $this->form($this->getFormSchema());
        $this->action($this->handleAction(...));
        $this->slideOver(false);
    }

    public function handleAction(array $data): void
    {
        // delete action
    }
}
<?php

namespace App\Filament\Resources\Inventories\RequisitionResource\Tables\Actions\Rfp;

class RfpDeleteAction extends BaseRequestAction implements HandleCustomActionInterface
{
    public function getIdentifier(): string
    {
        return 'delete_rfp_action';
    }

    public function getLabel(): string
    {
        return 'Delete RFP';
    }

    public function getIcon(): string
    {
        return 'heroicon-s-trash';
    }

    public function getColor(): array|string|null
    {
        return Color::Red;
    }

    public function setUp(): void
    {
        parent::setUp();
        $this->requiresConfirmation();
        $this->form($this->getFormSchema());
        $this->action($this->handleAction(...));
        $this->slideOver(false);
    }

    public function handleAction(array $data): void
    {
        // delete action
    }
}
<div class="space-y-4 p-4">
    @foreach ($record->rfpStages as $rfpStage)
        <div
            class="rounded-xl border border-gray-300 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-300">
            <div class="p-4 flex justify-between items-start">
                <div class="space-y-2">
                    //
                </div>

                <div class="flex gap-x-2">
                    {{ $action->getModalAction('edit') }} // here
                    {{ $action->getModalAction('delete') }} // here
                </div>
            </div>
        </div>
    @endforeach
    <div>
        {{ $action->getModalAction('create') }} // here
    </div>
</div>
<div class="space-y-4 p-4">
    @foreach ($record->rfpStages as $rfpStage)
        <div
            class="rounded-xl border border-gray-300 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-300">
            <div class="p-4 flex justify-between items-start">
                <div class="space-y-2">
                    //
                </div>

                <div class="flex gap-x-2">
                    {{ $action->getModalAction('edit') }} // here
                    {{ $action->getModalAction('delete') }} // here
                </div>
            </div>
        </div>
    @endforeach
    <div>
        {{ $action->getModalAction('create') }} // here
    </div>
</div>
When I try to delete an item from the list, all the delete buttons are being triggered instead of just the one I clicked. I know I need to add a unique ID to each button's action to fix this, but I'm not sure how to implement it. Could anyone guide me? Thank you.
No description
Solution:
I don't think they are all being triggered at all, I think the loader is being triggered and the loader is just checking what's clickable. You can try wire keying each action to try to isolate it.
Jump to solution
5 Replies
Rolland
RollandOP•2w ago
<?php

namespace App\Filament\Resources\Inventories\RequisitionResource\Tables\Actions\Rfp;

class RfpContainerAction extends BaseRequestAction implements HandleCustomActionInterface
{

    public function getIdentifier(): string
    {
        return 'rfp_container_action';
    }

    public function getLabel(): Htmlable|string|null
    {
        return 'Rfp Requests';
    }

    public function getModalHeading(): string|Htmlable
    {
        return 'Rfp Requests';
    }

    public function getColor(): array|string|null
    {
        return Color::Yellow;
    }

    public function getIcon(): Htmlable|string|null
    {
        return 'heroicon-m-clipboard-document-list';
    }

    public function setUp(): void
    {
        parent::setUp();

        $this->getSetUp();
    }

    private function getSetUp(): static
    {
        $this->registerModalActions([
            RfpCreateAction::make('create'),
            RfpDeleteAction::make('delete'),
            // $this->getEditAction(),
            // $this->getDeleteAction(),
        ]);

        $this->setModalContent();

        return $this;
    }

    private function setModalContent(): void
    {
        $this->modalContent(fn(Model $record, Action $action) => view(
            'filament.tables.actions.contents.rfp-container-action',
            [
                'record' => $record,
                'action' => $action,
            ]
        ));
    }
}
<?php

namespace App\Filament\Resources\Inventories\RequisitionResource\Tables\Actions\Rfp;

class RfpContainerAction extends BaseRequestAction implements HandleCustomActionInterface
{

    public function getIdentifier(): string
    {
        return 'rfp_container_action';
    }

    public function getLabel(): Htmlable|string|null
    {
        return 'Rfp Requests';
    }

    public function getModalHeading(): string|Htmlable
    {
        return 'Rfp Requests';
    }

    public function getColor(): array|string|null
    {
        return Color::Yellow;
    }

    public function getIcon(): Htmlable|string|null
    {
        return 'heroicon-m-clipboard-document-list';
    }

    public function setUp(): void
    {
        parent::setUp();

        $this->getSetUp();
    }

    private function getSetUp(): static
    {
        $this->registerModalActions([
            RfpCreateAction::make('create'),
            RfpDeleteAction::make('delete'),
            // $this->getEditAction(),
            // $this->getDeleteAction(),
        ]);

        $this->setModalContent();

        return $this;
    }

    private function setModalContent(): void
    {
        $this->modalContent(fn(Model $record, Action $action) => view(
            'filament.tables.actions.contents.rfp-container-action',
            [
                'record' => $record,
                'action' => $action,
            ]
        ));
    }
}
Rolland
RollandOP•2w ago
No description
Rolland
RollandOP•2w ago
as you can see from the gif, the loading on other item is also triggered.
Solution
toeknee
toeknee•2w ago
I don't think they are all being triggered at all, I think the loader is being triggered and the loader is just checking what's clickable. You can try wire keying each action to try to isolate it.
Rolland
RollandOP•7d ago
yeah you right. I went and create a livewire component instead. now it is working. thank you

Did you find this page helpful?