How to edit record using modal on the custom page?

Hello, I have a TaskResource with a custom page inside that called ScheduleTask.

// TaskResource.php
public static function getPages(): array
{
    return [
        'index' => Pages\ScheduleTask::route('/schedule'),
    ];
}

// TaskResource.php
public static function getPages(): array
{
    return [
        'index' => Pages\ScheduleTask::route('/schedule'),
    ];
}

Currently I can trigger a New Task Modal using getActions() function in the ScheduleTask page.

protected function getActions(): array
{
    return [
        Action::make('new_task')
            ->action(function (array $data): void {
                ...
            })
            ->form([
                ...
            ]),
    ];
}

protected function getActions(): array
{
    return [
        Action::make('new_task')
            ->action(function (array $data): void {
                ...
            })
            ->form([
                ...
            ]),
    ];
}

how can I trigger the edit modal with the form filled with the selected task when I click the individual task?

3 Replies

Dan Harrin•2y ago

Unfortunately that is not easy in v2, it will be in v3 you will need to create your own modal in the view and embed our form builder within it. you will need livewire and alpine knowledge

AnsoriOP•2y ago

I tried this approach right now, Currently, I have implemented HasForms trait on ScheduleTask page

class ScheduleTask extends Page implements HasForms
{
    use InteractsWithForms;

    public $user_id = null;
    public $name = null;
    public $description = null;
    public $start_date = null;
    public $end_date = null;
    public $color = null;
}

class ScheduleTask extends Page implements HasForms
{
    use InteractsWithForms;

    public $user_id = null;
    public $name = null;
    public $description = null;
    public $start_date = null;
    public $end_date = null;
    public $color = null;
}

and I render the form below the calendar

<div wire:ignore class="bg-white rounded-xl shadow overflow-hidden">
    <div id="gstc"></div>
</div>

{{ $this->form }}

<div wire:ignore class="bg-white rounded-xl shadow overflow-hidden">
    <div id="gstc"></div>
</div>

{{ $this->form }}

I have also enabled the form to be filled when a task item is clicked. Now, I am looking for a way to show and hide the form using a modal. I have tried wrapping the form using x-filament::modal, but I am unsure how to toggle the visibility of the modal.

<x-filament::modal>
    {{ $this->form }}
</x-filament::modal>

<x-filament::modal>
    {{ $this->form }}
</x-filament::modal>

toeknee•2y ago

add:

public $displayForm = false;

public function displayForm($state = true) { return $state;}

public $displayForm = false;

public function displayForm($state = true) { return $state;}

` Then in the page view wrap the modal display in: @if($displayForm) <Modal code here> @endif

Gaming

Programming

How to edit record using modal on the custom page?