Filament•2y ago

How to show Select field reactive value in other site of a template?

Hi, i have a Select field, and I want to show the value of this select in other site of the template. How can I do that? I try afterStateUpdated? It's possible to do it with alpine?

11 Replies

toeknee•2y ago

Can you explain a little more, it sounds like you can do this with a closure with afterStateUpdated setting or getting options.

jals65OP•2y ago

I have a component with a select in a modal.

<x-filament::modal>
  <x-slot name="trigger">
    <a class="cursor-pointer" x-on:click="isOpen = true">
      {{ $statusValue ?? 'Status' }}
    </a>
  </x-slot>
  <x-slot name="header"> Status </x-slot>
  <x-slot name="subheading">
    {{ $getStatusComponent() }}
  </x-slot>
  <x-slot name="actions"> @if(!$isDisabled()) <x-filament::button color="primary" type="button" class="mt-4" x-on:click="isOpen = false"> Done </x-filament::button> @endif </x-slot>
</x-filament::modal>

<x-filament::modal>
  <x-slot name="trigger">
    <a class="cursor-pointer" x-on:click="isOpen = true">
      {{ $statusValue ?? 'Status' }}
    </a>
  </x-slot>
  <x-slot name="header"> Status </x-slot>
  <x-slot name="subheading">
    {{ $getStatusComponent() }}
  </x-slot>
  <x-slot name="actions"> @if(!$isDisabled()) <x-filament::button color="primary" type="button" class="mt-4" x-on:click="isOpen = false"> Done </x-filament::button> @endif </x-slot>
</x-filament::modal>

And as you can see, I want to set the value of the select component ($getStatusComponent()) in the trigger <a> that opens the modal

toeknee•2y ago

Why not use a filament action?

jals65OP•2y ago

What do you mean? I'm not following you.

toeknee•2y ago

Where are you using this?

jals65OP•2y ago

Into a custom component. this is a part of the code of the custom component template And in the custom component controller i set the select in this function:

public string | null $statusValue = null;

public function getStatusComponent(): ComponentContainer
    {
        return ComponentContainer::make($this->getLivewire())
            ->parentComponent($this)
            ->components([
                Select::make($this->getStatusComponentName())
                    ->options($this->options)
                    ->label(null)
                    ->reactive()
                    ->afterStateUpdated(function (Closure $set, $state) {
                        $set('statusValue', $state);
                    })
            ]);
    }

public string | null $statusValue = null;

public function getStatusComponent(): ComponentContainer
    {
        return ComponentContainer::make($this->getLivewire())
            ->parentComponent($this)
            ->components([
                Select::make($this->getStatusComponentName())
                    ->options($this->options)
                    ->label(null)
                    ->reactive()
                    ->afterStateUpdated(function (Closure $set, $state) {
                        $set('statusValue', $state);
                    })
            ]);
    }