Improvement : url/Routes create, show & edit

Hello,

Do you plan to have any implementation of show, create & edit routes ? Today, when we click on "read" or "edit" it's a javascript-button . If we refresh the page, we loose the popup (going back to the main page). Could be useful to:

when we click, the url is changing (History.pushState())
when we refresh the page (or we point directly to /model/3/read), the corresponding modal is opened again

Right now, I did something like that:

class Index extends Component
{
    public $entity;
    public $action;

    public function route()
    {
        return Route::get('member/tn-members/{entity?}/{action?}', static::class)
            ->name('member.tn-members')
            ->middleware('auth');
    }

    public function loaded() {
        if( $this->entity->exists ) {
            switch($this->action) {
                case 'show':
                    $this->emit('showModal', 'member.tn-members.read', $this->entity->id);
                    break;

                case 'edit':
                    $this->emit('showModal', 'member.tn-members.save', $this->entity->id);
                    break;

                case 'create':
                    $this->emit('showModal', 'member.tn-members.save');
                    break;
            }
        }
    }

    public function mount($entity = null, $action = 'show') {
        $this->entity = TnMember::findOrNew($entity);
        $this->action = $action;
    }
    // [...]
}

And the view:

@section('title', __('Tn Members'))
<div wire:init="loaded">

Creating two optional parameters /{entity?}/{action?}
Storing the two parameters
Creating a wire:init + the method associated
Emit showModal depending of the parameters

(I also tried with addEventListener('contentChanged') but we still need the wire:init)

Now, when I use the url the modal are automatically opening (like trello cards)

There is maybe another way to do it :)

For the other point (History.pushState), it's another story. I don't know if the best is to change a little bit the emit parameters ? pass the route directly ? add extra parameter like data-href ?

wire:click="$emit('showModal', 'member.tn-members.read', route('member.tn-members', ['entity' => $tnMember->id, 'action' => 'show']), {{ $tnMember->id }})"

<x-bs::button icon="eye" :title="__('Read')" color="outline-primary" size="sm"
  data-href="{{ route('member.tn-members', ['entity' => $tnMember->id, 'action' => 'show']) }}"
  wire:click="$emit('showModal', 'member.tn-members.read', $event.target.getAttribute('data-href'), {{ $tnMember->id }})"/>

or manipulate via Modals::showModal, but need to handle create(=save & no id)/edit(=save & id)/show(=read) or let the Read/Save component handle the route event and raise an $emit('changeUrl') ?

(Interesting article with potential solution about the changeUrl event: https://github.com/livewire/livewire/issues/399)

bastinald / laravel-livewire-modals

Improvement : url/Routes create, show & edit #4