i'm developing a laravel 8 application with livewire and in a page i've a table with users, the row of this table are clickable and each row also contains buttons for specific actions. I've this logic because if i click a row of the table i show a modal with data associated to the clicked row, but when i click the button on a row i've a shortcut to edid/delete/impersonate the specific user. If I click the line I get the modal open correctly, but when I click on the buttons for the shortcuts I would like only the click of the shortcut to be taken, while being associated with the line the modal also opens. Is it possible to separate this behavior? Do you have any suggestions?
{{-- Extends layout --}}
@extends('layout.layout2')
{{-- Content --}}
@section('content')
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>Lista degli utenti del comune di {{$idt}}</h4>
<p class="mb-0">Puoi aggiungere utenti, eliminarli, modificarli e impersonarli</p>
</div>
</div>
</div>
@if ($errors->any())
<div class="card-body">
<div class="alert alert-danger alert-dismissible fade show solid alert-rounded">
<button type="button" class="close h-100" data-dismiss="alert" aria-label="Close"><span><i
class="mdi mdi-close"></i></span>
</button>
<ul>
@foreach ($errors->all() as $error)
<li>{{ ucfirst($error) }}</li>
@endforeach
</ul>
</div>
</div>
@endif
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Collaboratori</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-responsive-sm" style="min-width: 845px">
<thead>
<tr>
<th>Username</th>
<th>Nome</th>
<th>Cognome</th>
<th>Email</th>
<th>Codice Fiscale</th>
<th>Ruolo</th>
<th>Azioni</th>
</tr>
</thead>
<livewire:table-collaboratori :idt="$idt" />
</table>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<a class="btn btn-primary" href="{{ url('tenants/' . $idt . '/users/create') }}">
<i class="bi bi-plus-circle"></i> Aggiungi Utente</a>
<a class="btn btn-secondary" href="{{ url('tenants/' . $idt) }}">Torna alla dashboard</a>
</div>
</div>
@endsection
<tbody>
@foreach ($users as $u)
<tr wire:click='openModal({{ $u->id }})'>
<td>{{ $u->username }}</td>
<td>{{ $u->nome }}</td>
<td>{{ $u->cognome }}</td>
<td>{{ $u->email }}</td>
<td>{{ $u->codicefiscale }}</td>
<td>{{ $u->ruolo == 0 ? 'Admin' : 'Collaboratore' }}</td>
<td>
<div class="d-flex">
<a href="{{ url('tenants/' . $idt . '/users/'.$u->id.'/update') }}" class="btn btn-primary shadow btn-xs sharp mr-1" >
<i class="fa fa-pencil"></i></a>
<form method="POST"
action="{{ url('tenants/' . $idt . '/users/impersonate') }}">
@csrf
<input type="hidden" value="{{ $u->id }}" name="idu">
<button type="submit" class="btn btn-success shadow btn-xs sharp">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</button>
</form>
<form method="POST" action="{{ url('tenants/' . $idt . '/users/delete') }}">
@csrf
@method('delete')
<input type="hidden" value="{{ $u->id }}" name="idu">
<button type="submit" class="btn btn-danger shadow btn-xs sharp">
<i class="fa fa-trash"></i>
</button>
</form>
</div>
<td>
</tr>
@endforeach
</tbody>
<div class="modal fade" id="UtenteLongModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Dettagli dell'utente</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere l'azione -->
<div class="basic-form">
<!-- modal popolato dallo script -->
</div>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('open', event => {
$(".modal-body").empty();
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Username</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.username+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Nome</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.nome+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Cognome</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cognome+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Email</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.email+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Codice Fiscale</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.codicefiscale+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Abilitato</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.abilitato+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Qualifica</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_qualifica+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Ruolo</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.ruolo+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Ufficio</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.ufficio+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Indirizzo</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.indirizzo+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Comune</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_comune+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Provincia</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_provincia+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">CAP</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cap+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Cellulare</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cellulare+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Telefono</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.telefono+'" /></div></div>' );
$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Fax</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.fax+'" /></div></div>' );
//$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Scrittura</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.scrittura+'" /></div></div>' );
$("#UtenteLongModal").modal('show');
})
</script>
The core functionality of the click passing through can't be avoided as far as know. Still, there are a few possible solutions:
You could add the modal open only to one or multiple fields in the table. For example the username. This way you avoiding the issues. Most people naturally select the first or name field, when clicking.
Assuming you set a flag to open the modal, you could try setting an internal flag for the action buttons being used very recently. When checking if the modal should be opened, you can test for this and skip opening.