Mohammed Ouda Posts - Answer Overflow

Mohammed Ouda

•Created by Mohammed Ouda on 8/22/2024 in #❓┊help

An issue in calling a Livewire component inside custom field

I am trying to Call a liveware component inside a Filament custom component. but I get in browser console: livewire.js?id=cc800bf4:4493 Uncaught Snapshot missing on Livewire component with id: tKy6aA8eZYpGT01wuW8h the custom Field:

use Filament\Forms\Components\Field;

class ImportLessonMaterial extends Field
{
    protected string $view = 'filament.import-lesson-material';
}

use Filament\Forms\Components\Field;

class ImportLessonMaterial extends Field
{
    protected string $view = 'filament.import-lesson-material';
}

the view filament.import-lesson-material blade:

@livewire('create-post')

@livewire('create-post')

the liveware component:

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}

the view livewire.create-post blade:

<div>
    here we go...
</div>

<div>
    here we go...
</div>

the custom field usage inside filament EditPage:

ImportLessonMaterial::make('import_lesson_material')->columnSpan('full')

ImportLessonMaterial::make('import_lesson_material')->columnSpan('full')

To be noted: - I followed (https://filamentphp.com/docs/3.x/forms/fields/custom) to create a custom field. - I followed (https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form) to create a liveware component. - this is a simplified description of my main issue that I already posted before (https://discord.com/channels/883083792112300104/1275799281592303697)

14 replies

FFilament

•Created by Mohammed Ouda on 8/21/2024 in #❓┊help

Issue in using custom component within Repeater

* I created a custom page to manage Course content which extends Filament\Resources\Pages\EditRecord. * Also, I created a custom component called ImportLessonMaterial which extends Filament\Forms\Components\Component * in it's view filament/import-lesson-material.blade.php I call a liveware component called ImportLessonMaterial which extends Livewire\Component The component itself works fine, but when i try to add new unit, or new lesson in the main page I face an issue that says Uncaught Snapshot missing on Livewire component with id: 7VKNgVgSmdefeGmnuDl9 It goes if I remove the custom component from the schema, I'll attach all the related code in this thread. Thanks!!

19 replies

FFilament

•Created by Mohammed Ouda on 8/14/2024 in #❓┊help

Select Component Lazy Loading though API

I use external API as the source of options for my select component. Is there anyway to make it support the pagination of the api? which means load more data once the user scrolled to the end of shown records? either by auto calling the api and pass param page=1/2/3.. or the user click on show more button or smth' similar? My current code: here is how i use the component:

Select::make('general_topic_id')
                            ->label('General topic')
                            ->searchable()
                            ->options(fn ($get) => $this->getGeneralTopicOptions($get, null))
                            ->getSearchResultsUsing(fn ($get, string $search) => $this->getGeneralTopicOptions($get, $search))
                            ->disabled(fn ($get) => !$get('org_library_access_authorization_id'))
                            ->reactive()
                            ->placeholder('Select a general topic'),

and here is my getGeneralTopicOptions method:

private function getGeneralTopicOptions($get, $search): array
    {
        $orgLibraryAccessAuthorizationId = $get('org_library_access_authorization_id');
                        
        if (empty($orgLibraryAccessAuthorizationId)) {
            return [];
        }

        $generalTopics = ReferenceCurriculumService::getGeneralTopics($orgLibraryAccessAuthorizationId, $this->course->subject_code, $search);

        return collect($generalTopics)->mapWithKeys(function ($topic) {
            return [$topic['id'] => $topic['name']];
        })->toArray();
    }

26 replies

Gaming

Programming