Josh Posts - Answer Overflow

Josh

•Created by Josh on 4/23/2024 in #❓┊help

Cleaner way to do this with render hooks?

So I am wrapping a div around a greeting I am putting next to the user avatar to allow me to style things better, I have this which works but i wonder if theres a way to do it that I haven't thought of?

public function boot(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::USER_MENU_BEFORE,
            fn () => "<div>"
        );
        
        FilamentView::registerRenderHook(
            PanelsRenderHook::USER_MENU_BEFORE,
            fn () => view("filament.hooks.header-user-greeting")
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::USER_MENU_AFTER,
            fn () => "</div>"
        );
    }

public function boot(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::USER_MENU_BEFORE,
            fn () => "<div>"
        );
        
        FilamentView::registerRenderHook(
            PanelsRenderHook::USER_MENU_BEFORE,
            fn () => view("filament.hooks.header-user-greeting")
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::USER_MENU_AFTER,
            fn () => "</div>"
        );
    }

Context; Its the only way I can think to have a div around my greeting and the usermenu dropdown that filament ships with without having to publish views and edit vendor code.

3 replies

FFilament

•Created by Josh on 4/22/2024 in #❓┊help

Extend toggalbility of user-menu?

Evening! Just wondering if theres a way to extend what can triger the user-menu? At the moment clicking the avatar toggles the user menu if i have the persons name I want the whole div its in to be togglable. So at the moment its

<x-filament-panels::user-menu />

<x-filament-panels::user-menu />

I want to be able to do something like this

<div class='flex gap-2'>
                <x-filament-panels::user-menu />
                <div class='flex flex-col'>
                    <span class='text-gray-900 dark:text-gray-200'>{{ Auth()->user()->name }}</span>
                    <span class='text-gray-500 dark:text-gray-400 text-sm'>Hotel Owner</span>
                </div>
            </div>

<div class='flex gap-2'>
                <x-filament-panels::user-menu />
                <div class='flex flex-col'>
                    <span class='text-gray-900 dark:text-gray-200'>{{ Auth()->user()->name }}</span>
                    <span class='text-gray-500 dark:text-gray-400 text-sm'>Hotel Owner</span>
                </div>
            </div>

Where the whole flex flex-col div would be toggleable if that makes sense? Can't seem to find anything to do it easily without making a whole component for it which i want to avoid! 🙂 Thanks in advance!

3 replies

FFilament

•Created by Josh on 11/23/2023 in #❓┊help

Optimising Search Functionality in FilamentPHP Player Table: Seeking Feedback and Suggestions

Hi everyone! I've been working on optimising my PlayerResource table in FilamentPHP and wanted to share my approach, especially regarding the searchable method. Here's what I've implemented:

public static function table(Table $table): Table
{
    return $table
        ->columns([
            ViewColumn::make('username')
                ->label('Player')
                ->searchable(query: function (Builder $query, string $search): Builder {
                    $countryCodes = CountryEmojiHelper::getCountryCodesFromName($search);
                    return $query->where(function (Builder $subQuery) use ($search, $countryCodes) {
                        $subQuery->where('username', 'like', "%{$search}%")
                                 ->orWhere('minecraft_uuid', 'like', "%{$search}%")
                                 ->orWhereIn('country_code', $countryCodes);
                    });
                })
                ->sortable()
                ->view('admin.players.columns.username'),
            TextColumn::make('last_login_at')
                ->label('Last Login')
                ->sortable(),
        ]);
}

public static function table(Table $table): Table
{
    return $table
        ->columns([
            ViewColumn::make('username')
                ->label('Player')
                ->searchable(query: function (Builder $query, string $search): Builder {
                    $countryCodes = CountryEmojiHelper::getCountryCodesFromName($search);
                    return $query->where(function (Builder $subQuery) use ($search, $countryCodes) {
                        $subQuery->where('username', 'like', "%{$search}%")
                                 ->orWhere('minecraft_uuid', 'like', "%{$search}%")
                                 ->orWhereIn('country_code', $countryCodes);
                    });
                })
                ->sortable()
                ->view('admin.players.columns.username'),
            TextColumn::make('last_login_at')
                ->label('Last Login')
                ->sortable(),
        ]);
}

In this setup, I've focused on making the username column searchable, including searching by Minecraft UUID and country codes. The username.blade.php view also displays the player's country flag and their Minecraft UUID, which is why I chose not to include separate columns for them in the table. I'm keen to know if this is the most efficient approach or if there are better ways to handle this. Specifically, I'm curious about the use of the searchable method and its performance implications. Any feedback or suggestions would be greatly appreciated!

4 replies

FFilament

•Created by Josh on 11/20/2023 in #❓┊help

Snapshot Missing - View Column with Livewire Component

Evening! After some wisdom from you smart people! I have a table defined on my PlayerResource with a ViewColumn that had a custom view;

public static function table(Table $table): Table
    {
        return $table
            ->columns([
                ViewColumn::make('username')
                ->label('Player')
                ->searchable()
                ->sortable()
                ->view('admin.players.columns.username'),
                TextColumn::make('last_login_at')
                ->label('Last Login')
                ->sortable(),
            ]);
    }

public static function table(Table $table): Table
    {
        return $table
            ->columns([
                ViewColumn::make('username')
                ->label('Player')
                ->searchable()
                ->sortable()
                ->view('admin.players.columns.username'),
                TextColumn::make('last_login_at')
                ->label('Last Login')
                ->sortable(),
            ]);
    }

Within the custom view I am calling a Livewire Component as seen below

  @livewire('player-avatars', ['uuid' => $getRecord()->minecraft_uuid], key("player-{$getRecord()->id}"))

  @livewire('player-avatars', ['uuid' => $getRecord()->minecraft_uuid], key("player-{$getRecord()->id}"))

This is the Livewire Component content

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Helpers\MinecraftHelper;

class PlayerAvatars extends Component
{
    public $uuid;
    public $avatar;

    public function mount($uuid)
    {
        $this->uuid = $uuid;
        $this->avatar = '/storage/avatars/steve.png';
    }

    public function loadAvatar()
    {
        // Load the real avatar asynchronously
        $this->avatar = MinecraftHelper::getPlayerHead($this->uuid);
    }

    public function render()
    {
        return view('livewire.player-avatars');
    }
}

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Helpers\MinecraftHelper;

class PlayerAvatars extends Component
{
    public $uuid;
    public $avatar;

    public function mount($uuid)
    {
        $this->uuid = $uuid;
        $this->avatar = '/storage/avatars/steve.png';
    }

    public function loadAvatar()
    {
        // Load the real avatar asynchronously
        $this->avatar = MinecraftHelper::getPlayerHead($this->uuid);
    }

    public function render()
    {
        return view('livewire.player-avatars');
    }
}

<div>
    <img wire:init="loadAvatar" src="{{ $avatar }}" alt="Player Avatar" class="relative w-9 h-9 mx-3 rounded-md" width="36" height="36">
</div>

<div>
    <img wire:init="loadAvatar" src="{{ $avatar }}" alt="Player Avatar" class="relative w-9 h-9 mx-3 rounded-md" width="36" height="36">
</div>

It works perfectly for the most part however I noticed that when I have per page as all, change it down to a smaller amount like 10, go to the next page and change it back to all it will fail to get and display the avatars from the page I had just been on. I recieve the error Uncaught Snapshot Is this something im doing or a limitation in filament? After any guidance! See screen recording for demonstration 🙂

11 replies

FFilament

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

Best Approach for View Customer

8 replies

Gaming

Programming