@ryanvelbon Posts - Answer Overflow

@ryanvelbon

Posts Comments

FFilament

•Created by @ryanvelbon on 5/27/2024 in #❓┊help

How to filter what suggestions SpatieTagsInput shows?

4 replies

FFilament

•Created by @ryanvelbon on 3/18/2024 in #❓┊help

How to modify the search results format in Filament's Select field?

8 replies

FFilament

•Created by @ryanvelbon on 3/7/2024 in #❓┊help

Class "Filament\Forms\Components\Split" not found

2 replies

FFilament

•Created by @ryanvelbon on 2/23/2024 in #❓┊help

How to remove the header section and render the Create button in the header toolbar instead?

3 replies

FFilament

•Created by @ryanvelbon on 2/23/2024 in #❓┊help

How to override default inline styling?

For example headings have the following default styling fi-header-heading text-2xl font-bold tracking-tight text-gray-950 sm:text-3xl dark:text-white The following would successfully change the background color but would fail to customize the text color since text-green-100 would get overridden by the inline text-gray-950

@layer components {
    .fi-header-heading {
        @apply bg-red-500 text-green-100;
    }
}

@layer components {
    .fi-header-heading {
        @apply bg-red-500 text-green-100;
    }
}

7 replies

FFilament

•Created by @ryanvelbon on 2/22/2024 in #❓┊help

Method Filament\Panel::assets does not exist.

I'm on Filament 3.1 Trying to register assets for a panel.

public function panel(Panel $panel): Panel
{
    return $panel
        ->id('seller')
        ->path('my-shop')
        ->colors([
            'primary' => Color::Blue,
        ])
        ->assets([
            Css::make('custom-stylesheet', resource_path('css/seller-panel.css')),
            Js::make('custom-script', resource_path('js/seller-panel.js')),
        ])
}

public function panel(Panel $panel): Panel
{
    return $panel
        ->id('seller')
        ->path('my-shop')
        ->colors([
            'primary' => Color::Blue,
        ])
        ->assets([
            Css::make('custom-stylesheet', resource_path('css/seller-panel.css')),
            Js::make('custom-script', resource_path('js/seller-panel.js')),
        ])
}

Getting the error

Method Filament\Panel::assets does not exist.

Method Filament\Panel::assets does not exist.

3 replies

FFilament

•Created by @ryanvelbon on 2/17/2024 in #❓┊help

Customer-Facing Filament - Tailwind Classes Not Compiling

6 replies

FFilament

•Created by @ryanvelbon on 1/30/2024 in #❓┊help

How to replace default actions in the Create and Edit pages?

I'm trying to build something similar to WordPress with Filament whereby a record can be published or saved as a draft. So basically I need to override the default Create functionality. I would like to remove the default "Create" and "Create & create another" buttons Add add these three custom actions instead "Save Draft", "Publish", "Schedule" and on the EditPage if $record->isPublished() an "Unpublish" action will be rendered instead of "Publish"

12 replies

FFilament

•Created by @ryanvelbon on 1/27/2024 in #❓┊help

How to redirect without making a full page request?

Panel uses spa()

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->spa();
    }
}

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->spa();
    }
}

In my PostResource's $form I have a custom action which redirects to the table.

Action::make('publish')
    ->action(function ($record) {
        
        $record->publish();
        
        return redirect(self::getUrl('index'));
    })

Action::make('publish')
    ->action(function ($record) {
        
        $record->publish();
        
        return redirect(self::getUrl('index'));
    })

Does Filament have its own redirect method which doesn't break the SPA UX?

2 replies

FFilament

•Created by @ryanvelbon on 1/24/2024 in #❓┊help

Can I pass in a filament resource's form into createOptionsForm()?

For example we have Post belongsToMany Tag and I want to be able to create new tags on-the-fly when selecting tags for a Post.

class TagResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->live(debounce: '1000')
                    ->afterStateUpdated(fn (Set $set, ?string $state) => $set('slug', Str::slug($state)))
                    ->required()
                    ->unique()
                    ->maxLength(50),
                Forms\Components\TextInput::make('slug')
                    ->required()
                    ->unique()
                    ->maxLength(50),
            ]);
    }

class TagResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->live(debounce: '1000')
                    ->afterStateUpdated(fn (Set $set, ?string $state) => $set('slug', Str::slug($state)))
                    ->required()
                    ->unique()
                    ->maxLength(50),
                Forms\Components\TextInput::make('slug')
                    ->required()
                    ->unique()
                    ->maxLength(50),
            ]);
    }

class PostResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Select::make('tags')
                    ->multiple()
                    ->relationship(titleAttribute: 'name')
                    ->createOptionForm([]) // what is a DRY solution to avoid copy-pasting the form fields?

class PostResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Select::make('tags')
                    ->multiple()
                    ->relationship(titleAttribute: 'name')
                    ->createOptionForm([]) // what is a DRY solution to avoid copy-pasting the form fields?

7 replies

FFilament

•Created by @ryanvelbon on 1/17/2024 in #❓┊help

How do I show no icon when column's state is false?

3 replies

FFilament

•Created by @ryanvelbon on 1/15/2024 in #❓┊help

How to display an enum's label rather than value in a TextColumn?

My Customer model has a priority column which stores any one of these values: 1, 2, 3.

class Customer extends Model
{
    public const PRIORITY_SELECT = [
        1 => 'Low',
        2 => 'Medium',
        3 => 'High',
    ];
}

class Customer extends Model
{
    public const PRIORITY_SELECT = [
        1 => 'Low',
        2 => 'Medium',
        3 => 'High',
    ];
}

How do I make TextColumn::make('priority') display the value instead of the key? Here's what I have. However I don't want this displayed as a description but rather as the value itself.

Tables\Columns\TextColumn::make('priority')
    ->badge()
    ->description(fn (Customer $record): string => Customer::PRIORITY_SELECT[$record->priority])
    ->color(fn (string $state): string => match ($state) {
        '1' => 'gray',
        '2' => 'warning',
        '3' => 'success',
    }),

Tables\Columns\TextColumn::make('priority')
    ->badge()
    ->description(fn (Customer $record): string => Customer::PRIORITY_SELECT[$record->priority])
    ->color(fn (string $state): string => match ($state) {
        '1' => 'gray',
        '2' => 'warning',
        '3' => 'success',
    }),

16 replies

FFilament

•Created by @ryanvelbon on 1/14/2024 in #❓┊help

Does @livewireScripts directive still need to be included when using @filamentScripts?

The TALL preset base.blade.layout has @livewireScripts & @livewireStyles. I want to use filament in the front-end, so I've inserted the @filamentScripts & @filamentStyles directives.

<html>
    <head>
        @livewireStyles
        @filamentStyles
        @vite('resources/sass/app.scss')
    </head>

    <body>
        @yield('body')

        @livewireScripts
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

<html>
    <head>
        @livewireStyles
        @filamentStyles
        @vite('resources/sass/app.scss')
    </head>

    <body>
        @yield('body')

        @livewireScripts
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

Have I placed the directives in the correct order?

2 replies

FFilament

•Created by @ryanvelbon on 1/10/2024 in #❓┊help

How to enable/disable field when another field is null/filled

DateTimePicker::make('starts_at'),
DateTimePicker::make('ends_at')
    ->disabled(fn (Get $get): bool => empty($get('starts_at'))),

DateTimePicker::make('starts_at'),
DateTimePicker::make('ends_at')
    ->disabled(fn (Get $get): bool => empty($get('starts_at'))),

5 replies

FFilament

•Created by @ryanvelbon on 1/10/2024 in #❓┊help

How to properly set up Filament when building a customer-facing app using TALL Stack preset

4 replies

FFilament

•Created by @ryanvelbon on 12/28/2023 in #❓┊help

Upgraded from v2 to 3, AdminPanelProvider's colors() method not working?

I've just upgraded from v2 to v3. Everything is working fine but the color palette does not seem to be working.

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => Color::Red,
            ])

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => Color::Red,
            ])

Previously I had color-coded badge columns. But now everything is mute. I have a tailwind.config.js file in my project's root folder

const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './vendor/filament/**/*.blade.php',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        danger: colors.rose,
        primary: colors.blue,
        success: colors.green,
        warning: colors.yellow,
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './vendor/filament/**/*.blade.php',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        danger: colors.rose,
        primary: colors.blue,
        success: colors.green,
        warning: colors.yellow,
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

But I know that in v3 this file is not necessary as it is provided in vendor/filament/filament/tailwind.config.js Should I go ahead and delete my tailwind.config.js and postcss.config.js files?

2 replies

FFilament

•Created by @ryanvelbon on 12/26/2023 in #❓┊help

Upload multiple images to a model

I have a Project model and I want the user to be able to upload many images for each project. I'm storing the images in an images table.

class Project extends Model
{
    protected $casts = [
        'images' => 'array',
    ];

    public function images(): MorphMany
    {
        return $this->morphMany(Image::class, 'imageable');
    }
}

class Project extends Model
{
    protected $casts = [
        'images' => 'array',
    ];

    public function images(): MorphMany
    {
        return $this->morphMany(Image::class, 'imageable');
    }
}

Schema::create('images', function (Blueprint $table) {
    $table->id();
    $table->string('url');
    $table->unsignedBigInteger('imageable_id');
    $table->string('imageable_type');
    $table->timestamps();
});

Schema::create('images', function (Blueprint $table) {
    $table->id();
    $table->string('url');
    $table->unsignedBigInteger('imageable_id');
    $table->string('imageable_type');
    $table->timestamps();
});

How do I allow the user to upload images and have them associated to the Project model being created?

FileUpload::make('images')
    ->image()
    ->multiple()
    ->maxFiles(10)
    ->reorderable(),

FileUpload::make('images')
    ->image()
    ->multiple()
    ->maxFiles(10)
    ->reorderable(),

5 replies

FFilament

•Created by @ryanvelbon on 4/19/2023 in #❓┊help

How to list multiple items in a column? (BelongsToMany & HasMany relationships)

3 replies

Gaming

Programming