Mohammed Ouda Comments - Answer Overflow

Livewire::make(ImportLessonMaterial::class, function($state){
                                            return [
                                                'course' => $this->record,
                                                'lesson' => $state
                                            ];
                                        })
                                        ->key('import-lesson-material-' . rand(10,100))

Livewire::make(ImportLessonMaterial::class, function($state){
                                            return [
                                                'course' => $this->record,
                                                'lesson' => $state
                                            ];
                                        })
                                        ->key('import-lesson-material-' . rand(10,100))

and it solved the mentioned issue, but still when i include my component the main submit of the entire page went unclickable, not functioning. like the attached video.

14 replies

FFilament

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

An issue in calling a Livewire component inside custom field

here is a video showing the apperance of the issue.

14 replies

FFilament

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

Issue in using custom component within Repeater

i used it here, but filament overrides these ids with other random ones. any thoughts? idk if the issue is really a duplicated IDs

<div class="flex justify-center" wire:id="{{ $lesson['id'] }}">
    <form wire:submit.prevent="create">
        <x-filament::modal
            id="import-lesson-material-modal"
            slide-over width="6xl"
            :close-by-clicking-away="false"
            :close-by-escaping="false"
        >
...rest of blade code

<div class="flex justify-center" wire:id="{{ $lesson['id'] }}">
    <form wire:submit.prevent="create">
        <x-filament::modal
            id="import-lesson-material-modal"
            slide-over width="6xl"
            :close-by-clicking-away="false"
            :close-by-escaping="false"
        >
...rest of blade code

19 replies

FFilament

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

Issue in using custom component within Repeater

Yes, it renders with each lesson. And the page has multiples.

19 replies

FFilament

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

Issue in using custom component within Repeater

I am using 3 nasted repeaters, but they are working fine. Even if i use the ImportMaterialComponent without imorting the @liveware in its blade, it works fine. I believe that the issue is somewhere in the liveware component and they way of using it inside the form.

19 replies

FFilament

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

Issue in using custom component within Repeater

I followed the docs (https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form) to do what should be done to create a liveware component, idk what i am missing here.

19 replies

FFilament

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

Issue in using custom component within Repeater

thanks for the note, updated.

19 replies

FFilament

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

Issue in using custom component within Repeater

19 replies

FFilament

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

Issue in using custom component within Repeater

and its blade livewire.import-lesson-material:

<div class="flex justify-center">
    <form wire:submit.prevent="create">
        <x-filament::modal
            id="import-lesson-material-modal"
            slide-over width="6xl"
            :close-by-clicking-away="false"
            :close-by-escaping="false"
        >
            <x-slot name="trigger">
                <x-filament::button x-on:click="isOpen = true" color="gray">
                    Add Material
                </x-filament::button>
            </x-slot>

            <x-slot name="header">
                Add new material to {{ $lesson['name'] }}
            </x-slot>

            @error('data.materials.error')
                <div style="color: #d90606; border: solid 1px; padding: 5px 15px; border-radius: 8px;">{{ $message }}</div>
            @enderror

            {{ $this->form }}

            <x-slot name="footerActions">
                <x-filament::button type="submit">
                    Import Selection
                </x-filament::button>
            </x-slot>
        </x-filament::modal>
    </form>
</div>

<div class="flex justify-center">
    <form wire:submit.prevent="create">
        <x-filament::modal
            id="import-lesson-material-modal"
            slide-over width="6xl"
            :close-by-clicking-away="false"
            :close-by-escaping="false"
        >
            <x-slot name="trigger">
                <x-filament::button x-on:click="isOpen = true" color="gray">
                    Add Material
                </x-filament::button>
            </x-slot>

            <x-slot name="header">
                Add new material to {{ $lesson['name'] }}
            </x-slot>

            @error('data.materials.error')
                <div style="color: #d90606; border: solid 1px; padding: 5px 15px; border-radius: 8px;">{{ $message }}</div>
            @enderror

            {{ $this->form }}

            <x-slot name="footerActions">
                <x-filament::button type="submit">
                    Import Selection
                </x-filament::button>
            </x-slot>
        </x-filament::modal>
    </form>
</div>

19 replies

FFilament

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

Issue in using custom component within Repeater

the liveware import-lesson-material component code:

<?php

namespace App\Livewire;

use Livewire\Component;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Grid;
use Awcodes\TableRepeater\Components\TableRepeater;
use Awcodes\TableRepeater\Header;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\View as ViewComponent;
use Filament\Notifications\Notification;
use App\Forms\Components\PaginatedSelect;
use Filament\Forms\Set;
use Filament\Forms\Get;

class ImportLessonMaterial extends Component implements HasForms
{
    use InteractsWithForms;

    public $course;

    public $lesson;

    public ?array $data = [
        'org_library_access_authorization_id' => null,
        'general_topic_id' => null,
        'special_topic_id' => null,
        'learning_object_id' => null,
        'pagination' => [
            'general_topic_id' => ['current_page' => 0, 'last_page' => 0, 'total' => 0, 'data' => [], 'search' => null],
            'special_topic_id' => ['current_page' => 0, 'last_page' => 0, 'total' => 0, 'data' => [], 'search' => null],
            'learning_object_id' => ['current_page' => 0, 'last_page' => 0, 'total' => 0, 'data' => [], 'search' => null]
        ],
        'materials' => []
    ];

    public function mount($course, $lesson): void
    {
        $this->course = $course;
        $this->lesson = $lesson;
        $this->form->fill($this->data);
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([...form components])
            ->statePath('data');
    }

    public function create(): void
    {
        ...create method logic
    }

    public function render(): View
    {
        return view('livewire.import-lesson-material');
    }
}

<?php

namespace App\Livewire;

use Livewire\Component;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Grid;
use Awcodes\TableRepeater\Components\TableRepeater;
use Awcodes\TableRepeater\Header;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\View as ViewComponent;
use Filament\Notifications\Notification;
use App\Forms\Components\PaginatedSelect;
use Filament\Forms\Set;
use Filament\Forms\Get;

class ImportLessonMaterial extends Component implements HasForms
{
    use InteractsWithForms;

    public $course;

    public $lesson;

    public ?array $data = [
        'org_library_access_authorization_id' => null,
        'general_topic_id' => null,
        'special_topic_id' => null,
        'learning_object_id' => null,
        'pagination' => [
            'general_topic_id' => ['current_page' => 0, 'last_page' => 0, 'total' => 0, 'data' => [], 'search' => null],
            'special_topic_id' => ['current_page' => 0, 'last_page' => 0, 'total' => 0, 'data' => [], 'search' => null],
            'learning_object_id' => ['current_page' => 0, 'last_page' => 0, 'total' => 0, 'data' => [], 'search' => null]
        ],
        'materials' => []
    ];

    public function mount($course, $lesson): void
    {
        $this->course = $course;
        $this->lesson = $lesson;
        $this->form->fill($this->data);
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([...form components])
            ->statePath('data');
    }

    public function create(): void
    {
        ...create method logic
    }

    public function render(): View
    {
        return view('livewire.import-lesson-material');
    }
}

19 replies

FFilament

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

Issue in using custom component within Repeater

the filament.import-lesson-material blade:

@php
    $course = $this->getRecord();
    $lesson = $getState();
@endphp

@if($course && isset($lesson['id']))
    @livewire('import-lesson-material', ['course' => $course, 'lesson' => $lesson])
@endif

@php
    $course = $this->getRecord();
    $lesson = $getState();
@endphp

@if($course && isset($lesson['id']))
    @livewire('import-lesson-material', ['course' => $course, 'lesson' => $lesson])
@endif

19 replies

FFilament

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

Issue in using custom component within Repeater

ImportLessonMaterial Component code:

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Component;

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

    public static function make(string $name): static
    {
        $static = app(static::class, ['name' => $name]);
        $static->configure();

        return $static;
    }
}

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Component;

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

    public static function make(string $name): static
    {
        $static = app(static::class, ['name' => $name]);
        $static->configure();

        return $static;
    }
}

19 replies

FFilament

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

Issue in using custom component within Repeater

The main edit page code:

use App\Forms\Components\ImportLessonMaterial;
...other imports

class ManageCourseContent extends EditRecord
{
    ...attributes and methods

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                ...other components
                Repeater::make('units')
                    ->relationship()
                    ->reorderable()
                    ->orderColumn('ordering')
                    ->schema([
                        ...other components
                        Repeater::make('lessons')
                            ->label('Unit Lessons')
                            ->relationship()
                            ->reorderable()
                            ->orderColumn('ordering')
                            ->schema([
                                Grid::make()
                                    ->schema([
                                        ...other components
                                        Repeater::make('lessonMaterials')
                                            ->relationship()
                                            ->reorderableWithButtons()
                                            ->orderColumn('ordering')
                                            ->schema([...other components])
                                            ->columnSpanFull()
                                            ->default([])
                                            ->deleteAction(fn (Action $action) => $action->requiresConfirmation())
                                            ->addable(false),
                                        ImportLessonMaterial::make('import_lesson_material')
                                            ->columnSpan('full')
                                    ]),
                            ])
                    ])
            ]);
    }

    ...other methods
}

use App\Forms\Components\ImportLessonMaterial;
...other imports

class ManageCourseContent extends EditRecord
{
    ...attributes and methods

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                ...other components
                Repeater::make('units')
                    ->relationship()
                    ->reorderable()
                    ->orderColumn('ordering')
                    ->schema([
                        ...other components
                        Repeater::make('lessons')
                            ->label('Unit Lessons')
                            ->relationship()
                            ->reorderable()
                            ->orderColumn('ordering')
                            ->schema([
                                Grid::make()
                                    ->schema([
                                        ...other components
                                        Repeater::make('lessonMaterials')
                                            ->relationship()
                                            ->reorderableWithButtons()
                                            ->orderColumn('ordering')
                                            ->schema([...other components])
                                            ->columnSpanFull()
                                            ->default([])
                                            ->deleteAction(fn (Action $action) => $action->requiresConfirmation())
                                            ->addable(false),
                                        ImportLessonMaterial::make('import_lesson_material')
                                            ->columnSpan('full')
                                    ]),
                            ])
                    ])
            ]);
    }

    ...other methods
}

19 replies

FFilament

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

Select Component Lazy Loading though API

my issue currently, is a dubplicated IDs as i see from the console

26 replies

FFilament

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

Select Component Lazy Loading though API

@Leandro Ferreira, my structure is in an EditRecord page > has a Repeater > uses ImportLessonMaterial extends Filament\Forms\Components\Component > in its view > I call liveware component which is a button that opens a modal. does this structure has an issue?

26 replies

FFilament

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

Select Component Lazy Loading though API

26 replies

FFilament

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

Select Component Lazy Loading though API

26 replies

Gaming

Programming