modcastro's avatar

How to update Modal Form after loaded

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');
    }
}

0 likes
1 reply
modcastro's avatar

Solved:

Create a new component for this "select" and one listener

Please or to participate in this conversation.