moinmichi Posts - Answer Overflow

moinmichi

•Created by moinmichi on 11/11/2024 in #❓┊help

Closing table action modal by another livewire component

I am loading a livewire component with modalContent() as a custom action in a table action. The livewire component serves a form, which listen for the event 'saveVariable'. I trigger the event by the action button of the table action. That works fine, but the modal is always closed, even if the form validation fails. Beacuse of that I'm halting the action after dispatching the event 'saveVariable' to prevent the modal from closing. I submit the modal id (xxxxxx-table-action) with the event and in the livewire component I dispatch the event 'close-modal' with the modal id if the form validates. That works fine, but I'm afraid, that in the future the id of the modal could be changed and therefor my code will be broken. Is there a way to get the name of the modal progrmatical? Or is there another way to close the modal after the form is validated? This is the table action:

TableAction::make('edit')
    ->modalContent(
      fn(Variable $variable): View => view(
        'livewire.system.system-settings.system-setting-form',
          [
            'variable' => $variable,
            'currentComponent' => static::getVariableComponent($variable)
          ]
        )
      )
    ->slideOver()->action(function (Tables\Actions\Action $action, Component $livewire) {
        $livewire->dispatch('saveVariable', $livewire->getId() . '-table-action');
          $action->halt();
        })

TableAction::make('edit')
    ->modalContent(
      fn(Variable $variable): View => view(
        'livewire.system.system-settings.system-setting-form',
          [
            'variable' => $variable,
            'currentComponent' => static::getVariableComponent($variable)
          ]
        )
      )
    ->slideOver()->action(function (Tables\Actions\Action $action, Component $livewire) {
        $livewire->dispatch('saveVariable', $livewire->getId() . '-table-action');
          $action->halt();
        })

And this is the part of the livewire component, which validates the form and closes the modal:

 #[On('saveVariable')]
    public function saveVariable($modalId = null): void
    {
        $this->validate();
        VariableService::instance()->update($variable);
      
        $this->dispatch('close-modal', id: $modalId);
     }

 #[On('saveVariable')]
    public function saveVariable($modalId = null): void
    {
        $this->validate();
        VariableService::instance()->update($variable);
      
        $this->dispatch('close-modal', id: $modalId);
     }

2 replies

Gaming

Programming