Filament incompatibility with spatie/laravel-model-states

I have this in my Order model

    protected $casts = [
        'status' => OrderStatus::class,
    ];

and I have this in my OrderStatus state class:

use Spatie\ModelStates\State;
use Spatie\ModelStates\StateConfig;

abstract class OrderStatus extends State
{
    abstract public function orderUpdates(): string;

    public static function config(): StateConfig
    {
        return parent::config()
            ->default(Added::class)
            ->allowTransition(Added::class, MvlRejected::class)
            ->allowTransition(Added::class, MvlAccepted::class)
            ->allowTransition(MvlRejected::class, Ended::class)
            ->allowTransition(MvlAccepted::class, EmployeeRejected::class)
            ->allowTransition(EmployeeRejected::class, Ended::class)
            ->allowTransition(HrAccepted::class, Confirmed::class)
            ->allowTransition(Confirmed::class, Ended::class)
        ;
    }
}

This is the Added class code:

class Added extends OrderStatus
{
    public static $name = 'added';
    public function orderUpdates(): string
    {
        return 'Added';
    }
}

When I try to view my order in filament, I get this error:Property type not supported in Livewire for property: ["added"] when the order is in the added state

LaryAI

2 years ago

Level 58

It seems like you're encountering an issue with the serialization of the OrderStatus state class when using Livewire, which is a dependency of Filament. Livewire has some limitations on what kind of data it can handle, and custom objects like the states from the spatie/laravel-model-states package can cause issues.

To resolve this, you can create a computed property in your Livewire component that returns a simple type (like a string or an array) that represents the state, instead of trying to pass the state object itself to the Livewire component.

Here's an example of how you might adjust your Livewire component to handle this:

class OrderComponent extends Component
{
    public $orderId;
    public $orderStatusName;

    public function mount($orderId)
    {
        $this->orderId = $orderId;
        $this->loadOrderStatusName();
    }

    public function loadOrderStatusName()
    {
        $order = Order::findOrFail($this->orderId);
        $this->orderStatusName = $order->status->label(); // Assuming you have a label method or similar to get a string representation
    }

    // ...
}

In your Livewire view file, you would then use {{ $orderStatusName }} to display the status, instead of trying to display the state object directly.

If you need to display different information based on the state, you can create multiple computed properties or a single property that returns an array with all the necessary information.

Remember to update your Livewire component whenever the state changes, so the displayed information is always up-to-date.

If you're using Filament's admin panel and encountering this issue within Filament's resources, you might need to create a custom column type or use a callback to convert the state object to a string when defining your resource's table columns.

Here's an example of how you might define a custom column in a Filament resource:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('status')
    ->label('Status')
    ->formatStateUsing(fn ($state) => $state->label()), // Assuming you have a label method on your state class

This way, you're providing a simple string to Filament's table, which should be compatible with Livewire's serialization requirements.

1 like

cxbdia

2 years ago

Level 3

I am able to show this in the table column successfully although my my order view page in filament fails to open with this error: Property type not supported in Livewire for property: ["added"]

cxbdia

2 years ago

Best Answer

Level 3

I was able to resolve this issue by adding the following in my abstract class:

public function toLivewire()
    {
        return [
            'name' => $this->getValue()
        ];
    }

    public static function fromLivewire($value)
    {
        return new static($value);
    }

maartenpaauw

1 year ago

Level 6

Its indeed the Livewire interface and methods that’s needed. I’ve published a plugin which solves this issue and adds a ton of other functionality: https://filamentphp.com/plugins/maartenpaauw-model-states

1 like

Please or to participate in this conversation.