Benjámin Posts - Answer Overflow

Benjámin

•Created by Benjámin on 7/3/2024 in #❓┊help

Livewire 3 wire loading 2 cycles

Hi! This question is about pure Livewire 3, not Filament. Does anybody know how to resolve the issue below? I have a form, where users can upload fonts. Right next to the form, there is a preview block, where the uploaded font gets rendered. I've attached the important parts of the Typography component that handles the logic here. Also attached a video snippet that show the issue, where there is 2 cycles of loading states. Anybody knows that the second loading happens, because of the dispatch, or the font face loading? And how can I prevent it? The result should be 1 cycle of loading started at the beginning of the file upload, and the end when the text is already showing with the correct font face. The process looks like this in a nutshell: 1. The user uploads the file into the file input -> updated function runs, and stores the file. 2. The updated function dispatch-es change-font with the font-face information, including the src. 3. The event reacting to the change-font replaces the correct font-face in the dom. 4. The dom loads up the font by the given src. Also the ttf -> woff conversion isn't on point, I dunno if anybody has some advice about how to keep track of the converted file between requests to only store the converted one in the database once the user hits Next. Than I could return the woff even if ttf got uploaded.

4 replies

FFilament

•Created by Benjámin on 4/4/2024 in #❓┊help

Conditional filter rendering by $activeTab

Hello! I'm using the active tab to decide visibility like here and here. The difference, that I'm using it for a filter, not action, and only a single filter, not all the filters.

Tables\Filters\SelectFilter::make('status')
  ->visible(fn ($livewire): bool => ! $livewire->activeTab)

Tables\Filters\SelectFilter::make('status')
  ->visible(fn ($livewire): bool => ! $livewire->activeTab)

My problem is, that it seems like the $livewire->activeTab changes after the page is reloaded. I use "" for the All page, and if I load the page, the status selector is visible, like it should be. If I change to one of the tabs, the page reloads, but the selector is still visible. After the second change it disappears. If I go back to the All, it's not visible, if I change again, it's visible, etc.... Do you guys have any idea what could be the problem, and how can I solve it?

6 replies

FFilament

•Created by Benjámin on 3/21/2024 in #❓┊help

Multi-tenancy without slug in the url

Hi! How would you approach multi-tenancy without the url slug? Might use session Instead or database with a has one of many relation that changes when user change tenant. I know I might need to overwrite some stuff, but where would you guys start?

2 replies

FFilament

•Created by Benjámin on 3/18/2024 in #❓┊help

Multi tenancy Dashboard redirect loop

I'm trying to work with multi tenancy in my application. The tenant model is called Account, and I set it on my PanelProvider like so:

return $panel
...
->tenant(Account::class, slugAttribute: 'slug');

return $panel
...
->tenant(Account::class, slugAttribute: 'slug');

(There is no ->path(...), the whole application is filament.) Works perfectly with the slugs like example.test/tenant. Subdomains are cool, so I wanted to make tenant.example.test instead, so I tryed:

return $panel
...
->tenant(Account::class, slugAttribute: 'slug')
->tenantDomain('{tenant:slug}.example.test');

return $panel
...
->tenant(Account::class, slugAttribute: 'slug')
->tenantDomain('{tenant:slug}.example.test');

It didn't work, I got "The page isn’t redirecting properly" error, I tried to figure out why. On default I run local projects with laragon (working on Windows 11 btw), but I made it work previously for another project, but I couldn't make it work this time. After some time I gave up with Laragon and tried to run it with php artisan serve --host="example.test". Same problem, but I found out that only the Dashboard throws this error, so I opened up the vendor folder and tried to catch the error. I ended up with the RedirectToTenantController, and this controller redirects every time to the same url.

$url = $panel->getUrl($tenant);
dd($url, url()->current()); // This is both: 'http://tenant.example.test'
...
return redirect($url);

$url = $panel->getUrl($tenant);
dd($url, url()->current()); // This is both: 'http://tenant.example.test'
...
return redirect($url);

I only had a custom widget on the dashboard, I commented it, also commented ->discoverWidgets(). I even tried to make a brand new project with only these details, but same happened. What am I missing, or what could be the problem, and how can I solve it?

4 replies

FFilament

•Created by Benjámin on 12/12/2023 in #❓┊help

Global Search With Spatie Settings

Hi! Can I use the Global Search with Pages ? Especially with the Filament Spatie Settings so users can search for the keys or the values of the setting?

2 replies

FFilament

•Created by Benjámin on 11/14/2023 in #❓┊help

Saving relationships when creating record with Repeater

I have an already working application with Filament v2, Laravel 9, PHP 8.0. There's a Model called Menu. A Menu could be available on a given week, so when you create a Menu you have to assign Offers to it, and also Meals to the Offers, which is set on the Dish Model with the price and an active toggle. So that's Menu hasMany Offer, Offer hasMany Dish, Dish belongsToMany Meal. This was already working well with 7 weekdays, but now there's a request to make it work with any amount of days, even like only weekends. Let me show you the essential parts of the code.

Forms\Components\Repeater::make('offers')
  ->relationship('offers')
  ->defaultItems(7)
  ->minItems(7)
  ->maxItems(7)
  ->disableItemCreation()
  ->disableItemDeletion()
  ->schema([
    Forms\Components\Toggle::make('active')
      ...,
    Forms\Components\TextInput::make('price')
      ->integer()
      ...,
    Forms\Components\Grid::make(1)
      ->relationship('dish')
      ->schema([
          Forms\Components\Select::make('meal_id')
            ->multiple()
            // ->required() Not anymore
            ->options(Meal::all()->pluck('nameWithPrice', 'id')),
     ])
  ])

Forms\Components\Repeater::make('offers')
  ->relationship('offers')
  ->defaultItems(7)
  ->minItems(7)
  ->maxItems(7)
  ->disableItemCreation()
  ->disableItemDeletion()
  ->schema([
    Forms\Components\Toggle::make('active')
      ...,
    Forms\Components\TextInput::make('price')
      ->integer()
      ...,
    Forms\Components\Grid::make(1)
      ->relationship('dish')
      ->schema([
          Forms\Components\Select::make('meal_id')
            ->multiple()
            // ->required() Not anymore
            ->options(Meal::all()->pluck('nameWithPrice', 'id')),
     ])
  ])

I know the Repeater could be used like... Add an item, then choose which day, than add another if wanted, but we want to keep these 7 items fixed, it works better UX wise. How can I tell the Repeater somehow, that it should only save the Offer when that meal_id on the Grid::relationship('dish') exists? I tried to solve this with ->saveRelationshipsUsing(), but no luck so far.

6 replies

FFilament

•Created by Benjámin on 9/26/2023 in #❓┊help

SelectAction state change action

What does SelectAction call when the selection change? I'm trying to solve model versioning with it, so after the selection i'd redirect the user to the given version, how can I implement this?

SelectAction::make('versions')
    ->options(function (Offer $record) {
        return $record->previousVersions();
    })
    ->afterStateUpdated(function ($state) {
        // Tried this method, but it doesn't exist.
    }),

SelectAction::make('versions')
    ->options(function (Offer $record) {
        return $record->previousVersions();
    })
    ->afterStateUpdated(function ($state) {
        // Tried this method, but it doesn't exist.
    }),

8 replies

FFilament

•Created by Benjámin on 4/28/2023 in #❓┊help

Using filament components in custom livewire component

6 replies

FFilament

•Created by Benjámin on 4/24/2023 in #❓┊help

Filament Table + Livewire UI Custom Modal

Hi! I have a Livewire Component which InteractsWithTable:

...
class Index extends Component implements HasTable
{
    use InteractsWithTable;
    
    public $wedding_id; // This is from URL query string
    protected Wedding $wedding;

    public function mount(): void 
    {
        $this->wedding = Wedding::findOrFail($this->wedding_id);
    }

    protected function getTableQuery(): Builder
    {
        return $this->wedding->budgetItemsQuery();

        // This function only returns a Builder in the model like this:
        // public function budgetItemsQuery(): Builder
        // {
        //    return Item::where('budget_id', $this->budget->id);
        // }
    }

    protected function getTableColumns(): array 
    {
        return [
            TextColumn::make('title'),
            TextColumn::make('value'),
        ];
    }

    protected function getTableActions(): array
    {
        return [
            Action::make('edit')
                ->color('warning')
                ->icon('heroicon-o-pencil')
                ->action(function () {
                    return $this->emit('openModal', 'item.edit');
                })
        ];
    }
}

...
class Index extends Component implements HasTable
{
    use InteractsWithTable;
    
    public $wedding_id; // This is from URL query string
    protected Wedding $wedding;

    public function mount(): void 
    {
        $this->wedding = Wedding::findOrFail($this->wedding_id);
    }

    protected function getTableQuery(): Builder
    {
        return $this->wedding->budgetItemsQuery();

        // This function only returns a Builder in the model like this:
        // public function budgetItemsQuery(): Builder
        // {
        //    return Item::where('budget_id', $this->budget->id);
        // }
    }

    protected function getTableColumns(): array 
    {
        return [
            TextColumn::make('title'),
            TextColumn::make('value'),
        ];
    }

    protected function getTableActions(): array
    {
        return [
            Action::make('edit')
                ->color('warning')
                ->icon('heroicon-o-pencil')
                ->action(function () {
                    return $this->emit('openModal', 'item.edit');
                })
        ];
    }
}

The emit function should open another Livewire component:

use LivewireUI\Modal\ModalComponent;

class Edit extends ModalComponent
{
    public function render()
    {
        return view('livewire.item.edit'); // Only contains a div with some text so far.
    }
}

use LivewireUI\Modal\ModalComponent;

class Edit extends ModalComponent
{
    public function render()
    {
        return view('livewire.item.edit'); // Only contains a div with some text so far.
    }
}

When I click on the Action, I have an error pointing on the variable in the

getTableQuery()

getTableQuery()

function:

Typed property $wedding must not be accessed before initialization

Typed property $wedding must not be accessed before initialization

Tried to replace the code in the function to:

return Item::query();

return Item::query();

and the modal works fine, but I need to filter for the appropriate Items. What am I missing? Any other improvements, that I can make? Thanks

7 replies

Gaming

Programming