Daniel Posts - Answer Overflow

Daniel

•Created by Daniel on 7/14/2024 in #❓┊help

Issue: Reactive Field Visibility Not Working as Expected in ProductPriceResource

I'm having trouble with a reactive form field in ProductPriceResource. A 'Recurring Billing Period' field should show/hide based on a 'Price Type' ToggleButtons selection:

ToggleButtons::make('price_type')
    ->reactive()
    // ... other configurations ...

TextInput::make('recurring_billing_period')
    ->visible(fn (callable $get) => $get('price_type') === ProductPrice::PRICETYPE_RECURRING)
    // ... other configurations ...

ToggleButtons::make('price_type')
    ->reactive()
    // ... other configurations ...

TextInput::make('recurring_billing_period')
    ->visible(fn (callable $get) => $get('price_type') === ProductPrice::PRICETYPE_RECURRING)
    // ... other configurations ...

Problem: The 'Recurring Billing Period' field doesn't appear immediately when 'Recurring' is selected. It only shows up after saving the form. What I've Tried: - Adding ->reactive() to Section and Form - Using afterStateUpdated on 'price_type' - Debug logging This works in other resources (e.g., CourseResource) but not here. Any ideas on what might be causing this and how to fix it?

2 replies

FFilament

•Created by Daniel on 6/30/2024 in #❓┊help

Issue: MorphToSelect with Translated Titles

I'm struggling to set up a MorphToSelect field for a polymorphic relationship where I need to display translated titles. Here's my current setup:

MorphToSelect::make('productable')
    ->types([
        MorphToSelect\Type::make(Course::class)
            ->titleAttribute('id') <-- Here I want to display a column from the related table, I want to display the course_title in the primary language.
            ->getOptionLabelUsing(function (Course $record): string {
                return $record->translations()
                    ->where('locale_id', $record->primary_locale_id)
                    ->first()?->course_title ?? 'Untitled Course';
            })
            ->getSearchResultsUsing(function (string $search): Builder {
                return Course::whereHas('translations', function ($query) use ($search) {
                    $query->where('course_title', 'like', "%{$search}%");
                });
            }),
    ])
    ->native(false)
    ->required(),

MorphToSelect::make('productable')
    ->types([
        MorphToSelect\Type::make(Course::class)
            ->titleAttribute('id') <-- Here I want to display a column from the related table, I want to display the course_title in the primary language.
            ->getOptionLabelUsing(function (Course $record): string {
                return $record->translations()
                    ->where('locale_id', $record->primary_locale_id)
                    ->first()?->course_title ?? 'Untitled Course';
            })
            ->getSearchResultsUsing(function (string $search): Builder {
                return Course::whereHas('translations', function ($query) use ($search) {
                    $query->where('course_title', 'like', "%{$search}%");
                });
            }),
    ])
    ->native(false)
    ->required(),

Courses have translations in a separate table. I can't get the translated title to display in the select field - I either get errors about undefined columns or the ID is displayed instead of the title. How can I properly set this up to: - Display the course title in the primary language. - Allow searching based on translated titles. - Correctly save the polymorphic relationship. Any help is appreciated!

1 replies

FFilament

•Created by Daniel on 6/22/2024 in #❓┊help

Use Tailwind classes in Custom Pages

Hello guys, I'm having an issue with Tailwind styles not working in custom pages of Filament. Here's the situation: 1. I've created a custom page in Filament with php artisan make:filament-page. 2. I'm trying to use Tailwind classes like bg-blue-500 and text-white in this page. 3. These Tailwind classes are working fine in my user-frontend, where I am using them with Svelte. 4. However, in my Filament custom page, the styles aren't being applied at all. I've double-checked my tailwind.config.js and it includes my custom views. ```js module.exports = { content: [ './resources/*/.blade.php', ], };

3 replies

FFilament

•Created by Daniel on 6/13/2024 in #❓┊help

Help: Form Repeater -> Make Values Selectable Only Once

Hi guys! Do you see any way to make Select/Toggle Values across repeater items selectable only once? It's a language select, and currently, a user can select German/English toggle twice and just save. I'm open for solutions. Thank you!

Repeater::make('translations')
    ->relationship('translations')
    ->default(function () {
        return [
            ['locale' => 'en'],
            ['locale' => 'de'],
        ];
    })
    ->schema([
        ToggleButtons::make('locale')
            ->label('Language')
            ->options([
                'en' => 'English',
                'de' => 'German',
            ])
            ->default('en')
            ->required()
            ->inline()
            ->afterStateUpdated(fn (callable $get, $set) => self::updateDisabledLocales($get, $set)),
        TextInput::make('course_title')
            ->label('Course Title')
            ->required()
            ->placeholder('Course Title'),
        Textarea::make('course_excerpt')
            ->label('Course Excerpt')
            ->placeholder('The course excerpt is a short description of the course.'),
        Textarea::make('course_description')
            ->label('Course Description')
            ->placeholder('The course description is a detailed overview of the course.'),
    ])
    ->maxItems(2)
    ->columnSpan('full'),

Repeater::make('translations')
    ->relationship('translations')
    ->default(function () {
        return [
            ['locale' => 'en'],
            ['locale' => 'de'],
        ];
    })
    ->schema([
        ToggleButtons::make('locale')
            ->label('Language')
            ->options([
                'en' => 'English',
                'de' => 'German',
            ])
            ->default('en')
            ->required()
            ->inline()
            ->afterStateUpdated(fn (callable $get, $set) => self::updateDisabledLocales($get, $set)),
        TextInput::make('course_title')
            ->label('Course Title')
            ->required()
            ->placeholder('Course Title'),
        Textarea::make('course_excerpt')
            ->label('Course Excerpt')
            ->placeholder('The course excerpt is a short description of the course.'),
        Textarea::make('course_description')
            ->label('Course Description')
            ->placeholder('The course description is a detailed overview of the course.'),
    ])
    ->maxItems(2)
    ->columnSpan('full'),

3 replies

FFilament

•Created by Daniel on 6/13/2024 in #❓┊help

Help: How to save data of a related model within a Filament form?

I'm trying to make the title of a CourseResource translatable into German and English. However, the translations are not being saved to the course_translations table. How can I handle the saving of fillable attributes that are in another table (relationship between 2 models) ?

public static function form(Form $form): Form
{
    return $form->schema([
        Section::make('English Content')
            ->schema([
                TextInput::make('translations.en.course_title') <-- Here
                    ->label('Course Title')
                    ->required()
                    ->placeholder('Course Title'),
            ]),
        Section::make('German Content')
            ->schema([
                TextInput::make('translations.de.course_title') <-- Here
                    ->label('Course Title')
                    ->required()
                    ->placeholder('Course Title'),
            ]),
        ...
]);

public static function form(Form $form): Form
{
    return $form->schema([
        Section::make('English Content')
            ->schema([
                TextInput::make('translations.en.course_title') <-- Here
                    ->label('Course Title')
                    ->required()
                    ->placeholder('Course Title'),
            ]),
        Section::make('German Content')
            ->schema([
                TextInput::make('translations.de.course_title') <-- Here
                    ->label('Course Title')
                    ->required()
                    ->placeholder('Course Title'),
            ]),
        ...
]);

In the Course model I have this:

public function translations(): HasMany
{
    return $this->hasMany(CourseTranslation::class);
 }

public function translations(): HasMany
{
    return $this->hasMany(CourseTranslation::class);
 }

And in the CourseTranslations this:

public function course(): BelongsTo
{
  return $this->belongsTo(Course::class);
}

public function course(): BelongsTo
{
  return $this->belongsTo(Course::class);
}

Unfortunately Spaties Translatable plugin doesn't suit my needs. :/ The DB tables exist for both both courses and course_translations. Detailed Code with Course Model, CourseTranslation Model and Course Resource: https://gist.github.com/Synistic/b033856ec909badfd09e6573feddb98f

4 replies

FFilament

•Created by Daniel on 6/11/2024 in #❓┊help

Relationship for a translations table -> How to save entry?

Hello guys! I have a filament form with 2 tabs, where the user can enter translatable details in German and English Issue: Currently the translations are not saved to the course_translations table. How can I save the English title in translations table to the locale "en" and the german one to the locale "de" ? This is what the form components look like:

Tab::make('English')
    ->schema([
        TextInput::make('translations.en.course_title') <-- Here
            ->label('Course Title')
            ->required()
            ->placeholder('Course Title'),
    ]),
Tab::make('German')
    ->schema([
        TextInput::make('translations.de.course_title') <-- Here
            ->label('Course Title')
            ->required()
            ->placeholder('Course Title'),
    ]),

Tab::make('English')
    ->schema([
        TextInput::make('translations.en.course_title') <-- Here
            ->label('Course Title')
            ->required()
            ->placeholder('Course Title'),
    ]),
Tab::make('German')
    ->schema([
        TextInput::make('translations.de.course_title') <-- Here
            ->label('Course Title')
            ->required()
            ->placeholder('Course Title'),
    ]),

My course translation model:

class CourseTranslation extends Model
{
    protected $fillable = [
        'course_id',
        'locale',
        'course_title',
        'course_description',
        'course_excerpt'
    ];

    public function course(): BelongsTo
    {
        return $this->belongsTo(Course::class);
    }
}

class CourseTranslation extends Model
{
    protected $fillable = [
        'course_id',
        'locale',
        'course_title',
        'course_description',
        'course_excerpt'
    ];

    public function course(): BelongsTo
    {
        return $this->belongsTo(Course::class);
    }
}

And inside the Course model I have:

public function translations(): HasMany
    {
        return $this->hasMany(CourseTranslation::class);
    }

public function translations(): HasMany
    {
        return $this->hasMany(CourseTranslation::class);
    }

What's the best approach to realize this?

1 replies

FFilament

•Created by Daniel on 6/10/2024 in #❓┊help

Remove Buttons in Action Modal

3 replies

FFilament

•Created by Daniel on 6/6/2024 in #❓┊help

How do Custom Components actually work? Can someone explain it to me?

Hi guys, I'm working on a custom component for the form of my "Video" resource. Problem: I get the following error: Undefined variable $record I started to create a custom layout via php artisan make:form-layout BunnyVideo . The Blade looks like this:

<div {{ $attributes }}>
    {{ $getChildComponentContainer() }}

    <div class="mt-6">
        <h2 class="text-xl font-bold">Video Preview</h2>
        <iframe src="https://iframe.mediadelivery.net/embed/249784/{$record->key}" width="640" height="360" allowfullscreen></iframe>
    </div>
</div>

<div {{ $attributes }}>
    {{ $getChildComponentContainer() }}

    <div class="mt-6">
        <h2 class="text-xl font-bold">Video Preview</h2>
        <iframe src="https://iframe.mediadelivery.net/embed/249784/{$record->key}" width="640" height="360" allowfullscreen></iframe>
    </div>
</div>

In addition I have this BunnyVideo Class:

class BunnyVideo extends Component
{
    protected string $view = 'forms.components.bunny-video';

    public function __construct(protected string|Closure|null $key)
    {
    }

    public static function make(string $key): static
    {
        logger()->info($key);
        return app(static::class, ['key' => $key]);
    }

    public function getKey(): ?string
    {
        return $this->key instanceof Closure ? ($this->key)() : $this->key;
    }
}

class BunnyVideo extends Component
{
    protected string $view = 'forms.components.bunny-video';

    public function __construct(protected string|Closure|null $key)
    {
    }

    public static function make(string $key): static
    {
        logger()->info($key);
        return app(static::class, ['key' => $key]);
    }

    public function getKey(): ?string
    {
        return $this->key instanceof Closure ? ($this->key)() : $this->key;
    }
}

I use the BunnyVideo component like this in the form function of the VideoResource: BunnyVideo::make('key'),

6 replies

FFilament

•Created by Daniel on 6/6/2024 in #❓┊help

Please help! What is the best way to use JS within Custom Pages?

Hello guys! I have switched from Laravel Nova to Filament and am wondering what options I have to add JS components to my custom page. I use the JS library “Uppy” to upload videos. With Command php artisan make:filament-page VideoUploader I now have a view file under: resources/views/filament/resources/video-resource/pages/video-uploader.blade.php Can I include dynamic JS components in this file? For example via Vue? I already work with vue in the user frontend, I only use filament for the admin dashboard. What is the best approach in your experience?

3 replies

Gaming

Programming