taz Posts - Answer Overflow

taz

•Created by taz on 11/8/2024 in #❓┊help

Failed to lazy load a column in a table

I have a custom column that lazy load a livewire component. But it still wait 7 seconds before seeing the table appear on screen. Have you ever lazy load a column in a FIlament table ?

<?php

namespace App\Tables\Columns;

use Filament\Tables\Columns\Column;

class ModelStatusColumn extends Column
{
    protected string $view = 'tables.columns.model-status-column';
}

<?php

namespace App\Tables\Columns;

use Filament\Tables\Columns\Column;

class ModelStatusColumn extends Column
{
    protected string $view = 'tables.columns.model-status-column';
}

and its view lazy loads a livewire component

<div>
    <livewire:model-status-livewire-component lazy :record="$getRecord()"  />
</div>

<div>
    <livewire:model-status-livewire-component lazy :record="$getRecord()"  />
</div>

Livewire component lazy loaded

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Lazy;

#[Lazy]
class ModelStatusLivewireComponent extends Component
{
    public $record;

    public ?string $longAttributeToCompute = null;

    public function mount($record)
    {
        $this->record = $record;
        sleep(7);  // Simulate a 5 to 7 seconds long api call that will do a compute based on some record attributes
        $this->longAttributeToCompute = $record->name;
       
    }

    public function render()
    {
        return view('livewire.model-status-livewire-component');
    }
}

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Lazy;

#[Lazy]
class ModelStatusLivewireComponent extends Component
{
    public $record;

    public ?string $longAttributeToCompute = null;

    public function mount($record)
    {
        $this->record = $record;
        sleep(7);  // Simulate a 5 to 7 seconds long api call that will do a compute based on some record attributes
        $this->longAttributeToCompute = $record->name;
       
    }

    public function render()
    {
        return view('livewire.model-status-livewire-component');
    }
}

<div class="px-4 py-3 text-white font-bold">
    {{ $longAttributeToCompute }}
</div>

<div class="px-4 py-3 text-white font-bold">
    {{ $longAttributeToCompute }}
</div>

2 replies

FFilament

•Created by taz on 11/8/2024 in #❓┊help

Lazy load a custom column in a table

I display a Model in a table and all of its columns are model attributes that are stored in the DB so the table loads instantly. Now I need to display a computed attribute that requires an api call to an external service that takes 2s approxiamtively. Id like to lazy load only the column displaying that attribute. I was thinking doing like this

use Filament\Tables\Columns\Column;
use Livewire\Attributes\Lazy;

#[Lazy]
class CustomStatus extends Column
{
    public $longAttributeToCompute;
 
    public function mount()
    {
        $this->longAttributeToCompute = ExternalService::longApiCall($this->getRecord());
    }
    protected string $view = 'filament.tables.columns.CustomStatus';
}

use Filament\Tables\Columns\Column;
use Livewire\Attributes\Lazy;

#[Lazy]
class CustomStatus extends Column
{
    public $longAttributeToCompute;
 
    public function mount()
    {
        $this->longAttributeToCompute = ExternalService::longApiCall($this->getRecord());
    }
    protected string $view = 'filament.tables.columns.CustomStatus';
}

But is Livewire Filament\Tables\Columns\Column is that a Livewire component ? Or its possible to make CustomStatus a Livewire component ?

2 replies

FFilament

•Created by taz on 10/15/2024 in #❓┊help

Button Edit Action disappear after first click

Button Edit from my ViewResource header always disapear after first click (see video attached). On the client side I have this error on the console from Morph.js

TypeError: e.setAttribute is not a function

TypeError: e.setAttribute is not a function

. I can't figure out what's happened. It happens on other part of my UI. Also its only in production where I use FrankenPHP. The livewire/update request retuns a 200 with the button present in the Livewire response. Morph dom seem to fail to morph the dom accordingly ? Any ideas of this issue ?

32 replies

FFilament

•Created by taz on 9/26/2024 in #❓┊help

Relation Manager Alpine Expression Error: selectedRecords is not defined

On the frontend in my relation manager I have an alpine error:

livewire.js?id=cc800bf4:1125 Alpine Expression Error: selectedRecords is not defined

Expression: "false || (selectedRecords.length && 1)"

livewire.js?id=cc800bf4:1125 Alpine Expression Error: selectedRecords is not defined

Expression: "false || (selectedRecords.length && 1)"

Filament version: v3.2.114 (latest) Livewire version: v3.5.6 Here is my relation manager code: https://gist.github.com/PaulBorie/2860b53fc3ae6188617e0328fbd94a3e

3 replies

FFilament

•Created by taz on 8/29/2024 in #❓┊help

unique rule from filament is case sensitive ?

 public static function getForm(): array {
        return [
           Section::make()
                ->schema([
                    TextInput::make('name')
                        ->label("Product Name")
                        ->required()
                        ->unique(table: Product::class, ignoreRecord: true)
                        ->minLength(4)
                        ->maxLength(30)
                        ->autofocus(),
                ]),

 public static function getForm(): array {
        return [
           Section::make()
                ->schema([
                    TextInput::make('name')
                        ->label("Product Name")
                        ->required()
                        ->unique(table: Product::class, ignoreRecord: true)
                        ->minLength(4)
                        ->maxLength(30)
                        ->autofocus(),
                ]),

I dont't know if it's a filament issue and how to fix it but I have a unique rule applied to the form field name. But the name "John" is considered similar to "john" and similar to "jóhn" I dont want that. Id like them to be considered different ! Thanks you . Filament is awesome btw!

3 replies

FFilament

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

Forms hint opens a modal

 Textarea::make('description')
    ->hint(OPEN A MODAL)
    ->required()

 Textarea::make('description')
    ->hint(OPEN A MODAL)
    ->required()

Do you know an easy way to display a modal as a hint in a Form ? Id like to create a custom Hint with full blade template control like Im used to do with Custom column in Table Builder ? Thanks you !

5 replies

FFilament

•Created by taz on 8/7/2024 in #❓┊help

Livewire components that implements HasForms can have multiple forms ?

How I can have multiple forms in a custom Livewire component that implements HasForms ? This Is my component and in my view I use {{ $this->form }} to render the form. I need a form for FirstModel AND SecondModel. Thanks you. Filament is awesome btw !

<?php

namespace App\Livewire;

use App\Models\SecondModel;
use App\Models\FirstModel;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Livewire\Component;

class GetStarted extends Component implements HasForms
{
    use InteractsWithForms;

    public ?FirstModel $firsModel = null;

    public ?SeconModel $secondModel = null;

    public $name = '';
    public $surname = '';
 

    public $currentPage = 1;
    public $totalPages = 4;

    protected function getFormSchema(): array
    {
        return FirstModel::getForm();
    }

    public function create(): void
    {
        $this->firstModel = FirstModel::create($this->form->getState());
        $this->nextPage();
    }

    public function render()
    {
        return view('livewire.get-started');
    }
  ....
}

<?php

namespace App\Livewire;

use App\Models\SecondModel;
use App\Models\FirstModel;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Livewire\Component;

class GetStarted extends Component implements HasForms
{
    use InteractsWithForms;

    public ?FirstModel $firsModel = null;

    public ?SeconModel $secondModel = null;

    public $name = '';
    public $surname = '';
 

    public $currentPage = 1;
    public $totalPages = 4;

    protected function getFormSchema(): array
    {
        return FirstModel::getForm();
    }

    public function create(): void
    {
        $this->firstModel = FirstModel::create($this->form->getState());
        $this->nextPage();
    }

    public function render()
    {
        return view('livewire.get-started');
    }
  ....
}

4 replies

FFilament

•Created by taz on 7/30/2024 in #❓┊help

FIlament Blade components outside filament. Change default primary color

I am using some filament blade components outside Filament, in a classical blade template.

<x-filament::button
                        icon="heroicon-s-paper-airplane"
                        icon-position="after"
                        color="primary"
                    >
                        Start Free Trial
</x-filament::button>

<x-filament::button
                        icon="heroicon-s-paper-airplane"
                        icon-position="after"
                        color="primary"
                    >
                        Start Free Trial
</x-filament::button>

So in my app layout blade file I added Filament styles:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'myapp') }}</title>
        <link rel="icon" href="favicon.ico" />
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @filamentStyles
    </head>
    <body {{ $attributes->merge(['class' => 'bg-noir-900']) }}>
        {{ $slot }}
        @stack('scripts')
    </body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'myapp') }}</title>
        <link rel="icon" href="favicon.ico" />
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @filamentStyles
    </head>
    <body {{ $attributes->merge(['class' => 'bg-noir-900']) }}>
        {{ $slot }}
        @stack('scripts')
    </body>
</html>

Everything works fine but how to change the primary color. I want to change the default yellow color for the components when setting 'primary' on the components color attribute. Thanks you. Filament is awesome by the way !

9 replies

FFilament

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

Unconventional Pivot table name. How to tell the Relation manager to use this table name ?

I have a many to many relationship between my Customer Model and Chatter Model and a Pivot class unconventionaly named ChattingInstance. I created a RelationManager for the CustomerResource named ChattersRelationManager but the DB request failed because it tries to use the conventional table name for the Pivot class which should be name chatter_customer. How I can force to use the right table name which is 'chatting_instances' ?

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'mydb.chatter_customer' doesn't exist

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'mydb.chatter_customer' doesn't exist

class ChattingInstance extends Pivot {
   protected $table = 'chatting_instances';
}

class ChattingInstance extends Pivot {
   protected $table = 'chatting_instances';
}

class Customer extends Model {
  public function chatters(): BelongsToMany
      {
          return $this->belongsToMany(Chatter::class)
              ->withPivot('url', 'status')
              ->withTimestamps()
              ->using(ChattingInstance::class);
      }
}

class Customer extends Model {
  public function chatters(): BelongsToMany
      {
          return $this->belongsToMany(Chatter::class)
              ->withPivot('url', 'status')
              ->withTimestamps()
              ->using(ChattingInstance::class);
      }
}

class Chatter extends Model {
   public function customers(): BelongsToMany
      {
          return $this->belongsToMany(Customer::class)
              ->withPivot('url', 'status')
              ->withTimestamps()
              ->using(ChattingInstance::class);
      }
}

class Chatter extends Model {
   public function customers(): BelongsToMany
      {
          return $this->belongsToMany(Customer::class)
              ->withPivot('url', 'status')
              ->withTimestamps()
              ->using(ChattingInstance::class);
      }
}

6 replies

FFilament

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

Adding z-30 class to the slideover

I need to add a z-30 class to the SlideOver to make the slideOver in front of another element which is has an inferior z index. Publishing the view is not a good practice. Is there another way ? If not is the correct file to override the exsiting slideOver blade file is to place at views/vendor/filament-support/components/modal/index.php in my current project ? or its not fhis file? Thnaks you.

3 replies

Gaming

Programming