Xiaohou Posts - Answer Overflow

Xiaohou

Explore posts from servers

DIAdiscord.js - Imagine an app FFilament

•Created by Xiaohou on 10/31/2024 in #❓┊help

Filament color is not reactive

At first, i found out the badge color inside table doesn't update alone with the text. For example, when the status value is changed from activated to deactivated, the text inside badge will update to the getLabel() value, however, the color of the badge stay the same. I thought it was an issue relating to badge. The text column code:

Tables\Columns\TextColumn::make('status'),

Tables\Columns\TextColumn::make('status'),

The enum status code:

<?php

namespace App\Enums;

use Filament\Support\Contracts\HasColor;
use Filament\Support\Contracts\HasLabel;

enum UserStatus: string implements HasLabel, HasColor
{
    case Activated = 'activated';
    case Deactivated = 'deactivated';

    public function getLabel(): ?string
    {
        return match ($this) {
            self::Activated => 'activated',
            self::Deactivated => 'deactivated',
        };
    }

    public function getColor(): array|string
    {
        return match ($this) {
            self::Activated => 'success',
            self::Deactivated => 'danger',
        };
    }
}

<?php

namespace App\Enums;

use Filament\Support\Contracts\HasColor;
use Filament\Support\Contracts\HasLabel;

enum UserStatus: string implements HasLabel, HasColor
{
    case Activated = 'activated';
    case Deactivated = 'deactivated';

    public function getLabel(): ?string
    {
        return match ($this) {
            self::Activated => 'activated',
            self::Deactivated => 'deactivated',
        };
    }

    public function getColor(): array|string
    {
        return match ($this) {
            self::Activated => 'success',
            self::Deactivated => 'danger',
        };
    }
}

Upon some more troubleshooting, i realized all colors are not reactive. Even when i have a method that dynamically return filament action, lets say ban or unban action, which has danger or success color. The dynamic action will update based on user status, however, the color of the action itself doesnt change.

13 replies

FFilament

•Created by Xiaohou on 10/23/2024 in #❓┊help

Badge color doesn't update using Enum status

For text column inside table builder, when using a badge() with status casted from Enum, the color doesnt change when the status change. For example, when then status value is changed from activated to deactivated via form, the text inside badge will update to the getLabel() value, however, the color of the badge doesnt update. The text column code:

Tables\Columns\TextColumn::make('status'),

Tables\Columns\TextColumn::make('status'),

The enum status code:

<?php

namespace App\Enums;

use Filament\Support\Contracts\HasColor;
use Filament\Support\Contracts\HasLabel;

enum UserStatus: string implements HasLabel, HasColor
{
    case Activated = 'activated';
    case Deactivated = 'deactivated';

    public function getLabel(): ?string
    {
        return match ($this) {
            self::Activated => 'activated',
            self::Deactivated => 'deactivated',
        };
    }

    public function getColor(): array|string
    {
        return match ($this) {
            self::Activated => 'success',
            self::Deactivated => 'danger',
        };
    }
}

<?php

namespace App\Enums;

use Filament\Support\Contracts\HasColor;
use Filament\Support\Contracts\HasLabel;

enum UserStatus: string implements HasLabel, HasColor
{
    case Activated = 'activated';
    case Deactivated = 'deactivated';

    public function getLabel(): ?string
    {
        return match ($this) {
            self::Activated => 'activated',
            self::Deactivated => 'deactivated',
        };
    }

    public function getColor(): array|string
    {
        return match ($this) {
            self::Activated => 'success',
            self::Deactivated => 'danger',
        };
    }
}

I did make sure the status is casted to enum from my model, any help will be appreciated!

4 replies

FFilament

•Created by Xiaohou on 10/14/2024 in #❓┊help

How to refer to filament semantic color in blade file?

This is a example filament button component, which render a button with the 'success' color. The 'success' then can be set up to be whatever color from tailwind.

  <x-filament::button color="success">
      New Button
  </x-filament::button>

  <x-filament::button color="success">
      New Button
  </x-filament::button>

I want to be able to refer this 'success' color in my blade file, so I can make lets say make a 'alert' component that is the same as the rest.

  <div class="flex justify-between items-center flex-grow">
      New Alert
  </div>

  <div class="flex justify-between items-center flex-grow">
      New Alert
  </div>

Any help would be appreciated!

8 replies

FFilament

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

How to use the resources outside of panel

I'm using filament table on a custom Livewire page, which is working just as expected. However, i found the finished class is just really long and messy. Especially for the action part, for each table, i need to set up actions for view, create, edit, and delete. Each action will then contain more code such as forms, hooks, notifications, etc... Putting everything inside one function makes the code very hard to read and manage.

public function table(Table $table): Table
    {
         return $table
            ->query(User::query())
            ->columns([
                // columns here
            ])
            ->headerActions([
                // actions here
            ])
            ->actions([
                // more actions here
            ]);
    }

public function table(Table $table): Table
    {
         return $table
            ->query(User::query())
            ->columns([
                // columns here
            ])
            ->headerActions([
                // actions here
            ])
            ->actions([
                // more actions here
            ]);
    }

I then found out you can generate filament resources for the model under panel section, it has the information needed to render table and form, also individual pages to view, create, edit, and delete the model. It would make the table function much cleaner and easier to manage if I can use the resources class from filament. I did get the resources to works inside filament panel, but i cant get it working inside my custom Livewire component. To be more specific, the data table works fine. But none of the action works, it opens empty modal. Would be much appriciate if someone could point me in the right direction. The Livewire class

<?php

namespace App\Livewire\UserTable;

use App\Filament\Resources\UserResource;

public function table(Table $table): Table
{
   return UserResource::table($table);
}

<?php

namespace App\Livewire\UserTable;

use App\Filament\Resources\UserResource;

public function table(Table $table): Table
{
   return UserResource::table($table);
}

The Livewire view

<div>
    {{ $this->table }}
</div>

<div>
    {{ $this->table }}
</div>

4 replies

Gaming

Programming