Reusable And Customizable Laravel Livewire Bootstrap Modal

example.blade.php

<div>
    <x-modals.modal>
        <x-slot:title>
            Example Modal
        </x-slot>
        <form wire:submit.prevent="store">
           
            <div class="submit-section">
                <button class="btn btn-primary submit-btn">Submit</button>
            </div>
        </form>
    </x-modals.modal>
</div>

Example.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;


class Example extends Modal
{
  
  public $exampleId, $name;

    protected $listeners = [
        'openModal',
        'hasData' => 'edit',
    ];

   
    public function edit(){
        if(!empty($this->data)){
            //do something if data has been given to the component
            if(!empty($this->data)){
              $example = ExampleModel::findOrFail(is_array($this->data) ? $this->data['model']: $this->data);
              $this->exampleId = $example->id;
              $this->name = $example->name;
          }
        }
    }

    public function update(){
       // update your model
        $example = ExampleModel::findOrFail($this->exampleId);
      
        $this->closeModal();
        $this->emit('reloadTable');
    }

    public function store(){
        // create your modal
        $this->closeModal();
        $this->emit('reloadTable');
    }
  
   public function delete(){
        $example = ExampleModel::findOrFail($this->exampleId);
        $example->delete();
        $this->emit('notify', ['message' => "Department has been deleted"]);
        $this->closeModal();
        $this->emit('reloadTable');
    }
  
  
    public function render()
    {
        return view('livewire.example');
    }
}

modal.blade.php

<div>
    <div wire:ignore.self class="modal custom-modal fade" id="reusableModal" tabindex="-1" role="dialog" aria-labelledby="reusableModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered {{$type ?? ''}}" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    @if (!empty($title))
                    <h5 class="modal-title">{{ ucwords($title) }}</h5>
                    @endif
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ $slot }}
                </div>
            </div>
        </div>
    </div>
    @push('page-scripts')
        <script>
            document.addEventListener("livewire:load", function () {
                Livewire.on('reusableModalOpened', function () {
                    $('#reusableModal').modal('show');
                });

                Livewire.on('reusableModalClosed', function () {
                    $('#reusableModal').modal('hide');
                });
            });
        </script>
    @endpush
</div>

Modal.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Modal extends Component
{

    public $isOpen = false;
    public $data;

    protected $listeners = ['openModal', 'closeModal'];

    public function openModal($data = null)
    {
        $this->data = $data;
        $this->isOpen = true;
        if(!empty($data)){
            $this->emit('hasData');
            if(is_array($this->data) && in_array('delete',$this->data)){
                $this->emit('deleteModel');
            }
        }
        $this->emit('reusableModalOpened');
    }

    public function closeModal()
    {
        $this->isOpen = false;
        $this->data = null;

        $this->emit('reusableModalClosed');
    }

}

page.blade.php

<a href="javascript:void(0)" onclick="Livewire.emit('openModal')" class="btn add-btn"><i class="fa fa-plus"></i> Open Modal</a>

<a onclick="Livewire.emit(`openModal`, '.htmlspecialchars(json_encode((['model' => $row->id]).')), ENT_QUOTES, 'UTF-8')" class="dropdown-item edit_department" href="javascript:void(0)"><i class="fa fa-pencil m-r-5"></i> Edit</a>
<a onclick="Livewire.emit(`openModal`,'.htmlspecialchars(json_encode((['model' => $row->id, 'delete' => true])), ENT_QUOTES, 'UTF-8').')" class="dropdown-item trash_" href="javascript:void(0)"><i class="fa fa-trash-o m-r-5"></i> Delete</a>

@livewire('example')