A mágica do wire:model

[Frank K Hosaka]

O Copilot disse que o Livewire é baseado no Ajax, assim faz sentido quando você definir  <input wire:model="pendencias.{{$index}}.vcto">. No começo achei bem estranho, pois eu estava acostumado com coisa do tipo <input value="{{ $pendencias[$index]->vcto }}">. É muito difícil entender o Livewire no começo, só o tempo é que você se familiarizar com a gramática do PHP e a gramática do Java Script Ajax que vem embutido no Livewire.

Eu não tenho a menor ideia de como o Livewire conecta uma variável pública com um wire:model, mas na minha rotina de pendências eu precisei de um monte de wire:model para casar com um monte de pendência. Com a ajuda do Copilot, eu consegui isso:

arquivo resources > views > livewire > lpgar.blade.php
<div>
        <input wire:model="doc1" size="5" autocomplete="off" class="border-none rounded p-2 py-0">
        <input wire:model="doc2" size="5" autocomplete="off" class="border-none rounded p-2 py-0">
        <input type="submit" wire:click="ocultar" value="Ocultar Pendências">

    <div class="flex bg-gray-200 mt-2">
        <div class="w-[117px] ml-3 text-center">Vencimento</div>
        <div class="w-[50px] text-right">Docto</div>
        <div class="w-[110px] text-right">Pendência</div>
        <div class="w-[346px] px-2 border">Pessoa</div>
    </div>
    
    @foreach($pendencias as $index => $pendencia)
        <div class="even:bg-gray-200">
            <div class="flex">
                <div class="w-[117px] ml-3 text-right">
                    <input type=date  
                        wire:model="pendencias.{{$index}}.vcto"
                        onclick=showPicker()
                        wire:change="atualizaVcto({{$pendencia['docto']}},{{$index}})"
                        class="w-[117px] bg-transparent text-gray-500 font-semibold 
                                rounded py-0 border-none">
                </div>
                <div class="w-[50px] text-right">
                    <div wire:click="selecionarDocto({{$pendencia['docto']}})" title="Lçto: {{ $pendencias[$index]['lcto'] }}" class="text-right">
                            {{ $pendencia['docto'] }}
                        </div>
                    </div>
                    @if($pendencia['debito'])
                        <div class="w-[110px] text-right">
                            <?=dec($pendencia['debito'])?>
                        </div>
                    @else
                        <div class="w-[110px] text-right text-red-500">
                            <?=dec($pendencia['credito'])?>
                        </div>
                    @endif
                    <div class="w-[346px] px-2 truncate">
                        <a class="text-gray-500 font-semibold hover:bg-gray-200" 
                            wire:click="selecionarPessoa({{$pendencia['docto']}})" title="Histórico: {!!$pendencia['hist']!!}">
                            <?=$pendencia['pessoa']?>
                        </a>
                    </div>
                </div>
            </div>
    @endforeach
</div> 

Arquivo app > Livewire > Lpagar.php
<?php
namespace App\Livewire;
use App\Models\tbcontacorrente;
use App\Models\tbdiario;
use App\Models\tbpessoa;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('components.layouts.app',['titulo'=>'Pendências'])]
class Lpagar extends Component {

    public $doc1,$doc2,$pendencias=[];

    function atualizaVcto($docto,$index) {
        $vcto=$this->pendencias[$index]['vcto'];
        tbcontacorrente::where('docto',$docto)
            ->update(['vcto'=>$vcto]);
        $this->montaPendencias();
    }

    function montaPendencias() {
        if(request()->input('docto')) {
            $docto=request()->input('docto');
            $codp=session('codp');
            tbcontacorrente::where('docto',$docto)->update(['codp'=>$codp]);
        }
        $this->pendencias=[];
        $contas=tbcontacorrente::where('pgto',0)->orderBy('vcto')->get();
        foreach($contas as $conta) {
            $doc=tbdiario::where('docto',$conta->docto)->first();
            $vcto=$conta->vcto;
            $docto=$conta->docto;
            $lcto=$doc->lcto;
            if($doc->contad==130 || $doc->contad==211) {
                $debito=$doc->valor;
                $credito=null;
            } else {
                $debito=null;
                $credito=$doc->valor;
            }
            $hist=dbr($doc->dia)." ".$doc->hist;
            if($conta->codp) {
                $pessoa=tbpessoa::where('codp',$conta->codp)->value('pessoa');
            } else {
                $pessoa="Selecionar";
            }
            $this->pendencias[]=['vcto'=>$vcto,'docto'=>$docto,'lcto'=>$lcto,'debito'=>$debito,
                'credito'=>$credito,'hist'=>$hist,'pessoa'=>$pessoa];
        }
    }

    function mount() {
        $pendencias=tbcontacorrente::with('diario')->where('pgto',0)->get();
        foreach($pendencias as $p) {
            $eliminar=($p->diario->contad!==130);
            $eliminar+=($p->diario->contad!==211);
            $eliminar+=($p->diario->contac!==130);
            $eliminar+=($p->diario->contac!==211);
            if($eliminar==4) {
                tbcontacorrente::where('docto',$p->docto)->delete();
            }
        }
        $pendencias=tbcontacorrente::pluck('docto');
        $doc1=tbdiario::where('dia','>','2023-12-31')->where('contad',130)->pluck('docto');
        $doc2=tbdiario::where('dia','>','2023-12-31')->where('contac',130)->pluck('docto');
        $doc3=tbdiario::where('dia','>','2023-12-31')->where('contad',211)->pluck('docto');
        $doc4=tbdiario::where('dia','>','2023-12-31')->where('contac',211)->pluck('docto');
        $documentos=$doc1->merge($doc2)->merge($doc3)->merge($doc4);
        $diferenca=$documentos->diff($pendencias);
        foreach($diferenca as $d) {
            $lcto=tbdiario::where('docto',$d)->value('lcto');
            tbcontacorrente::create(['docto'=>$d,'lcto'=>$lcto,'pgto'=>0]);
        }
        $this->montaPendencias();
    }

    function ocultar() {
        if($this->doc1 !== null) {
            tbcontacorrente::where('docto',$this->doc1)
                ->update(['pgto'=>1]);
        }
        if($this->doc2 !== null) {
            tbcontacorrente::where('docto',$this->doc2)
                ->update(['pgto'=>1]);
        }
        $this->doc1=$this->doc2=null;
        $this->montaPendencias();
    }

    function selecionarDocto($docto) {
        if($this->doc1==null) {
            $this->doc1 = $docto;
        } else {
            if($this->doc2==null) {
                $this->doc2 = $docto;
            }
        }
    }

    function selecionarPessoa($docto) {
        session(['end'=>"lpagar?docto=$docto"]);
        redirect()->route("lpessoa");
    }
}