Filament•3mo ago

Tab Forms

I have a foreach loop to define tabs and include the form depending on the tab. Since it's based on locales, I want the states of the form inputs to change depending on the locale. My issue is that each tab is still having the same state, not changing per tab. Not sure what im missing.

8 Replies

Jamie Cee•3mo ago

https://sourceb.in/XZxaqRz0bS ...

Lara Zeus•3mo ago

take alook here i am using tabs with local too https://github.com/lara-zeus/chaos/blob/1.x/src/Forms/Components/MultiLang.php

GitHub

chaos/src/Forms/Components/MultiLang.php at 1.x · lara-zeus/chaos

opinionated filament setup. Contribute to lara-zeus/chaos development by creating an account on GitHub.

Lara Zeus•3mo ago

like this

Jamie Cee•2mo ago

Thank you 🙂 Sadly I couldnt get mine working after looking at yours as a guide. My locales are stored as a model record, and I have a pivot table for my translated content, just can't get it working :/ I have a feeling the method im going for may not be possible. As im looping the locale model and creating a tab for each record, but the form schema is the same for all locales, I just want the values to differ, but I can only manage to get the latest locale translation to display, no matter which tab im in Is there a way to get the active tab if im using the same form for all tabs? Well, by a key rather than an ID as I've just answered my question above 🤣 I should probablky start searching things a little more in depth before asking questions 🤣 ---------------------------------------- So ill start fresh from above - Is there any current functionality that has an event listener for a tab change event? in which allows me to change the values/state of the input fields when changing. Whether it be live update or a page refresh (I could probably get away with that as well)

Lara Zeus•2mo ago

locales are stored as a model record, and I have a pivot table

I have another app using the same setup, and the tabs with array worked fine, but I hade to write the logic for saving to db myself in a before hook and make the tabs ->dehydrated(false)

listener for a tab change event?

maybe check how the filament local switcher doing it, there is no tabs but it switch the local without reloading the and submit the pages I guess that what you're looking for

Jamie Cee•2mo ago

Oh apologies, I actually managed to get it working, I have to work it a little different, actually taking an aspect of the repo you sent me (if you dont mind, its in a private repo so wont be passing it as my own 🤣 ). Creating a new class extending TextInput done the trick

Lara Zeus•2mo ago

np at all 👍 glad it worked

Jamie Cee•5w ago

Thanks again :D. Caused a cpl days of stress that did 🤣 @Lara Zeus Sorry for pinging. Just back to this, did you have any issues with validation?

                                MultiLang::make('description')
                                    ->label("Description")
                                    ->maxLength(2000)
                                    ->helperText('Modify description for [language]')
                                    ->columnSpanFull()
                                    ->setField('description')
                                    ->key('description')
                                    ->disabledOn('view')
                                    ->rules([
                                        function () {
                                            /* Make sure "en" field is filled in */
                                            return function (string $attribute, $value, Closure $fail) {
                                                if ($value['en'] == null) {
                                                    $fail("The {$attribute} is required");
                                                }
                                            };

                                MultiLang::make('description')
                                    ->label("Description")
                                    ->maxLength(2000)
                                    ->helperText('Modify description for [language]')
                                    ->columnSpanFull()
                                    ->setField('description')
                                    ->key('description')
                                    ->disabledOn('view')
                                    ->rules([
                                        function () {
                                            /* Make sure "en" field is filled in */
                                            return function (string $attribute, $value, Closure $fail) {
                                                if ($value['en'] == null) {
                                                    $fail("The {$attribute} is required");
                                                }
                                            };

The validation highlights the input fine, but not getting any error messages? I do have this in the view:

            <x-filament::input.wrapper :valid="! $errors->has($statePath)">

            <x-filament::input.wrapper :valid="! $errors->has($statePath)">

Ah nevermind, I had to use

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

Gaming

Programming

Tab Forms