Filament•5d ago

How have EditPage works both as modal and a page

I have this edit page, i do not want to comment the edit route in resource because i need it somewhere, but somehow in my custom livewire page i want also open this edit page as modal when click a button, instead of makeing a new livewire page with modal, how can i open the native edit page modal of filament?

14 Replies

zydnrbrn•5d ago

how about creating modal form with same field from EditPage or your resource?

Cristina•5d ago

Thanks for your suggestion, in fact i did it in that way, but it is annoying to handle some relationship and some filed, and also i have to manage the save/delete/cancel actions, i think it is just a waste not to use the native filament edit modal

zydnrbrn•5d ago

im agree with you, how about create a new livewire component, let say that is a form that can handle creating or edit? and then call that on the modal or if you feel anoyying handling the relationship, have you been try relation manager? i think it will be helpful for you

Cristina•5d ago

I would like to have something like $this->dispatch('open-modal', 'edit-user', ['userId'=>1]); just to open the filament edit user modal, i guess there should be something like this😂

zydnrbrn•5d ago

okayy i got it, and then you will call that edit modal in other page/resource with native filament modal right? but you don't want to define the form field again?

Cristina•5d ago

Yes!!!You got me now, i just want to use the same edit page as i have already, but in somewhere i want to call it and show it as modal

zydnrbrn•5d ago

has you been try static function for defining the form like this?

public static function getUserSchema(): array
{
  return [
    Forms\Components\TextInput::make('username)
        ->required,
  ];
}

public static function getUserSchema(): array
{
  return [
    Forms\Components\TextInput::make('username)
        ->required,
  ];
}

and then you call that on form() function on the resource and call in the modal form too but yeah the relationship will working as the Model defined correctly as like the resource that working on me, the example code is like this:

 public static function getFormBannerSchema(): array
    {
        return [
            Forms\Components\Select::make('parent_id')
                ->label('Parent Category')
                ->options(BannerCategory::all()->pluck('name', 'id'))
                ->searchable()
                ->nullable()
                ->columnSpan('full'),

            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255)
                ->live(onBlur: true)
                ->afterStateUpdated(fn(string $operation, $state, Forms\Set $set) => $operation === 'create' ? $set('slug', Str::slug($state)) : null),

            Forms\Components\TextInput::make('slug')
                ->disabled()
                ->dehydrated()
                ->required()
                ->maxLength(255)
                ->unique(BannerCategory::class, 'slug', ignoreRecord: true),

            Forms\Components\MarkdownEditor::make('description')
                ->columnSpan('full'),

            Forms\Components\Toggle::make('is_active')
                ->default(true),
        ];
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema(
                self::getFormBannerSchema()
            );
    }

 public static function getFormBannerSchema(): array
    {
        return [
            Forms\Components\Select::make('parent_id')
                ->label('Parent Category')
                ->options(BannerCategory::all()->pluck('name', 'id'))
                ->searchable()
                ->nullable()
                ->columnSpan('full'),

            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255)
                ->live(onBlur: true)
                ->afterStateUpdated(fn(string $operation, $state, Forms\Set $set) => $operation === 'create' ? $set('slug', Str::slug($state)) : null),

            Forms\Components\TextInput::make('slug')
                ->disabled()
                ->dehydrated()
                ->required()
                ->maxLength(255)
                ->unique(BannerCategory::class, 'slug', ignoreRecord: true),

            Forms\Components\MarkdownEditor::make('description')
                ->columnSpan('full'),

            Forms\Components\Toggle::make('is_active')
                ->default(true),
        ];
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema(
                self::getFormBannerSchema()
            );
    }

zydnrbrn•5d ago

sorry wrong pict

Cristina•5d ago

In my livewire page, i do reuse the form of that resource and it works, but i have to manage the save delete ect ...

zydnrbrn•4d ago

yeahh sometime we can't totally implement reusable code on filament... as far as i know, but i think small effort for other necessary actions is doesn't matter to our target features right?

ChesterS•4d ago

This is how I did it. It's ugly, but it works...

Tables\Actions\Action::make('editSomething')
    ->label(__('Edit'))
    ->modalContent(function ($record): Htmlable {
        $component = EditSomething::class;

        return new HtmlString(Blade::render(<<<VIEW
                @livewire($component::class, [
                    'record' => $record->id,
                    'lazy' => true,
                    'isModalResource' => true,
                ])
            VIEW
        ));
    })
    // None of the things below are required, but you probably want them
    ->modal()
    ->modalWidth(MaxWidth::Full)
    ->stickyModalHeader()
    ->modalSubmitAction(false)
    ->closeModalByClickingAway(false)
    ->modalCancelAction(false)
,

Tables\Actions\Action::make('editSomething')
    ->label(__('Edit'))
    ->modalContent(function ($record): Htmlable {
        $component = EditSomething::class;

        return new HtmlString(Blade::render(<<<VIEW
                @livewire($component::class, [
                    'record' => $record->id,
                    'lazy' => true,
                    'isModalResource' => true,
                ])
            VIEW
        ));
    })
    // None of the things below are required, but you probably want them
    ->modal()
    ->modalWidth(MaxWidth::Full)
    ->stickyModalHeader()
    ->modalSubmitAction(false)
    ->closeModalByClickingAway(false)
    ->modalCancelAction(false)
,

If you need that a lot, you can probably extract some of it to macros isModalResource is just a trait I add to some of them that hides things like breadcrumbs etc A problem I found is that if you create something using that form, it doesn't close the modal, it takes you to the edit page. Anyway, try it out. Hope it helps, let me know if you find a better way to do it

Cristina•2d ago

Thanks a lot, i will try it

CodeWithDennis•2d ago

Maybe you can find something useful in this code.

Tables\Actions\Action::make('quickEdit')
    ->fillForm(fn(Company $record) => $record->toArray())
    ->form(fn(Form $form) => CompanyResource::form($form))
    ->action(fn(Company $record, array $data) => $record->update($data))

Tables\Actions\Action::make('quickEdit')
    ->fillForm(fn(Company $record) => $record->toArray())
    ->form(fn(Form $form) => CompanyResource::form($form))
    ->action(fn(Company $record, array $data) => $record->update($data))

Cristina•2d ago

Interesting, i will use it somewhere for sure

Gaming

Programming

How have EditPage works both as modal and a page