I have this code in resources/views/components/modal.blade.php.
@props([
'name',
'show' => false,
'maxWidth' => '2xl'])
@php
$maxWidth = [
'sm' => 'sm:max-w-sm',
'md' => 'sm:max-w-md',
'lg' => 'sm:max-w-lg',
'xl' => 'sm:max-w-xl',
'2xl' => 'sm:max-w-2xl',
][$maxWidth];
@endphp
<div
x-data="{
show: @js($show),
focusables() {
// All focusable element types...
let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
return [...$el.querySelectorAll(selector)]
// All non-disabled elements...
.filter(el => ! el.hasAttribute('disabled'))
},
firstFocusable() { return this.focusables()[0] },
lastFocusable() { return this.focusables().slice(-1)[0] },
nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
}"
x-init="$watch('show', value => {
if (value) {
document.body.classList.add('overflow-y-hidden');
{{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
} else {
document.body.classList.remove('overflow-y-hidden');
}
})"
x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
x-on:close.stop="show = false"
x-on:keydown.escape.window="show = false"
x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
x-show="show"
class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
style="display: {{ $show ? 'block' : 'none' }};"
>
<div
x-show="show"
class="fixed inset-0 transform transition-all"
x-on:click="show = false"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
>
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div
x-show="show"
class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
{{ $slot }}
</div>
</div>
I try to learn but I dont know js. and dont understand how it works. I know I need to send a name in the code who will open the modal but i don't know how to open it, and i can't find information to open, even I tried a few AI and no one could gave me the code to open the modal to confirm delete a client in the database, this is my last resource to find the solution, please. here I give you my resources/views/clients/index.blade.php is where i want to put the delete button that will open the modal. Thank you all in advance.
<!-- Delete client modal -->
<x-modal name="'deleteClientModal' . $show => 'true'">
<form method="POST" :action="route('clients.destroy', $clientToDelete ?? '')">
@csrf
@method('DELETE')
<div class="px-6 py-4">
<p class="text-lg text-gray-800">Are you sure you want to delete this client?</p>
</div>
<div class="px-6 py-4 bg-gray-100 text-right">
<button type="button" class="inline-flex items-center px-4 py-2 bg-red-500 border border-transparent rounded-md font-semibold text-white text-sm tracking-widest hover:bg-red-600 active:bg-red-900 focus:outline-none focus:border-red-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150 mr-2" x-on:click="show = false">
Cancel
</button>
<button type="submit" class="inline-flex items-center px-4 py-2 bg-green-500 border border-transparent rounded-md font-semibold text-white text-sm tracking-widest hover:bg-green-600 active:bg-green-900 focus:outline-none focus:border-green-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150" :disabled="formIsSubmitting">
{{ __('Delete') }}
</button>
</div>
</form>
</x-modal>
<!-- content layouts/app $slot -->
<x-app-layout>
<!-- tags -->
<x-slot name="header">
<div class="flex">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Clientes') }}
<x-nav-link :href="route('clients.create')" :active="request()->routeIs('clients.create')" class="ml-10" >
{{ __('Nuevo') }}
`your text`
</x-nav-link>`your text`
</h2>
</div>
<!-- alert success -->
@if(session('success'))
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">¡Éxito!</strong>
<span class="block sm:inline">{{session('success')}}.</span>
</div>
@endif
<!-- alert error -->
@if(session('error'))
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">¡Éxito!</strong>
<span class="block sm:inline">{{session('error')}}.</span>
</div>
@endif
</x-slot>
<!-- pagination -->
<div class="bg-blue-200 px-8">
{{ $clients->links() }}
</div>
<!-- list of clients -->
@foreach ($clients as $client)
<div class="py-5">
<div class="max-w-6xl mx-auto sm:px-2 lg:px-4 ">
<div class="h-max bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<!-- client data -->
<div class="grid md:grid-cols-8 gap 10 ">
<span class="md:mt-5 mr-3 p-3 border border-black rounded-lg col-span-4 ">
<!-- butons update and delete-->
<div >
<div class="grid grid-cols-2 gap-4 float-right">
<a href="{{ route('clients.edit', $client->client_id) }}" >
<button>
<img class="w-5" src="{{ asset('images/icons/update.svg') }}" alt="Icon">
</button>
</a>
<img class="w-5" src="{{ asset('images/icons/delete.svg') }}" alt="Icon">
</div>
</div>
<span class="text-2xl underline underline-offset-2">
{{$client->client_name}}
</span>
<br>
{{$client->client_ident}}
<br>
{{($client->client_street).(' , ').($client->client_pc).( ' , ').($client->client_city).( ' , ').($client->client_country)}}
<br>
{{($client->client_telephone). (' , ') .($client->client_email)}}
<hr class="border bottom-1 border-black ">
{{$client->client_comments}}
</span>
<!-- boats -->
<span class="mt-5 mr-3 p-3 border border-black rounded-lg col-span-4">
@if($client->boats->isNotEmpty())
<!-- butons update and delete-->
<div >
<div class="grid grid-cols-2 gap-4 float-right">
<a href="{{ route('boats.edit', $client->client_id) }}" >
<button>
<img class="w-5" src="{{ asset('images/icons/update.svg') }}" alt="Icon">
</button>
[tag:tag-name] </a>
<button >
<img class="w-5" src="{{ asset('images/icons/delete.svg') }}" alt="Icon">
</button>
</div>
</div>
@foreach($client->boats as $boat)
<span class="text-2xl underline underline-offset-2">
{{ $boat->boat_name }}
</span>
<br>
<br>
{{ 'puerto: '. $boat->boat_marina }}
<br>
{{ 'tipo de barco: '. $boat->boat_type}}
<hr class="border bottom-1 border-black ">
{{ $boat->boat_comments}}
@endforeach
@else
<p>No tiene barco</p>
<a href="{{ route('boats.create', ['client_id' => $client->client_id]) }}">Agregar barco</a>
@endif
</span>
</div>
<!-- projects of the boat -->
<div class="mt-5 border border-black rounded-lg mr-3 p-3">
<!-- butons update and delete-->
<div class="grid grid-cols-2 gap-4 float-right">
<a href="{{ route('clients.edit', $client->client_id) }}" >
<button>
<img class="w-5" src="{{ asset('images/icons/update.svg') }}" alt="Icon">
</button>
</a>
<button>
<img class="w-5" src="{{ asset('images/icons/delete.svg') }}" alt="Icon">
</button>
</div>
<span class="text-2xl underline underline-offset-2">
Proyectos
</span>
</div>
</div>
</div>
</div>
</div>
@endforeach
<script>
window.addEventListener('open-modal', event => {
if (event.detail === 'deleteClientModal') {
window.deleteClientModal = true;
}
});
</script>
</x-app-layout>
I try to learn but I dont know js. and dont understand how it works. I know I need to send a name in the code who will open the modal but i don't know how to open it, and i can't find information to open, even I tried a few AI and no one could gave me the code to open the modal to confirm delete a client in the database, this is my last resource to find the solution, please.
You need to emit an event named open-modal and pass the name of your modal. You will do that via the $dispatch method.
Reading through the source of the modal component, you can see that it is listening for an event named open-modal.
<div ...
x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
From that line of code above, we can also derive that it is expecting the $name of the component to be passed in from the event. If the name matches, then it will set the show property to true.
So the final code to render a modal is below. Make sure that the name of the modal, ex. "register", matches the data in the event.
<button
type="button"
@click="$dispatch('open-modal', 'register')">Register now!
</button>
<x-modal name="register">
<!-- registration form... -->
</x-modal>