Vinny Posts - Answer Overflow

Vinny

•Created by Vinny on 8/31/2023 in #❓┊help

Prevent select option re-rendering in SelectInput

Hi, I am using a SelectInput that looks something like this

Select::make('test')->options(Post::query()->get()->pluck('id, title')

Select::make('test')->options(Post::query()->get()->pluck('id, title')

I am using this in a Wizard and my problem is that I have about 6-7 selects that rely on DB queries. This causes issues anytime I go between pages in the Wizard and the form ends up becoming very slow because it runs the DB query for the select options if there is any kind of validation, live state update, or change in wizard step. I would like to make it so that I only have to query the DB once for the select options, on page load. I could store the select options in public variable on the Form and call the query only once, in the mount method, and passing the variable as the options parameter in the selects. but I was wondering if there was a different way to do this where I could tell the Select component to not re-run the options query after the initial page load.

4 replies

FFilament

•Created by Vinny on 8/25/2023 in #❓┊help

Is it possible to create a TextInput component with a prefix that is a SelectInput?

24 replies

FFilament

•Created by Vinny on 8/17/2023 in #❓┊help

Table search spinner never stops loading

I am using table builder with a few searchable columns. Whenever I enter a search and clear it, the search spinner loads forever even if the search itself finishes executing. I have included a video of the problem below. This is how my component looks like:

class Search extends Component implements HasTable, HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;

    #[Url]
    public $tableSearch = '';

    protected $queryString = [
        'tableSearch' => ['except' => '', 'as' => 'search'],
    ];

    public function table(Table $table): Table
    {
        return $table
            ->query(User::query())
            ->columns([
                TextColumn::make('id')->searchable(),
            ])
            ->recordUrl(
                fn (User $user): string => route('admin.users.show', ['user' => $user])
            );
    }

    public function render()
    {
        return view('livewire.users.search');
    }
}

class Search extends Component implements HasTable, HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;

    #[Url]
    public $tableSearch = '';

    protected $queryString = [
        'tableSearch' => ['except' => '', 'as' => 'search'],
    ];

    public function table(Table $table): Table
    {
        return $table
            ->query(User::query())
            ->columns([
                TextColumn::make('id')->searchable(),
            ])
            ->recordUrl(
                fn (User $user): string => route('admin.users.show', ['user' => $user])
            );
    }

    public function render()
    {
        return view('livewire.users.search');
    }
}

There are no console or server errors occurring.

2 replies

FFilament

•Created by Vinny on 8/14/2023 in #❓┊help

Table Builder + Scout: Search Result Order

Currently, if I use https://filamentphp.com/docs/3.x/tables/advanced#searching-records-with-laravel-scout to integrate table builder with scout, the search results are ordered by the id number of the record, meaning that the most relevant search result is often not at the top because it has a larger id value. I want the search results in the table builder to be ordered by order that scout returns. What would be the best way to approach this? For reference: this is the query that table builder tries to execute. When the search bar is filled, I don't want the results to be ordered by id, but by the order that scout returns.

SELECT
  *
FROM
  [ table ]
WHERE
  [ id ] IN (
    ...
  )
ORDER BY
  [ table ].[ id ] ASC OFFSET 10 ROWS FETCH next 10 ROWS ONLY

SELECT
  *
FROM
  [ table ]
WHERE
  [ id ] IN (
    ...
  )
ORDER BY
  [ table ].[ id ] ASC OFFSET 10 ROWS FETCH next 10 ROWS ONLY

11 replies

FFilament

•Created by Vinny on 8/8/2023 in #❓┊help

Issues with using custom JS scripts

Hello, I am using table builder v3 and I am having 3 main problems when trying to use some custom Alpine javascript with filament. 1. If the body in my app.blade.php looks like this (below) then when I try to use the search feature on the table builder, I get no errors in the console but the animation "breaks" where the spinner on the search bar of the table spins infinitely even if the search has finished running.

<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">
{{ $slot }}
@filamentScripts
@livewireScriptConfig
@vite('resources/js/app.js')
</body>

<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">
{{ $slot }}
@filamentScripts
@livewireScriptConfig
@vite('resources/js/app.js')
</body>

2. The issue fixes itself if the body part in my app.blade.php file looks like this (below). If I do this, I get no issues with the table animations but my app.js script doesn't work correctly (eg: it cannot load $persist from alpine through livewire because the @livewireScriptConfig tag is missing). This also gives me errors in the console where it says that I have multiple instances of livewire and alpine running.

<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">
{{ $slot }}
@filamentScripts
@vite('resources/js/app.js')
</body>

<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">
{{ $slot }}
@filamentScripts
@vite('resources/js/app.js')
</body>

3. I could remove the custom script tag but then I lose all javascript functionality within my page. Here is my app.js script:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

document.addEventListener('alpine:init', () => {
    Alpine.store('sidebar', {
        isOpen: Alpine.$persist(true).as('sidebar_isOpen'),
        close() {
            this.isOpen = false;
        },
        toggle() {
            this.isOpen = !this.isOpen
        }
    })

    Alpine.store('darkMode', {
        on: Alpine.$persist(true).as('darkMode_on'),
        toggle() {
            this.on = !this.on;
        }
    })
})

Livewire.start()

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

document.addEventListener('alpine:init', () => {
    Alpine.store('sidebar', {
        isOpen: Alpine.$persist(true).as('sidebar_isOpen'),
        close() {
            this.isOpen = false;
        },
        toggle() {
            this.isOpen = !this.isOpen
        }
    })

    Alpine.store('darkMode', {
        on: Alpine.$persist(true).as('darkMode_on'),
        toggle() {
            this.on = !this.on;
        }
    })
})

Livewire.start()

6 replies

FFilament

•Created by Vinny on 4/3/2023 in #❓┊help

Is it possible to create a helper text or hint for the search bar in list view?

I want to give the users a hint on what all they can search by. It would be helpful, thank you.

7 replies

FFilament

•Created by Vinny on 3/9/2023 in #❓┊help

Is there a way to auto-scrub model attributes that aren't being used?

Hello, according to https://filamentphp.com/docs/2.x/admin/resources/security, filament automatically exposes all model attributes unless they are protected by the $visible or $hidden model attributes. These exposed attributes are accessible through the console under window.livewire Is there a way to make it so that filament automatically scrubs model attributes that aren't being used in the view/edit form? I understand that, according to the documentation, this may affect the functionality of dynamic addition/removal of form fields for the model attributes that are auto-scrubbed, but I am willing to take that trade for my use-case. Thank you.

4 replies

FFilament

•Created by Vinny on 3/9/2023 in #❓┊help

Is there a way to display no records in the list view by default and only see records when searchin?

I want to make it so that: User accesses list records page -> User sees 0 records by default -> User starts seeing records for search results once they type something in the search bar Thank you.

4 replies

Gaming

Programming