Filament•9mo ago

Problem refreshing component

Hello, I have a problem with refreshing component. In my EditProfile page, I dispatch an event, but my other component in top bar not refreshing. My goal is to hide this button when profil is complete. This is what I tried.

5 Replies

yagrasdemondeOP•9mo ago

EditProfile.php

EditProfile.php

class EditProfile extends Page implements HasForms  
{  
    use Concerns\InteractsWithFormActions;  
    use InteractsWithForms;  
  
    protected static string $view = 'filament.pages.auth.edit-profile';   
  
    protected static ?string $slug = 'profil';  
  
    protected static bool $shouldRegisterNavigation = false;  
  
    public ?array $profileData = [];    
  
    public function mount(): void  
  {  
        $this->fillForms();  
    }  
  
    protected function getForms(): array  
  {  
        return [  
            'editProfileForm'  
        ];  
    }  
  
    public function editProfileForm(Form $form): Form  
  {  
        return $form  
            ->schema([  
                //Fields here 
            ])
            ->model($this->getUser())  
            ->statePath('profileData');  
    }
  
    public function updateProfile(): void  
  {  
        try {  
            $data = $this->editProfileForm->getState();  
  
            $this->handleRecordUpdate($this->getUser(), $data);  
        } catch (Halt $exception) {  
            return;  
        }  
        $title = __('app.pages.auth.edit_profile.notifications.section_information');  
  
        $this->dispatch('myevent');  //<- My event 
        $this->sendSuccessNotification($title);  
    }  
    
       protected function getUpdateProfileFormActions(): array  
  {  
        return [  
            Action::make('updateProfileAction')  
                ->label(__('filament-panels::pages/auth/edit-profile.form.actions.save.label'))  
                ->submit('editProfileForm'),  
        ];  
    }
  
    protected function fillForms(): void  
  {  
        $data = $this->getUser()->attributesToArray();  
  
        $this->editProfileForm->fill($data);  
    }
}

class EditProfile extends Page implements HasForms  
{  
    use Concerns\InteractsWithFormActions;  
    use InteractsWithForms;  
  
    protected static string $view = 'filament.pages.auth.edit-profile';   
  
    protected static ?string $slug = 'profil';  
  
    protected static bool $shouldRegisterNavigation = false;  
  
    public ?array $profileData = [];    
  
    public function mount(): void  
  {  
        $this->fillForms();  
    }  
  
    protected function getForms(): array  
  {  
        return [  
            'editProfileForm'  
        ];  
    }  
  
    public function editProfileForm(Form $form): Form  
  {  
        return $form  
            ->schema([  
                //Fields here 
            ])
            ->model($this->getUser())  
            ->statePath('profileData');  
    }
  
    public function updateProfile(): void  
  {  
        try {  
            $data = $this->editProfileForm->getState();  
  
            $this->handleRecordUpdate($this->getUser(), $data);  
        } catch (Halt $exception) {  
            return;  
        }  
        $title = __('app.pages.auth.edit_profile.notifications.section_information');  
  
        $this->dispatch('myevent');  //<- My event 
        $this->sendSuccessNotification($title);  
    }  
    
       protected function getUpdateProfileFormActions(): array  
  {  
        return [  
            Action::make('updateProfileAction')  
                ->label(__('filament-panels::pages/auth/edit-profile.form.actions.save.label'))  
                ->submit('editProfileForm'),  
        ];  
    }
  
    protected function fillForms(): void  
  {  
        $data = $this->getUser()->attributesToArray();  
  
        $this->editProfileForm->fill($data);  
    }
}

CompleteProfil.php

CompleteProfil.php

class CompleteProfil extends Component  
{  
    public bool $visible;  
  
    public string $url;  
  
    protected $listeners = [  
        'myevent' => 'render',  
    ];  
  
    public function mount(): void  
  {  
        $this->url = EditProfile::getUrl();  
        $this->visible = $this->getVisibility();  
    }  
  
    public function getVisibility(): bool  
  {  
        if (auth()->user()->extra) {  
  
            if (! auth()->user()->extra->firstname) {  
                return true;  
            }  
  
            return false;  
        }  
  
        return true;  
    }  
  
    public function render(): View  
  {  
        return view('livewire.complete-profil');  
    }  
}

class CompleteProfil extends Component  
{  
    public bool $visible;  
  
    public string $url;  
  
    protected $listeners = [  
        'myevent' => 'render',  
    ];  
  
    public function mount(): void  
  {  
        $this->url = EditProfile::getUrl();  
        $this->visible = $this->getVisibility();  
    }  
  
    public function getVisibility(): bool  
  {  
        if (auth()->user()->extra) {  
  
            if (! auth()->user()->extra->firstname) {  
                return true;  
            }  
  
            return false;  
        }  
  
        return true;  
    }  
  
    public function render(): View  
  {  
        return view('livewire.complete-profil');  
    }  
}

I show this component with this, inside my

```php
FilamentView::registerRenderHook(  
    PanelsRenderHook::GLOBAL_SEARCH_BEFORE,  
    fn (): View => view('filament.views.general.complete-profil-btn'),  
);

```php
FilamentView::registerRenderHook(  
    PanelsRenderHook::GLOBAL_SEARCH_BEFORE,  
    fn (): View => view('filament.views.general.complete-profil-btn'),  
);

and the view is

<div class="relative flex">  
    <livewire:complete-profil/>  
</div>

<div class="relative flex">  
    <livewire:complete-profil/>  
</div>

Livewire complete-profil view

Livewire complete-profil view

<div>  
    <x-filament::button  
  x-data="{{ json_encode(['visible' => $visible]) }}"  
  x-show="visible"  
  outlined  
 color="danger"  
  icon="phosphor-identification-badge"  
  labeled-from="sm"  
  href="{{ $url }}"  
  tag="a"  
  >  
        {{ __('app.widgets.complete_profil_setup.button_label') }}  
    </x-filament::button>  
</div>

<div>  
    <x-filament::button  
  x-data="{{ json_encode(['visible' => $visible]) }}"  
  x-show="visible"  
  outlined  
 color="danger"  
  icon="phosphor-identification-badge"  
  labeled-from="sm"  
  href="{{ $url }}"  
  tag="a"  
  >  
        {{ __('app.widgets.complete_profil_setup.button_label') }}  
    </x-filament::button>  
</div>

What did I miss ?

Dennis Koch•9mo ago

You probably want $refresh not render as the listener

yagrasdemondeOP•9mo ago

I also tried with

php protected $listeners = [
        'myevent' => '$refresh',
    ];

php protected $listeners = [
        'myevent' => '$refresh',
    ];

but no success

Dennis Koch•9mo ago

Hm, I am not sure then, sorry

Hurruwa•8mo ago

Hi @yagrasdemonde did you mamange to find a solution for this? Thanks in advance, im having the same probelm.. sort of... XD

Gaming

Programming

Problem refreshing component