CT Comments - Answer Overflow

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

How to increase SelectFilter's dropdown width?

For anyone in the future I added the following CSS which works;

.choices__list--dropdown, .choices__list[aria-expanded] {
    word-break: break-word;
    width: max-content;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    word-break: break-word;
    width: max-content;
}

It has one issue which is that if the content in the dropdown has a large width it can expand off the screen (particularly if this is on the far right side). I'm guessing we would need something like popper to fix that issue.

3 replies

FFilament

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

BulkActions - Copy multiple rows to clipboard

hey, did you ever get this working? I am about to implement exactly the same thing

34 replies

FFilament

•Created by CT on 7/24/2024 in #❓┊help

How to add an ->orderBy() *after* all other orderBy's? Or modify query *after* query is built?

For anyone finding this in the future I came to the conclusion that there is no way to solve this in Filament, I could not find a way to hook into filament after the query is built, but before it is executed. So I solved it by extending the Eloquent Builder.

<?php

namespace App\Builders;

use Illuminate\Database\Eloquent\Builder;

class OrderedBuilder extends Builder
{
    public function get($columns = ['*'])
    {
        $this->orderBy('id', 'asc');
        return parent::get($columns);
    }
}

<?php

namespace App\Builders;

use Illuminate\Database\Eloquent\Builder;

class OrderedBuilder extends Builder
{
    public function get($columns = ['*'])
    {
        $this->orderBy('id', 'asc');
        return parent::get($columns);
    }
}

and in each specific Model that needs this behavior I added this;

    public function newEloquentBuilder($query): OrderedBuilder
    {
        return new OrderedBuilder($query);
    }

    public function newEloquentBuilder($query): OrderedBuilder
    {
        return new OrderedBuilder($query);
    }

I don't really like this solution but I could not find any better way to do it.

3 replies

FFilament

•Created by mohdaftab on 7/24/2024 in #❓┊help

Loosing a really good project because of the slowness in loading components

Sorry to interrupt/hijack but what are the exact improvements in v4 that will help with this? Is it for repeater only, or is it more general improvements to performance/loading? I remember reading something about livewire partials, is it related to that?

43 replies

FFilament

•Created by CT on 4/30/2024 in #❓┊help

Correct way to add/create a Livewire table column component?

Ok I managed to find a solution which works and gives no livewire key errors. It's kinda hacky, so if anyone can tell me the proper way it would be appreciated. What I ended up doing is keeping the TextColumn as is, then making an Action and calling that action. Like this:

                Tables\Columns\TextColumn::make('score_100')
                    ->label(__('Score 100'))
                    ->disabledClick()
                    ->state(function (Site $site) {
                        if (!$site->score_100) {
                            return null;
                        }

                        return new HtmlString(view('components.score', [
                            'siteId' => $site->id,
                            'score' => $site->score_100
                        ])->render());
                    }),

                Tables\Columns\TextColumn::make('score_100')
                    ->label(__('Score 100'))
                    ->disabledClick()
                    ->state(function (Site $site) {
                        if (!$site->score_100) {
                            return null;
                        }

                        return new HtmlString(view('components.score', [
                            'siteId' => $site->id,
                            'score' => $site->score_100
                        ])->render());
                    }),

inside components.score :

<button wire:click="mountTableAction('score-modal', '{{ $siteId }}')" class="cursor-pointer">
    {{ $score }}
</button>

<button wire:click="mountTableAction('score-modal', '{{ $siteId }}')" class="cursor-pointer">
    {{ $score }}
</button>

and finally the action like this:

Tables\Actions\Action::make('score-modal')
                    ->extraAttributes(['class' => 'hidden'])
                    ->modalContent(fn ($record): View => view(
                        'livewire.score-modal',
                        ['site' => $record],
                    ))

Tables\Actions\Action::make('score-modal')
                    ->extraAttributes(['class' => 'hidden'])
                    ->modalContent(fn ($record): View => view(
                        'livewire.score-modal',
                        ['site' => $record],
                    ))

I tried to directly call ->action('score-modal') on the TextColumn, but it would return an error saying that score-modal doesn't exist on ListSites (my filament resource).

3 replies

FFilament

•Created by adnn on 4/15/2024 in #❓┊help

Better performance?

Maybe I've misunderstood something but all the caching would just be dictated by the browser + Google's cache headers, no? From what I can see swapping to GoogleFontProvider only changes the URL you grab the font from?

class GoogleFontProvider implements Contracts\FontProvider
{
    public function getHtml(string $family, ?string $url = null): Htmlable
    {
        $family = str_replace(' ', '+', $family);
        $url ??= "https://fonts.googleapis.com/css2?family={$family}:wght@400;500;600;700&display=swap";

        return new HtmlString("
            <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
            <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
            <link href=\"{$url}\" rel=\"stylesheet\" />
        ");
    }
}

class GoogleFontProvider implements Contracts\FontProvider
{
    public function getHtml(string $family, ?string $url = null): Htmlable
    {
        $family = str_replace(' ', '+', $family);
        $url ??= "https://fonts.googleapis.com/css2?family={$family}:wght@400;500;600;700&display=swap";

        return new HtmlString("
            <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
            <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
            <link href=\"{$url}\" rel=\"stylesheet\" />
        ");
    }
}

You're still doing a request to Google always, nothing locally?

73 replies

FFilament

•Created by adnn on 4/15/2024 in #❓┊help

Better performance?

I'm quite busy for the next few days but I'll draw up a PR next week (with some proper testing regarding the different situations) and let you guys take a look and decide. If you approve great, if not, no problem 🙂

73 replies

FFilament

•Created by adnn on 4/15/2024 in #❓┊help

Better performance?

Happy to test it more in depth and report back exactly if you guys want 🙂

73 replies

FFilament

•Created by adnn on 4/15/2024 in #❓┊help

Better performance?

On the first page load yes sometimes FOUC, but on subsequent loads I've never experienced it, I believe because the swap to media=all happens before any painting has commenced.

73 replies

FFilament

•Created by adnn on 4/15/2024 in #❓┊help

Better performance?

sounds to me like a simple DNS issue... normally when timeouts are exactly 5s or 10s that's the problem, hence why switching to Google fixed it. So it's not really a Filament issue I would say. Bunny already uses font-display: swap but that only matters for the secondary request - if you can't access Bunny at all then it's irrelevant. So perhaps using the media print trick would fix this. It looks like this;

<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Nunito+Sans:[email protected]&display=swap"
    media="print"
    onload="this.media='all'" />

<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Nunito+Sans:[email protected]&display=swap"
    media="print"
    onload="this.media='all'" />

Would that be useful if I submit a PR or nah? Most of my projects I add that in anyway to speed up the first paint.

73 replies

FFilament

•Created by CT on 3/29/2024 in #❓┊help

Correct way to apply a `withCount()` and `->having()` in a SelectFilter?

Solved. For anyone else wondering in the future this was the only way I could get it working. I was unable to get ->having() working inside of ->modifyQueryUsing() alone.

                Tables\Filters\SelectFilter::make('sites_count')
                    ->label(__('# Sites'))
                    ->baseQuery(fn(Builder $query, $state) => ctype_digit($state['value']) ? $query->having('sites_count', '=', $state['value']) : $query)
                    ->modifyQueryUsing(fn(Builder $query) => $query)
                    ->options(Domain::getSitesCountAsArray()),

                Tables\Filters\SelectFilter::make('sites_count')
                    ->label(__('# Sites'))
                    ->baseQuery(fn(Builder $query, $state) => ctype_digit($state['value']) ? $query->having('sites_count', '=', $state['value']) : $query)
                    ->modifyQueryUsing(fn(Builder $query) => $query)
                    ->options(Domain::getSitesCountAsArray()),

->options() returns an array of site counts, eg [0,1,2,3] ctype_digit() was necessary because most casting doesn't play nicely with the string "0" modifyQueryUsing() is necessary to remove the where condition that filament applies by default, ie WHERE sites_count = 0

4 replies

FFilament

•Created by CT on 3/29/2024 in #❓┊help

Correct way to apply a `withCount()` and `->having()` in a SelectFilter?

bump?

4 replies

FFilament

•Created by CT on 3/19/2024 in #❓┊help

How to correctly override the table container blade view?

Solved: I was being dumb and copied the container component naming scheme by accident <x-filament-tables::container> but instead I should have kept the same naming as the file I copied, so I was overriding the wrong file (this is just a container around the component). Correct placement was resources/views/vendor/filament-tables/index.blade.php

3 replies

FFilament

•Created by [BR]Darkriders on 3/6/2024 in #❓┊help

Filament\Support\Services\RelationshipJoiner::prepareQueryForNoConstraints():

also be sure to check that the inverse of the relationship is also setup correctly, I found sometimes that is necessary

22 replies

FFilament

•Created by Lars on 3/5/2024 in #❓┊help

Update hidden fields (Relationship)

so it was pretty confusing for me to figure out what was going on, but I am also only using filament for a couple weeks now so still quite new

12 replies

FFilament

•Created by Lars on 3/5/2024 in #❓┊help

Update hidden fields (Relationship)

$set() itself "works", as in I could change the value to null, then verify and get back the same null using $get() but it simply doesn't save to the database, it would always skip any hidden fields if you get what I mean?

12 replies

FFilament

•Created by Lars on 3/5/2024 in #❓┊help

Update hidden fields (Relationship)

Funny timing, I just had a very similar issue I solved yesterday. Basically hidden or non-visible fields are not updated (even if you manually update the values with for example using $set and/or using ->dehydrated()). I solved my issue by doing this;

->actions([
                Tables\Actions\EditAction::make()
                    ->using(function (Project $project, array $data): Model {

                        // Since filament does not update hidden fields we need to first set these to null
                        $project->seo_monthly_budget_eur = null;
                        $project->seo_starts_at = null;
                        $project->seo_ends_at = null;

                        // Since filament does not update hidden fields we need to first set these to null
                        $project->sea_monthly_budget_eur = null;
                        $project->sea_starts_at = null;
                        $project->sea_ends_at = null;

                        // Since filament does not update hidden fields we need to first set these to null
                        $project->sma_monthly_budget_eur = null;
                        $project->sma_starts_at = null;
                        $project->sma_ends_at = null;

                        // and now we override them with the actual values
                        $project->update($data);

                        return $project;
                    }),
            ])

->actions([
                Tables\Actions\EditAction::make()
                    ->using(function (Project $project, array $data): Model {

                        // Since filament does not update hidden fields we need to first set these to null
                        $project->seo_monthly_budget_eur = null;
                        $project->seo_starts_at = null;
                        $project->seo_ends_at = null;

                        // Since filament does not update hidden fields we need to first set these to null
                        $project->sea_monthly_budget_eur = null;
                        $project->sea_starts_at = null;
                        $project->sea_ends_at = null;

                        // Since filament does not update hidden fields we need to first set these to null
                        $project->sma_monthly_budget_eur = null;
                        $project->sma_starts_at = null;
                        $project->sma_ends_at = null;

                        // and now we override them with the actual values
                        $project->update($data);

                        return $project;
                    }),
            ])

I'm happy to submit a PR later to the docs but I'm not even sure if this is expected behaviour or not? Is it supposed to work when using ->dehydrated(true) @Dennis Koch ? Actually, aren't all fields ->dehydrated(true) by default? There is also a ->dehydratedWhenHidden() method which I played with but was unable to get working, same behaviour

12 replies

FFilament

•Created by WEBMAS on 2/29/2024 in #❓┊help

Help me choose: Filament or Nova

I have used Nova in the past for both small and medium size projects... after the first week of using Filament I decided it's objectively much better. But as tygoegmond said you're not going to get people on a Filament server telling you to use Nova...

8 replies

FFilament

•Created by Mnemonic on 2/29/2024 in #❓┊help

Form DateTimePicker displayFormat with default native ui

I would say it's worth submitting a PR to the docs 🙂

6 replies

FFilament

•Created by Mnemonic on 2/29/2024 in #❓┊help

Form DateTimePicker displayFormat with default native ui

by coincidence I think the native one displays in the format I want, ie what i had already set in ->displayFormat()

6 replies

Gaming

Programming