Using Livewire with multi Select2 multiple input - Laravel

VitoAndolini
December 22, 2022
264 views
0 votes
2 Answers

in one page I have to list the name of the all rooms in a loop and assign employees to the rooms. Some employees uses more than one room. I decided use Livewire for the first time. So I don’t have experience with Livewire. I’m using Select2 to choose employees.

My structure is this:

Livewire View

<div>
    @foreach(AppModelsRoom::all() as $room)
        <div class="row">
            <div class="col-2">
                <div class="fw-bold">{{$room->room_code}}</div>
                <div>
                    <p>{{$room->name}}</p>
                </div>
            </div>
            <div class="col-8">
                <div class="row">
                    <div class="col-10">
                        <select class="multiple-select" wire:model="employee.employee" data-placeholder="Choose employee" multiple="multiple">
                            @foreach(AppModelsEmployee::where('status', 1)->get() as $employee)
                                <option value="{{$employee->id}}">{{$employee->first_name." ".$employee->last_name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-1">
                        <button class="btn btn-danger" wire:click="assignSave({{$room->id}})"><i class="fa-solid fa-floppy-disk icon-center"></i></button>
                    </div>
                    <div class="col-1 text-success font-22">
                        <i class="fa-solid fa-check icon-center"></i>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

Livewire Controller

<?php

namespace AppHttpLivewire;

use LivewireComponent;

class RoomAssign extends Component
{
    public $employee = [];
    
    public function render()
    {
        return view('livewire.room-assign');
    }

    public function assignSave($room){
        dd($this->employee);
    }
}

This is the blade

@section('sub-page-content')
    <h6 class="mb-0 text-uppercase">Room Assign</h6>
    <hr/>
    <div class="card">
        <div class="card-body">
            <livewire:room-assign />
        </div>
    </div>

@endsection
@section('customjs')
    <script src="{{asset('assets/plugins/select2/js/select24.min.js')}}"></script>
    <script src="{{asset('assets/js/form-select2.js')}}"></script>

    <script>
        $('.multiple-select').on('change', function (){
            alert('asdasd');
        })
    </script>
@endsection

Idea is simple. Take room id and employee id and save to a pivot table both information. But I can’t evet take employees array. In every loop I have a save button for that room to save records and I want to inform user is process is successful. For information I left a div to show a simple "green tick". Can you help me about taking the employee ids and notify the user?

Answers

  public function storeRoomEmployees(Room $room){
    
       $room->employees()->attach($this->employees)
    
    }

/* some suggestions on Your code 
 1. instead of this @foreach(AppModelsRoom::all() as $room) in your 
    blade, define a variable in Livewire Controller public $rooms.

 2. add mount function 


 public function mount(){
    $this->rooms = Room::all();
  }
    
// mount function runs before the content load

@foreach(AppModelsRoom::all() as $room) -> @foreach($rooms as $room)

*/

Need to add wire:ignore for select2. I would also change the $employeevariable in your foreach since you’re using it in your Livewire component as well and is more than likely causing a conflict. Use something like $employeeInfo instead for the foreach

<div class="col-10" wire:ignore>
    <select class="multiple-select" wire:model="employee" id="employee" data-placeholder="Choose employee" multiple="multiple">
        @foreach(AppModelsEmployee::where('status', 1)->get() as $employeeInfo)
            <option value="{{$employeeInfo->id}}">{{$employeeInfo->first_name." ".$employeeInfo->last_name}}</option>
        @endforeach
    </select>
</div>

When using Livewire with select2 you need to setup a listener for the select

public $employee = [];

protected $listeners = [
    'employee',
];

public function employee($value)
{
    $this->employee = $value;
}

And in your script tag:

$(document).ready(function() {
    window.initSelectDrop=()=>{
        $('#employee').select2({
        placeholder: '{{ __('locale.Select ....') }}',
        allowClear: true});
    }
    initSelectDrop();
    $('#employee').on('change', function (e) {
        livewire.emit('employee', e.target.value)
    });
});

I had this same issue, when Livewire re-renders the component it will break select2 drop downs. Using this approach select2 will act as expected.

Please signup or login to give your own answer.

Click here to cancel reply.

Using Livewire with multi Select2 multiple input – Laravel

Answers