Filament•14mo ago

Wizard Steps and Javascript

Probably more a livewire question, but Im using Adams table repeater and wanting to do some row highlighting, so I am doing

Radio::make('move_or_merge')
    ->inline()
    ->options([
        'merge' => 'Merge',
    ])
    ->extraAttributes([
        'x-data' => '{}',
        'x-init' => 'function () {
            const applyStyle = () => {
                $el.closest("tr").style.backgroundColor = "#f0fdf4";
            };

            applyStyle(); // Apply style on init

            // Listen for Livewire update and re-apply the style
            this.$watch("move_or_merge", (value) => {
                if(value === "merge") {
                    applyStyle();
                }
            });

            // This is a Livewire hook that listens for when Livewire finishes a component update
            Livewire.hook("element.updated", (el, component) => {
                if(component.id === @this.id && el.hasAttribute("x-on:click")) {
                    applyStyle();
                }
            });
        }',
        'x-on:click' => 'applyStyle',
    ])
    ->required()
    ->hiddenLabel(),

Radio::make('move_or_merge')
    ->inline()
    ->options([
        'merge' => 'Merge',
    ])
    ->extraAttributes([
        'x-data' => '{}',
        'x-init' => 'function () {
            const applyStyle = () => {
                $el.closest("tr").style.backgroundColor = "#f0fdf4";
            };

            applyStyle(); // Apply style on init

            // Listen for Livewire update and re-apply the style
            this.$watch("move_or_merge", (value) => {
                if(value === "merge") {
                    applyStyle();
                }
            });

            // This is a Livewire hook that listens for when Livewire finishes a component update
            Livewire.hook("element.updated", (el, component) => {
                if(component.id === @this.id && el.hasAttribute("x-on:click")) {
                    applyStyle();
                }
            });
        }',
        'x-on:click' => 'applyStyle',
    ])
    ->required()
    ->hiddenLabel(),

, which works great for the first step, and clickable works on all steps of the wizard. I have two problems though. Its highlight state is lost if there is a validation fail on the form and any additional steps, the init state doesnt seem to apply. Any suggestions? Its a pretty long form and this highlighting really helps seeing which items still need action take before getting to the validation point. Its not a show stopper, but would love to figure this out.

4 Replies

toeknee•14mo ago

Shesh, why not just target the repeater and nth-child the classes with custom CSS?

Mark ChaneyOP•14mo ago

care to elaborate a bit more on this idea considering the situation described above? @toeknee ?

toeknee•14mo ago

Sorry, the init state will likely be lost since init is triggered after load and last time I checked, not on loading the script. So you’d likely need the function set before the load always as it’s JS.

awcodes•14mo ago

Haven’t tried, but should work in my head. Make the radio live() the add a class based on the state. And in css you could target tr:has(‘.class’)

Gaming

Programming

Wizard Steps and Javascript