Refresh Modal form on Custom component
Hey Everyone,
I have a custom component on the left which one is shown by Render hooks. That works.
I click on one of the avatars, it shows a modal. On the modal I want to create ToggleButtons based on which avatar i choose, but it doesn't work. (Customer - Projects 1-n relation)
After i choose the avatar and store the data in $this->projects, the form doesn't refill.
If a remove #[Renderless] it still doesn't work. It's needed because without it livewire throw snapshot error.
CustomerSwithcer Livewire component:
class CustomerSwitcher extends Component implements HasSchemas
{
use InteractsWithSchemas;
public $customers;
public $projects;
public $selectedProjectId;
public function mount()
{
$this->customers = Auth::user()->customers()->pluck('name', 'customer_id');
}
#[Renderless]
public function openProjectModal($id)
{
$this->selectedProjectId = $id;
$customer = Customer::with('projects')->find($id);
$this->projects = $customer->projects
->mapWithKeys(fn($p) => [
$p->id => $p->name . ' - ' . $p->part_number
])
->toArray();
$this->dispatch('open-modal', id: 'select-project'); } public function form(Schema $schema): Schema { return $schema ->components([ ToggleButtons::make('selectedProjectId') ->label('Projects') ->reactive() ->options(fn () => $this->projects) ]); } public function render(): View { return view('filament.components.customer-switcher'); } } Thanks in advance!
$this->dispatch('open-modal', id: 'select-project'); } public function form(Schema $schema): Schema { return $schema ->components([ ToggleButtons::make('selectedProjectId') ->label('Projects') ->reactive() ->options(fn () => $this->projects) ]); } public function render(): View { return view('filament.components.customer-switcher'); } } Thanks in advance!
4 Replies
Okay I'm totally lost. After I close the modal it gives me errors and I can't open modal until I refresh the page
@auth
<div class="fixed inset-y-0 start-0 w-16 flex flex-col items-center h-[calc(100vh-6px)] top-16 content-center bg-white shadow-xs border-r border-gray-950/5 dark:bg-gray-900 dark:border-white/10">
<div class="mt-4">
@foreach ($customers as $id => $customer)
{{ ($this->chooseProject)(['customer_id' => $id, 'customer_name' => $customer])}}
@endforeach
<x-filament-actions::modals />
</div>
</div>
@endauth
<?php
namespace App\Livewire;
use Livewire\Component;
use Filament\Actions\Action;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Facades\Auth;
use Filament\Forms\Components\Select;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
class CustomerSwitcher extends Component implements HasActions, HasSchemas
{
use InteractsWithActions;
use InteractsWithSchemas;
public $customers;
public function mount()
{
$this->customers = Auth::user()->customers()->pluck('name', 'customer_id');
}
public function chooseProjectAction(): Action
{
return Action::make('chooseProject')
->schema([
Select::make('project_id')
->label('Projekt')
->options([1,2,3] )
->required()
])
->action(function (array $data) {
$user = Auth::user();
$user->current_project_id = $data['project_id'];
$user->save();
});
}
public function render(): View
{
return view('filament.choose-project.customer-switcher');
}
}
Okay, i got it. Remove the @auth and everything works.
What is the issue with auth()?