I have a training report form on a blade page that uses an overlay to display a list of all users in a table for use in a form. In each row of the table, there are three columns. Column one contains a form checkbox whose value equals the user's ID. The second column has a small picture of them. The third column has their firstname, lastname and rank. The filtered list is built using Livewire.
What I am trying to do is to display info about the user that has been checked in the main, non-modal page when the modal window is closed. This includes the small photo of the user, their lastname, firstname and rank. It's just a visual way to see whose names have been checked., without seeing the entire list.
Below shows where I want the names and pictures displayed on the main blade page when the modal window is closed. It also shows the button from which the modal windows is opened from.
create.blade.php (Destination of checked data and launch modal window.)
<div class="panel-container show">
<div class="panel-content">
<!-- Panel Content Here -->
<div>
<button type="button" class="btn btn-default" data-toggle="modal"
data-target=".attendees_modal_list" id="modalButton">Participants</button>
<button type="button" class="btn btn-default" data-toggle="modal"
data-target=".attendees_modal_list">Clear Participants</button>
</div>
<!-- Add the following HTML where you want to display the selected attendees' information -->
<div wire:ignore.self>
<table>
<thead>
<tr>
<th>Profile Picture</th>
<th>Name</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
@isset($selectedAttendees)
@foreach ($selectedAttendees as $attendee)
<tr>
<td>
<img src="http://siriusfireweb.test/images/user/Firefighter-Silhouette.png"
alt="Profile Picture" width="40px">
</td>
<td>
{{ $attendee->lastname }}, {{ $attendee->firstname }}
</td>
<td>
{{ $attendee->rank }}
</td>
</tr>
@endforeach
@endisset
</tbody>
</table>
</div>
</div>
</div>
This is the modal window that contains a livewire component of the names:
create.blade.php (The Modal Window Itself)
<!-- Modal Right for Participants -->
<div class="modal fade attendees_modal_list" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-right modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Attendees</h2>
<button type="button" class="btn btn-secondary" wire:click="closeWindow" data-dismiss="modal">Close Window</button>
</div>
<div>
<livewire:search-attendees />
</div>
</div>
</div>
</div>
<!-- End Modal Right for Participants -->
This is the Livewire component that puts the checkboxes, photo and names into a table. The rows can be filtered using the input field at the top.
search-attendees.blade.php (Displays the names and info about each user)
<div>
<div class="input-group mb-g">
<input type="text" id="attendees_filter" name="attendees_filter" wire:model="search"
class="form-control form-control-lg shadow-inset-2 ml-2" placeholder="Filter List..">
<div class="input-group-append">
<div class="input-group-text">
<i class="fal fa-search fs-xl mr-2"></i>
</div>
</div>
</div>
<table width="100%" class="table-checkboxes table table-bordered" id="attendees">
<tbody>
@foreach ($attendees as $attendee)
<tr>
<td>
<input type="checkbox" name="participants" value="{{ $attendee->id }}" wire:model="selectedAttendees">
</td>
<td class="m-0 p-0">
<img src="http://siriusfireweb.test/images/user/Firefighter-Silhouette.png"
alt="Profile Picture" width="40px">
</td>
<td>
<div>
{{ $attendee->lastname }}, {{ $attendee->firstname }}
</div>
<div>
<small>
{{ $attendee->rank }} (Shift {{ $attendee->shift }}, {{ $attendee->station }})
</small>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
And this is theSearchAttendees "Livewire controller" page
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Support\Facades\DB;
class SearchAttendees extends Component
{
public $search;
public $selectedAttendees = [];
public function render()
{
$searchTerm = '%' . $this->search . '%';
$attendees = DB::select ('select users.id, users.prefix, users.firstname, users.middlename, users.lastname, users.suffix, users.`status`, users.empnumber, assignments.rank,
assignments.title, assignments.shift, assignments.station, assignments.division, assignments.unit
FROM
users
join
assignments
ON
assignments.id = (
select id from assignments
where assignments.user_id = users.id
AND effectivedt <= now()
order by effectivedt desc, id desc
limit 1
)
WHERE Status = 1 and lastname like ?
ORDER BY users.lastname ASC, users.firstname ASC, assignments.division ASC, assignments.shift ASC, assignments.station ASC', [$searchTerm]);
$attendees= collect($attendees);
return view('livewire.search-attendees', compact('attendees'));
}
public function updatedSelectedAttendees($value)
{
$this->selectedAttendees = $value;
}
public function closeWindow()
{
// Emit a Livewire event to pass the selected attendees' information to the main blade page
$this->emit('modalClosed', $this->selectedAttendees);
}
}
And finally, this is the script that should trigger it all, but I am getting nothing from ModalClosed action.
<script>
document.addEventListener('livewire:load', function () {
Livewire.on('modalClosed', function (selectedAttendees) {
// Update the selected attendees' information in the table
Livewire.find('search-attendees').set('selectedAttendees', selectedAttendees);
});
});
</script>
I am not sure what I am missing. Any help would be great appreciated. Here is a screenshot to help you understand what I am doing. https://app.screencast.com/90pPADEQdRl9X
