ChrisR Posts - Answer Overflow

ChrisR

•Created by ChrisR on 7/4/2024 in #❓┊help

How to know when a modal, opened via a Table action, has been closed?

I need to dispatch an event when a modal is closed. Right now I can do it when the "submit" button is clicked with

->action(function (array $data, Order $order) {
    $this->dispatch('order-scanner-modal-closed', true);
})

->action(function (array $data, Order $order) {
    $this->dispatch('order-scanner-modal-closed', true);
})

But I can not figure out how to do this on cancel. I've tried overriding by way of modalFooterActions with something like this:

->modalFooterActions([
    Action::make('submit')
        ->label('Link item to inventory')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
        }),
    Action::make('cancel')
        ->label('Cancel')
        ->action(function () {
            $this->dispatch('order-scanner-modal-closed', false);
        }),
])

->modalFooterActions([
    Action::make('submit')
        ->label('Link item to inventory')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
        }),
    Action::make('cancel')
        ->label('Cancel')
        ->action(function () {
            $this->dispatch('order-scanner-modal-closed', false);
        }),
])

This feels like progress because the correct code gets executed when the respective button gets clicked; however, it also feels like I'm moving backwards, because the modal doesn't automatically close like it would do out of the box using just action. So I solve one problem but encounter a new 🙂 I thought that modalCancelAction would be the way, but that is getting executed when the modal is being rendered so I must be misunderstanding its intention.

9 replies

FFilament

•Created by ChrisR on 7/4/2024 in #❓┊help

Modal submit action button is white text on white background - I can't figure out how to change that

20 replies

FFilament

•Created by ChrisR on 7/4/2024 in #❓┊help

How to execute javascript within a modal

I have a modal that is initated with an action:

TextColumn::make('order_id')
  ->action(
    Action::make('scan-item')
      ->label('Scan Items')
      ->modalContent(view('prototypes.scanner'))
      ->action(function (Order $record): void {

      })
      ->modalWidth('Screen')
      ->slideOver()
    ),

TextColumn::make('order_id')
  ->action(
    Action::make('scan-item')
      ->label('Scan Items')
      ->modalContent(view('prototypes.scanner'))
      ->action(function (Order $record): void {

      })
      ->modalWidth('Screen')
      ->slideOver()
    ),

This opens the modal slideover correctly, and I see the correct content. However, I need to execute some javascript after the modal loads. I've tried updating my blade to do this:

<x-app-layout>
    foo bar
    @push('modals')
        <script>
            console.log('Script is running');
        </script>
    @endpush
</x-app-layout>

<x-app-layout>
    foo bar
    @push('modals')
        <script>
            console.log('Script is running');
        </script>
    @endpush
</x-app-layout>

I do have the @stack in my app.blade.php file:

@livewireScripts        @vite('resources/js/app.js')
@stack('modals')

@livewireScripts        @vite('resources/js/app.js')
@stack('modals')

But that console.log doesn't execute. So, I have two questions: 1. How do I execute JS in a modal 2. There will be several table rows with the same action, that execute the same JS - is there a better way to do this?

8 replies

FFilament

•Created by ChrisR on 11/10/2023 in #❓┊help

Having trouble figuring out best way to add a button to a modal, which triggers custom JS

I have some custom JS that prints to a Zebra label printer. My goal is to have an Action on the Edit Resource page (done) that opens a modal. Within the modal I need to show a brief form that isn't related to a Model, it's just a custom form with a dropdown and a "Print" button. What I'm struggling with is: what is the right way to do this? However, I'm not even sure if I should be looking for a FilamentPHP right way, or a Livewire right way, or an AlpineJS right way, etc. In other words, it's easy enough to include the JS, add a button that triggers it and prints the label - but it doesn't seem like I'm building it using the tools provided and that's what I'd like to do. Is this something that I should be looking to build using the FilamentPHP Api or not?

10 replies

FFilament

•Created by ChrisR on 10/8/2023 in #❓┊help

Can the HeaderActions be refreshed if one of them is clicked?

Given this action, that is added via an extension of EditRecord::getHeaderActions

$actions[] = Action::make('transition_to_' . $potential_state)
                ->eventData(['transition_to' => $potential_state])
                ->label(Str::title($potential_state))
                ->action(function (Action $action, InventoryItem $record) {
                    $transition_to = $action->getEventData()['transition_to'];
                    if ($record->state->canTransitionTo($transition_to)) {
                        $record->state->transitionTo($transition_to);
                    }
                });

$actions[] = Action::make('transition_to_' . $potential_state)
                ->eventData(['transition_to' => $potential_state])
                ->label(Str::title($potential_state))
                ->action(function (Action $action, InventoryItem $record) {
                    $transition_to = $action->getEventData()['transition_to'];
                    if ($record->state->canTransitionTo($transition_to)) {
                        $record->state->transitionTo($transition_to);
                    }
                });

Can I refresh the header actions if one of these is clicked? Or do I just need to initiate a whole page refresh via redirecting back to the same page?

5 replies

FFilament

•Created by ChrisR on 10/6/2023 in #❓┊help

Updating state for laravel-model-states from a Filament form

(I created an SO post yesterday, which includes additional details: https://stackoverflow.com/questions/77233881/updating-model-state-laravel-model-state-from-a-filamentphp-livewire-form) If it helps, here is the error: https://flareapp.io/share/95JDOL4P I'm trying to allow changing state (implemented with spatie/laravel-model-states) from a FilamentPHP Resource. In order to get the state to integrate correctly, I had to implement Wireable. What that brings with it is expecting the saved data to be an array, as can be seen in Livewire\Features\SupportWireables\WireablyeSync.php -> hyrdate:

  function hydrate($value, $meta, $hydrateChild) {
        foreach ($value as $key => $child) {
            $value[$key] = $hydrateChild($key, $child);
        }

        return $meta['class']::fromLivewire($value);
    }

  function hydrate($value, $meta, $hydrateChild) {
        foreach ($value as $key => $child) {
            $value[$key] = $hydrateChild($key, $child);
        }

        return $meta['class']::fromLivewire($value);
    }

However, the value of $value received there is a string. I'm not sure if I'm implemented something incorrectly, or if I need to do additional work. I've tried looking for something that lets me manipulate the data which I haven't found. At this point I'm tossing around a couple ideas: - Do I need a custom Livewire component that displays the FilamentPHP form and has a method for changing state. - Should I try creating a custom action, and within EditInventoryItem add it to getHeaderActions - [open to suggestions]

22 replies

Gaming

Programming