Unable to open edit modal

derricksmith commented 3 years ago

I followed your demo project @ https://github.com/Power-Components/powergrid-demo but cannot use the edit action with a modal popup. The modal does not show. No console error is generated and the network request completes but shows no html. The table otherwise displays correctly and sorting works.

Edit Button Click Action

This is the actions method in DatasourceTable.php

public function actions(): array
    {
       return [
           Button::add('edit')
               ->caption(__('Edit'))
               ->class('btn btn-primary')
               ->openModal('datasource-edit', ['datasource_id' => 'id'])
        ];
    }

This is DatasourceEdit.php component

class DatasourceEdit extends ModalComponent
{

    public int $datasource_id;

    public function render()
    {    
        return view('livewire.datasource-edit');
    }
}

This is the datasource-edit.blade.php view

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Datasource ID: {{ $datasource_id }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" wire:click="$emit('closeModal')">Close</button>
      </div>
    </div>
  </div>
</div>

This is the main page welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

        @livewireStyles
        @powerGridStyles
    </head>
    <body class="antialiased">

        <div class="container">
            <livewire:datasource-table/>
        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
        @livewireScripts
        @powerGridScripts
        @livewire('livewire-ui-modal')
        @livewireUIScripts
    </body>
</html>

luanfreitasdev commented 3 years ago

Hi, @derricksmith

Please, if the @livewireUIScripts directive was loaded correctly, you can do so by inspecting the page and it should have a livewire div with something like this: x-data="LivewireUiModal()" if not by please run composer dump-autoload

I redid your example and the calls are correct.

Please notify me in case of success or error.

luanfreitasdev commented 3 years ago

Another note, when you inspect the button element does something like this appear?

If yes, can you send me a print?

derricksmith commented 3 years ago

I see the x-data. The button has the emit but interestingly it is not receiving the classes ('btn btn-primary') I supplied in the component. Screenshots attached.

2021-06-03 14_58_26-Laravel — Mozilla Firefox 2021-06-03 14_57_10-Laravel — Mozilla Firefox

luanfreitasdev commented 3 years ago

Hi

I checked here and I really believe that modal at the moment won't work with bootstrap. But in the next versions it may come.

Meanwhile fix the class in the button and paging in version 1.1.2

luanfreitasdev commented 3 years ago

Unfortunately we have no plans to create a modal component for bootstrap, but this could be possible using the ->emit() method and calling a livewire event for any component.

See method Event listeners

Power-Components / livewire-powergrid

Unable to open edit modal #24