#Closing table action modal by another livewire component

7 messages · Page 1 of 1 (latest)

half pier
#

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();
        })

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);
     }
half pier
#

Has anyone an idea?

peak monolith
#

@half pier Did you figure this out? I'm trying to do the same thing.

half pier
#

@peak monolith No, I'm still working with the modal id

fiery leaf
half pier
#

@fiery leaf The Livewire component which I use for the modalContent is building a individual form dependent on the $variable and its json content. Sometimes it's just a single text input and sometimes it's a really complex form with repeater and other elements and rules. I don't know how I can implement this just with a simple modal form. The livewire component analyzes the json content of the $variable and builds the form based on this json content

fiery leaf