Laravel 8 и livewire - отдельные элементы в строке таблицы

Я разрабатываю приложение laravel 8 с livewire, и на странице у меня есть таблица с пользователями, строка этой таблицы интерактивна, и каждая строка также содержит кнопки для определенных действий. У меня есть такая логика, потому что, если я нажимаю строку таблицы, я показываю модальное окно с данными, связанными с выбранной строкой, но когда я нажимаю кнопку в строке, у меня есть ярлык для редактирования / удаления / олицетворения конкретного пользователя. Если я щелкну строку, то модальное окно откроется правильно, но когда я нажимаю кнопки для ярлыков, я хочу, чтобы выполнялся только щелчок ярлыка, при этом модальное окно было связано со строкой. Можно ли разделить это поведение? Есть ли у вас какие-либо предложения?

dashboard.blade.php

{{-- 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

компонент livewire с корпусом стола

<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>&times;</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>

Community 20.04.2021 источник

comment

поместите провод: щелкните каждый элемент ‹td› вместо ‹tr›, таким образом вы можете исключить ‹td›, содержащий кнопки - Prospero 20.04.2021

Ответы (1)

arrow_upward
0
arrow_downward

Насколько известно, основных функций прохождения кликов нельзя избежать. Тем не менее, есть несколько возможных решений:

Вы можете добавить открытое модальное окно только в одно или несколько полей таблицы. Например имя пользователя. Таким образом вы избежите проблем. Большинство людей при нажатии выбирают поле имени или имени.
Предполагая, что вы установили флаг для открытия модального окна, вы можете попробовать установить внутренний флаг для кнопок действий, используемых совсем недавно. Проверяя, следует ли открывать модальное окно, вы можете проверить это и пропустить открытие.

spekulatius 20.04.2021

comment

Спасибо, я добавил модальное окно только для первых 6 элементов и работает хорошо :-) - ; 21.04.2021

comment

Отлично, отлично сработало для вас! - spekulatius; 21.04.2021

Laravel 8 и livewire - отдельные элементы в строке таблицы

Ответы (1)

Похожие вопросы