Livewire 3 usa dispatch ao invés do emit do Livewire 2

[Frank K Hosaka]

Antes de conhecer o Livewire, eu usava o POST para atualizar a tela, o Livewire usa ouvintes ('listeners'), que executam tarefas para mudar as propriedades de um componente e assim mudam as informações que estão na tela, logo depois de ouvir a gritaria do dispatch( ). A seguir tenho um componente chamado razão que executa a mudança da apuração e a apuração aparece na forma de modal e assim que o usuário escolhe a nova apuração, a apuração grita "terminei!" e o razão faz o resto do serviço, e tudo isso sem usar o POST.

Eu acredito que o listener é uma forma bem inteligente de executar um método dentro de uma classe. O clássico Laravel usava o Route para cada tarefa que você precisava executar dentro de uma classe, no Livewire o Route só serve para dizer aonde está a classe, ou, mais precisamente, o componente.

 

arquivo resources > views > livewire > lrazao.blade.php
<div>
    <div class="flex bg-gray-200">
        <div class="w-[50px] text-right mr-2">Lcto</div>
        <div class="w-[200px]">
            @livewire('lbalanceteApuracao')
        </div>
        <div class="w-[500px] -ml-3">
            <a href="balanceteInicio" class="text-gray-500 font-semibold">{{$razao->conta}} {{$razao->descricao}}</a>
        </div>
    </div>
    <div class="flex font-semibold">
        <div class="w-[240px] text-right mr-2">{{dec($razao->inicio)}}</div>
        <div>Saldo anterior</div>
    </div>
     @foreach($lctos as $lcto)
        @if($lcto->contad==$razao->conta)
            <div class="flex even:bg-gray-200">
                <div class="w-[50px] text-right">
                    <a href="ldiarioLcto?docto={{$lcto->docto}}" class="text-gray-500 font-semibold">{{$lcto->lcto}}</a>
                </div>
                <div class="w-[40px] text-right">{{$lcto->contac}}</div>
                <div class="w-[50px] text-right">
                    <a href="balanceteDiario?dia='{{$lcto->dia}}'" class="text-gray-500 font-semibold">
                            {{date('d/m',strtotime($lcto->dia))}}
                    </a>
                </div>
                <div class="w-[100px] text-right mr-2">{{dec($lcto->valor)}}</div>
                <div class="w-[350px] whitespace-nowrap overflow-auto">{{$lcto->hist}}</div>
            </div>
        @endif
        @if($lcto->contac==$razao->conta)
            <div class="flex even:bg-gray-200">
                <div class="w-[50px] text-right">
                        <a href="ldiarioLcto?docto={{$lcto->docto}}" 
                            class="text-gray-500 font-semibold">
                            {{$lcto->lcto}}
                        </a>
                    </div>
                    <div class="w-[40px] text-right text-red-500">{{$lcto->contad}}</div>
                    <div class="w-[50px] text-right">
                        <a href="balanceteDiario?dia={{$lcto->dia}}" class="text-gray-500 font-semibold">
                            {{date('d/m',strtotime($lcto->dia))}}
                        </a>
                    </div>
                    <div class="w-[100px] text-right text-red-500 mr-2">{{dec($lcto->valor)}}</div>
                    <div class="w-[350px] whitespace-nowrap overflow-auto">{{$lcto->hist}}</div>
                </div>
            @endif
        @endforeach

        <div class="flex even:bg-gray-200 font-semibold">
            <div class="w-[240px] text-right">{{dec($razao->fim)}}</div>
            <div class="ml-2">
                Saldo atual {{dec($razao->debito)}} <span class="text-red-500">{{dec($razao->credito)}}</span>
            </div>
        </div>
</div>

arquivo resources > views > livewire > lbalancete-apuracao.blade.php
<div>
    <div wire:click=alteraModal class="text-gray-500 font-semibold">{{ $apuracao }}</div>
    @if($modal)
    <div class="fixed inset-0 flex items-center justify-center">
        <div class='bg-white p-6 rounded shadow-lg border-4 border-gray-500'>
            <div class="text-nowrap">Selecione o período de apuração</div>
                <select wire:model="ano">
                    @foreach($anos as $key => $ano)
                        @if($key == 0)
                            <option value="{{ $ano }}" selected>{{ $ano }}</option>
                        @else
                            <option value="{{ $ano }}">{{ $ano }}</option>
                        @endif
                     @endforeach
                </select>
            
            <div class="mt-3">
                @foreach($meses as $posicao => $mes)
                    <button class="ml-1 hover:bg-gray-200 text-gray-500 font-bold py-1 rounded"
                        wire:click="apurada({{ $posicao + 1 }})">{{ $mes }}</button>
                @endforeach
            </div>
        </div>
    @endif
</div>

arquivo app > Livewire > Lrazao.php
<?php
namespace App\Livewire;
use App\Models\tbdiario;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('components.layouts.app',['titulo'=>'Razão'])]
class Lrazao extends Component {

    public $apuracao, $lctos, $razao;
    protected $listeners=['razaoAtualizar'=>'atualizar'];

    function atualizar() {
        $dia=session('apuracao') ?? date('Y-m-d');
        $this->apuracao=apuracao($dia);
        $primeiroDia=$this->apuracao->primeiroDia;
        $ultimoDia=$this->apuracao->ultimoDia;
        $this->lctos=tbdiario::whereBetween('dia',[$primeiroDia,$ultimoDia])->get();
    }


    function mount () {
        $conta=request()->input('conta') ? request()->input('conta') : session('razao');
        $balancete=(new Lbalancete)->balancete()->balancete;
        $this->razao=array_column($balancete, null, 'conta')[$conta] ?? false;
        $this->atualizar();
    }

}
?>

arquivo app > Livewire > LbalanceteApuracao.php
<?php
namespace App\Livewire;
use App\Models\tbdiario;
use Livewire\Component;

class LbalanceteApuracao extends Component {

    public $ano, $anos=[],$apuracao,$mes,$modal;
    public $meses=['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
    public $depuracao;


    function apurada ($mes) {
        session(['apuracao'=>$this->ano."-".$mes."-01"]);
        $dia=session('apuracao');
        $this->apuracao=apuracao($dia)->apuracao;
        $this->modal=false;
        $this->dispatch('razaoAtualizar');
    }

    function alteraModal () {
        $this->modal = $this->modal ? false : true;
    }

    function mount() {
        $primeiroAno=substr(tbdiario::orderBy('dia')->value('dia'),0,4);
        $ultimoAno=substr(tbdiario::orderBy('dia','desc')->value('dia'),0,4);
        for($i=$ultimoAno;$i>=$primeiroAno;$i--) {
            $this->anos[]=$i;
        }
        $dia=session('apuracao');
        $this->ano=date('Y',strtotime($dia));
        $this->apuracao=apuracao($dia)->apuracao;
    }
}
?>

 

Editado Abril 27 por Frank K Hosaka