Level 1
Solved:
Create a new component for this "select" and one listener
Hi guys, I have a Modal Form to register a new user, and this user has a Groups. When this modal is loaded list the groups to select one. But if another person includes a new group and the modal already loaded because is a Single Page Application the groups in the modal don't update. I tried to use events but the modal already created. What my mistake or the best option to solve this? Thanks
<div class="tab-pane" id="pills-leads" role="tabpanel" aria-labelledby="pills-leads-tab">
<div class="modal fade" id="leadFormModal" tabindex="-1" role="dialog"
aria-labelledby="editLead-ModalLabel" aria-modal="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title font-size-16" id="editLead-ModalLabel">Lead</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
@livewire('lead.lead-form')
</div>
</div>
</div>
<div class="modal fade" id="leadFormModalDelete" tabindex="-1" aria-labelledby="leadFormModalDelete"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
@livewire('lead.delete')
</div>
</div>
</div>
<div class="p-4">
<div class="user-chat-nav float-end">
<div data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Lead">
<!-- Button trigger modal -->
<button type="button" class="btn btn-link text-decoration-none text-muted font-size-18 py-0"
data-bs-toggle="modal" data-bs-target="#leadFormModal">
<i class="ri-user-add-line"></i>
</button>
</div>
</div>
<h4 class="mb-4">Leads</h4>
</div>
<div class="p-4 chat-message-list chat-group-list" data-simplebar>
<div>
@include('manyleads.lead.total_leads')
<ul class="list-unstyled contact-list">
@include('manyleads.chat.lead_list')
</ul>
</div>
</div>
</div>
and livewire form:
<div class="modal-body p-4">
<div class="mb-3">
<label for="first_name">First Name</label>
<input wire:model="first_name" id="first_name" type="text" class="form-control"/>
@error('first_name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="mb-3">
<label for="last_name">Last Name</label>
<input wire:model="last_name" id="last_name" type="text" class="form-control"/>
@error('last_name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="mb-3">
<label for="email">E-mail</label>
<input wire:model="email" id="email" type="text" class="form-control"/>
@error('email') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="mb-3">
<label for="phone">Phone</label>
<input wire:model="phone" id="phone" type="text" class="form-control"/>
@error('phone') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="mb-3">
<label for="group_id">Group List</label>
<div id="for-picker" wire:ignore>
<select class="form-control" multiple data-live-search="true" name="group_id" wire:model="groups_id">
@if(!is_null($groups))
@foreach($groups as $group)
<option {{ in_array($group->id, $selectedGroups) ? 'selected': '' }} value="{{$group->id}}">{{ $group->id }} | {{ $group->name }}</option>
@endforeach
@endif
</select>
</div>
@error('groups') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="modal-footer">
<button type="button" wire:click="CloseLeadModal" class="btn btn-secondary" data-target="#leadFormModal" data-dismiss="modal">Cancel
</button>
<button type="button" wire:click="save" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
My Livewire LeadForm:
<?php
namespace App\Http\Livewire\Lead;
use App\Models\Groups;
use App\Models\GroupsLead;
use App\Models\Leads;
use Auth;
use Livewire\Component;
class LeadForm extends Component
{
public $first_name;
public $last_name;
public $email;
public $phone;
public $lead;
public $lead_id;
public $groups_id;
public $groups;
public $selectedGroups = [];
protected $listeners = [
'getLeadFormId',
'forcedCloseModal',
'refreshParent' => '$refresh',
];
public function CloseLeadModal(){
$this->dispatchBrowserEvent('closeModal');
$this->cleanVars();
}
public function getLeadFormId($lead_id)
{
$lead = Leads::where('team_id', '=', Auth::user()->currentTeam()->id)->where('id', '=', $lead_id)->first();
$this->first_name = $lead->first_name;
$this->last_name = $lead->last_name;
$this->email = $lead->email;
$this->phone = $lead->phone;
$this->lead_id = $lead->id;
$this->groups_id = $lead->groups_lead->pluck('group_id')->toArray();
$this->selectedGroups = $lead->groups_lead->pluck('group_id')->toArray();
}
public function save()
{
// Data validation
$validateData = [
'first_name' => 'min:1|max:100',
'last_name' => 'min:1|max:100',
'email' => 'required|email',
'phone' => 'numeric',
];
// Default data
$data = [
'first_name' => $this->first_name,
'last_name' => $this->last_name,
'email' => $this->email,
'phone' => $this->phone,
'user_id' => Auth::id(),
'team_id' => Auth::user()->currentTeam()->id,
'groups_id' => $this->groups_id,
];
$this->validate($validateData);
if ($this->lead_id) {
Leads::find($this->lead_id)->update($data);
$this->emit('saveLeadGroups', $this->lead_id, $this->groups_id);
//dump('salva dados do lead:'.json_encode($data));
} else {
$newLead = Leads::create($data);
$this->lead_id = $newLead->id;
$this->emit('saveLeadGroups', $this->lead_id, $this->groups_id);
}
$this->emit('updateTotalLeads');
$this->emit('refreshParent');
$this->dispatchBrowserEvent('closeModal');
$this->cleanVars();
}
private function cleanVars()
{
$this->lead_id = null;
$this->first_name = null;
$this->last_name = null;
$this->email = null;
$this->phone = null;
}
public function forcedCloseModal()
{
// This is to reset our public variables
$this->cleanVars();
// These will reset our error bags
$this->resetErrorBag();
$this->resetValidation();
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
$this->groups = \App\Models\Groups::where('team_id', '=', Auth::user()->currentTeam()->id)->orderBy('name')->get();
return view('livewire.lead.lead-form');
}
}
Please or to participate in this conversation.