Frank K Hosaka

No mês passado, enfrentei o problema da diferença de um centavo entre o meu relatório e o da Bling, consegui resolver com a ajuda da função do PHP round( ) mais um epsilon de 0.0001. Hoje é Páscoa, e o coelhinho não trouxe o ovo, mas trouxe uma diferença de R$ 0,01 entre o meu relatório da previsão com o relatório da venda. Eu fiquei indignado. A minha saída foi entrar direto no MySQL e alterar o valor do pedido de 21.025 para 21.03, e assim consegui fazer o relatório da previsão bater com o relatório da venda. Foi aí que eu percebi que usei a função no lugar errado, ao invés de usar a função na consulta o certo é usar a função no momento do cálculo do item. O erro está aqui: $total = 0.15 x 3.50 = 0.525, o certo é $total=round(0.15 x 3.50,2)=0.53. O PHP é capaz de calcular com duas casas decimais. Três casas é pedir demais!

Eu estava reescrevendo o meu projeto Orçamento no formato Livewire na base da tentativa e erro, e até agora tem dado certo. Decidi estudar o Livewire de acordo com o tutorial. Logo na primeira página do livewire.laravel.com eu encontrei: <input wire:model.live="search"> Eu fiquei intrigado com o verbo "live", assim eu pedi ajuda para o Copilot para dar vida ao código, ele ficou assim: arquivo Lteste.php <?php namespace App\Livewire; use App\Models\tbprod; use Livewire\Attributes\Layout; use Livewire\Component; #[Layout('components.layouts.app',['titulo'=>'Teste'])] class Lteste extends Component { public $search; function render() { $results = $this->search ? tbprod::where('prod','like','%'.$this->search.'%')->get() : []; return view('livewire.lteste',compact('results')); } } arquivo lteste.blade.php <div> <flux:input wire:model.live="search" /> <ul> @foreach($results as $result) <li>{{ $result->prod }}</li> @endforeach </ul> </div> Ele é bacana, lembra o <datalist> do HTML, ele vai mostrando o resultado da busca na medida que você digita; mas o <datalist> precisa de todos os registros, já o Livewire vai buscar o resultado diretamente no MySQL. Eu escrevi "maçã", e o Livewire mostrou "maca" que eu cadastrei no MySQL. Fui no MySQL, eu mudei maca para maçã. Voltei no Livewire, escrevi maca e o Livewire mostrou maçã. Ele é bem melhor que o <datalist> que só retorna o que você digita, ele não suporta as variações da língua portuguesa. Se depender do Livewire dá para usar acentuações na descrição de produtos do MySQL, o problema é na hora de mandar a informação lá na Bling para ele emitir a NFCe, eu acredito que vai dar bode. Vou fazer o teste, e volto para dizer se é possível usar acentuação na descrição dos produtos.

Melhor que o atalho de teclado é o JavaScript. Hoje eu conheci o comando scrollIntoView( ), ele mostra o final da página, mas quando o <input> recebe o foco, o final da página some. Mas pelo menos o <input> fica sempre disponível no rodapé do navegador, principalmente quando a listagem é bem longa: arquivo lprevisao.blade.php (parcial) foreach($mercado as $m) <div class="flex odd:bg-gray-200 w-[350px]"> <div class="w-[100px] text-right">{{ dec($m->venda) }}</div> <div class="w-[100px] text-right">{{ dec($m->tarifa) }}</div> <div wire:click="excluir({{$m->id}})" class="w-[100px] text-right text-gray-500 font-semibold"> {{ dec($m->conta) }} </div> </div> @endforeach <div class=flex> <input id=venda wire:model="venda" class="w-[100px] text-right border border-gray-300 rounded-sm" autofocus> <input wire:model="tarifa" wire:change="incluir" onchange="venda.focus();ttarifa.scrollIntoView()" class="w-[100px] text-right border border-gray-300 rounded-sm"> </div> <div wire:click="registrar" class="flex odd:bg-gray-200 w-[350px] font-semibold"> <div class="w-[100px] text-right text-gray-500 font-semibold"> {{ dec($total->tvenda) }} </div> <div id=ttarifa class="w-[100px] text-right font-semibold">{{ dec($total->ttarifa) }}</div> <div class="w-[100px] text-right font-semibold">{{ dec($total->tconta) }}</div> </div>

HTML é uma linguagem que eu não domino, apesar de mexer com o PHP desde 2020. Hoje estou estudando o Livewire, mas tem uma rotina que eu chamei de previsão e queria dar um jeito de olhar o final da página. A maneira mais simples é a barra de rolagem no canto direito do navegador, mas o mouse está a vários quilômetros do destino e o pior é ter que fazer todo o caminho de volta. Assim, pensei em criar um atalho. Eu improvisei o seguinte código em PHP, não sei se vai funcionar lá no Livewire: <?php $mysqli = new mysqli("localhost", "root", "", "diario"); $produtos = $mysqli->query("SELECT * FROM tbprod LIMIT 30"); ?> <script src="https://cdn.tailwindcss.com"></script> <body class="min-h-screen flex flex-col justify-end"> <main class="flex flex-col gap-2"> <?php foreach($produtos as $index => $p): ?> <div class="px-2"><?=$p['prod']?></div> <?php if($index==10): ?> <a class="px-2 font-bold" href=#fimDaPagina>Ir para o final</a> <?php endif; endforeach; ?> </main> <div id="fimDaPagina"></div> </body> Esse é um péssimo exemplo de programação, o comando Ir para o final ficou bem no meio da listagem de produtos, o correto era colocar na barra de navegação, mas o meu conhecimento em HTML é precário, não sei como fixar a barra de navegação no topo da tela. A maneira mais fácil de chegar no fim de uma página é usando atalho de teclado. A maioria dos PCs usa CTRL + END. O meu é um notebook Galaxy Book S com Windows 11, usei Fn + flecha para baixo.

Antes do Laravel 12 eu usei o marcador <form><input></form>. O Livewire também tem o marcador <form>, mas eu ainda não sei como usá-lo, mas eu sei que o Livewire consegue trabalhar com o valor do <input wire:model="inputQt"> em conjunto com a variável pública $inputQt através do processo da "hidratação". O problema é que eu trabalho com o MySQL e tenho que mexer com vários registros e depois de muitas tentativas eu consegui casar o wire:model com os registros. Mas hoje estava brincando com o modal, e achei bem mais fácil trabalhar com um wire:model do que um monte deles: Esse é um trecho da view que chama a função wire:click="nfQt(...)" <!-- parte do blade --> @if($modal2) <div class="fixed inset-0 flex items-center justify-center"> <div class="bg-white p-6 rounded shadow-lg text-center border-8 border-gray-500"> <div>Qt anterior: {{ $qt }}</div> <div>Qt atual: </div> <input wire:model="inputQt" autofocus class=px-2> <button wire:click="nfQt({{$custoTotal}},{{$qt}},{{$codprod}},{{true}})" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded"> Alterar </button> <button wire:click="$set('modal2', false)" class="mt-2 bg-red-500 text-white px-4 py-2 rounded"> Cancelar </button> </div> </div> @endif <!-- outra parte do mesmo blade --> @foreach($previa as $p) <div class="flex odd:bg-gray-200"> <div class="w-[80px] text-right truncate">{{$p->codforn}}</div> <div class="w-[50px] text-right">{{$p->codprod}}</div> <div class="w-[318px] ml-2 truncate">{{$p->prod}}</div> <div wire:click="nfQt({{$p->custototal}},{{$p->qt}},{{$p->codprod}})" class="w-[50px] text-right"> {{ $p->qt }} </div> <div {!! $p->class !!} wire:click="atualizar({{$p->custoatual}},{{$p->custoanterior}},{{$p->codprod}})"> {{ dec($p->custoatual) }} </div> <div class="w-[70px] text-right">{{ dec($p->custototal) }}</div> </div> @endforeach Esse é o trecho do componente que executa o método nfQt(...), note que esse método serve tanto para chamar o modal bem como executar o resto do serviço, dependendo da escolha do usuário: <?php // ... function nfQt($custoTotal,$qt,$codprod,$executar = false) { if($executar) { $this->modal2=false; $novoCusto=round($custoTotal/$this->inputQt,2); $custoAnterior=tbprod::where('codprod',$codprod) ->value('custo'); if($novoCusto==$custoAnterior) { $class = "class='w-[70px] text-right'"; } else { $class = "class='w-[70px] text-right text-red-500'"; } tbnf::where('codprod',$codprod) ->update(['qt'=>$this->inputQt,'custoatual'=>$novoCusto, 'custoanterior'=>$custoAnterior,'class'=>$class]); $this->previa=tbnf::all(); } else { $this->custoTotal=$custoTotal; $this->qt=$qt; $this->codprod=$codprod; $this->modal2=true; } }

Não consegui usar a tecnologia Livewire com o marcador <details>, assim eu improvisei com um $modal. O seguinte código funciona no ambiente Hostinger: Lpessoas.php <?php namespace App\Livewire; use App\Models\tbpessoa; use Livewire\Attributes\Layout; use Livewire\Component; #[Layout('components.layouts.app',['titulo'=>'Pessoas'])] class Lpessoa extends Component { public $modal, $pessoas; function definirModal($i) { $this->modal=$i; } function mount() { $this->pessoas=tbpessoa::orderBy('pessoa') ->take(10)->get()->toArray(); } } ?> lpessoa.blade.php <div> @foreach($pessoas as $i => $pessoa) <div class="odd:bg-gray-200 flex"> <div class="w-[60px] text-right px-2">{{ $pessoas[$i]['codp'] }}</div> <div wire:click="definirModal({{$i}})"> @if($pessoa['vinculo']) <svg width="16" height="16" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="50,75 25,25 75,25" style="fill:red;" /></svg> @else <svg width="16" height="16" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="50,75 25,25 75,25" style="fill:black;" /></svg> @endif </div> <input wire:model="pessoas.{{$i}}.pessoa" class="px-2" /> </div> @if($modal===$i) // aqui usei o operador estritamente igual === para diferenciar o null de 0 <div class=flex> <div class=font-semibold>Endereço:</div> <input wire:model="pessoas.{{$i}}.end" class="px-2" /> </div> <div class=flex> <div class=font-semibold>CPF CNPJ:</div> <input wire:model="pessoas.{{$i}}.cnpj" class="px-2" /> </div> <div class=flex> <div class=font-semibold>Telefone:</div> <input wire:model="pessoas.{{$i}}.tel" class="px-2" /> </div> <div class=flex> <div class=font-semibold>Nota:</div> <input wire:model="pessoas.{{$i}}.nota" class="px-2" /> </div> <div class=flex> <div class=font-semibold>Vínculo:</div> <input wire:model="pessoas.{{$i}}.vinculo" class="px-2" /> </div> @endif @endforeach </div>

Finalmente, consegui trabalhar com o wire:model do Livewire com o MySQL. O Copilot me ajudou bastante a criar o código sem receber a mensagem "Livewire encountered corrupted data" no Hostinger: Lteste.php <?php namespace App\Livewire; use App\Models\tbprevisao; use Livewire\Component; class Lteste extends Component { public $previsao; function mount() { $this->previsao =tbprevisao::orderBy('conta') ->take(3)->get()->toArray(); } function updated($propertyName) { $parts=explode(".",$propertyName); $index=$parts[1]; $id=$this->previsao[$index]['id']; $valor=data_get($this,$propertyName); tbprevisao::where('id',$id) ->update(['valor'=>$valor]); } } lteste.blade.php <div class="w-[100px]"> <flux:input wire:model="previsao.0.valor" wire:change="$refresh" /> <flux:input wire:model="previsao.1.valor" wire:change="$refresh" /> <flux:input wire:model="previsao.2.valor" wire:change="$refresh" /> <pre>{{ print_r($previsao) }}</pre> </div>

Testando um objeto: Lteste.php <?php namespace App\Livewire; use Livewire\Component; class Lteste extends Component { public $objeto = ['vetor' => [1,2,3]]; } lteste.blade.php <div class="w-[100px]"> <flux:input wire:model="objeto.vetor.0" wire:change="$refresh" /> <flux:input wire:model="objeto.vetor.1" wire:change="$refresh" /> <flux:input wire:model="objeto.vetor.2" wire:change="$refresh" /> <pre>{{ print_r($objeto['vetor']) }}</pre> </div>

Eu já aprendi que o meu código no notebook nem sempre funciona no Hostinger. Hoje eu decidi estudar o Livewire diretamente no Hostinger, usando o file manager do CloudPanel. Esse é o meu primeiro código, por enquanto não recebi nenhuma mensagem de erro: Lteste.php <?php namespace App\Livewire; use Livewire\Component; class Lteste extends Component { public $vetor=[1,2,3]; } lteste.blade.php <div class="w-[100px]"> <flux:input wire:model="vetor.0" wire:change="$refresh" /> <flux:input wire:model="vetor.1" wire:change="$refresh" /> <flux:input wire:model="vetor.2" wire:change="$refresh" /> <div>{{ $vetor[0]." ".$vetor[1]." ".$vetor[2] }}</div> </div>

Eu publiquei a minha dúvida no fórum do Laracasts.com, mas eu tenho pouca esperança. Enquanto isso, pensei em transformar o Livewire num roteador, ficou uma grande gambiarra, mas pelo menos funciona no Hostinger: arquivo app > Livewire > Lteste.php <?php namespace App\Livewire; use App\Models\tbprevisao; use Illuminate\Support\Facades\DB; use Livewire\Component; class Lteste extends Component { public $id,$modal,$previsoes; function mount() { if(request()->input("novoValor")){ if(session()->has('id')){ $this->id=session('id'); } $this->modal=false; $valor=deca(request()->input("novoValor")); tbprevisao::where('id',$this->id)->update(['valor'=>$valor]); } if(request()->input("id")){ $this->modal=true; $this->id=request()->input("id"); session(['id'=>$this->id]); } $this->previsoes=DB::table('tbprevisao')->join('tbw', 'tbprevisao.conta', 'tbw.conta') ->orderBy('tbprevisao.conta')->get(); } } arquivo resources > views > livewire > lteste.blade.php <div> <div class="flex odd:bg-gray-200"> <div class="w-[50px] text-right">Conta</div> <div class="w-[188px] px-2">Descricao</div> <div class="w-[130px] text-right">Previsão</div> <div class="w-[130px] text-right">Diario</div> <div class="w-[130px] text-right">Divergência</div> </div> @foreach($previsoes as $p) <div class="odd:bg-gray-200 flex"> <div class="w-[50px] text-right">{{$p->conta}}</div> <div class="w-[188px] px-2 truncate">{{$p->descricao}}</div> @if($modal && $id == $p->id) <div class="w-[130px] text-right border border-black"> <form><input name="novoValor" wire:on class="w-[130px]" /></form> </div> @else <a href="?id={{$p->id}}" class="w-[130px] text-right">{{dec($p->valor)}}</a> @endif <div class="w-[130px] text-right">{{dec($p->fim)}}</div> <div class="w-[130px] text-right"> {{dec(abs(round($p->valor - $p->fim + 0.0001,2)))}} </div> </div> @endforeach </div>

O código a seguir funciona no meu Window 11 / Apache. Na Hostinger Ubuntu / nginx, eu recebo a mensagem no web console assim: https://meusite/livewire/update, ele aparece na lista do php artisan list:route, eu só não sei como ver se o Laravel tem condição de ver essa pasta no ambiente do Hostinger, pelo menos eu não consigo ver essa pasta nem aqui no Windows. Acredito que esse é um dos melhores códigos que eu já fiz, é uma pena que não funciona na Hostinger: arquivo app > Livewire > Lteste.php <?php namespace App\Livewire; use App\Models\tbprevisao; use Illuminate\Support\Facades\DB; use Livewire\Component; class Lteste extends Component { public $id,$novoValor,$modal,$previsoes; function update() { $this->modal = false; $valor=deca($this->novoValor); tbprevisao::where('id',$this->id)->update(['valor'=>$valor]); $this->previsoes=DB::table('tbprevisao')->join('tbw', 'tbprevisao.conta', 'tbw.conta') ->orderBy('tbprevisao.conta')->get(); } function mount() { $this->previsoes=DB::table('tbprevisao')->join('tbw', 'tbprevisao.conta', 'tbw.conta') ->orderBy('tbprevisao.conta')->get(); } function selecionado($id) { $this->id = $id; $this->modal = true; } } arquivo resources > views >livewire > lteste.blade.php <div> <div class="flex odd:bg-gray-200"> <div class="w-[50px] text-right">Conta</div> <div class="w-[188px] px-2">Descricao</div> <div class="w-[130px] text-right">Previsão</div> <div class="w-[130px] text-right">Diario</div> <div class="w-[130px] text-right">Divergência</div> </div> @foreach($previsoes as $p) <div class="odd:bg-gray-200 flex" wire:click="selecionado({{ $p->id }})"> <div class="w-[50px] text-right">{{$p->conta}}</div> <div class="w-[188px] px-2 truncate">{{$p->descricao}}</div> @if($modal && $id == $p->id) <div class="w-[130px] text-right"> <flux:input wire:model="novoValor" wire:change="update" size="xs" /> </div> @else <div class="w-[130px] text-right">{{dec($p->valor)}}</div> @endif <div class="w-[130px] text-right">{{dec($p->fim)}}</div> <div class="w-[130px] text-right"> {{dec(abs(round($p->valor - $p->fim + 0.0001,2)))}} </div> </div> @endforeach </div>

Eu tenho uma rotina chamada previsão que funciona no meu notebook, mas lá na Hostinger apareceu uma estranha mensagem "Livewire encountered corrupt data". Passei horas estudando o código, mas não consegui achar o problema. Na internet encontrei algumas mensagens reclamando que o "wire:model" não funciona adequadamente com o array e alguém sugeriu usar a propriedade protected na variável ao invés do public. Até que eu tentei, mas não funcionou. A minha única saída provisória foi usar o <form>, mas eu só encontrei exemplo usando apenas um <form> e não um monte delas. Eu improvisei assim: arquivo resources > views > livewire > lprevisão.blade.php <?php foreach($painel as $key => $p): ?> <div class="flex odd:bg-gray-200"> <div class="w-[50px] text-right"><?=$p->conta?></div> <div class="w-[188px] px-2 truncate"><?=$p->descricao?></div> <div class="w-[130px] py-0"> <form > <input name='{{$p->conta}}' class="w-[130px] text-right py-0 border-none" value='{{dec($p->valor)}}' wire:change="atualizar({{$p->conta}})"> </form> </div> <div class="w-[130px] text-right"><?=dec($p->fim)?></div> <div class="w-[130px] text-right"> <?=dec(abs(round($p->valor - $p->fim + 0.0001,2)))?> </div> </div> <?php endforeach;?> O comando wire:change não funciona como eu esperava, mas ele conseguiu simular o botão "submit", e assim eu consegui jogar no cabeçalho do navegador algo do tipo lteste?112=70. 112 é o número da conta que usei para dar o nome ao <input> e 70 é o número que eu digitei no <input>. Como o comando wire:change não funciona, a minha pergunta foi: e agora, como faço para pegar o número que eu digitei? A minha intuição mandou pegar a função mount( ) no componente, assim: arquivo app > Livewire > Lprevisao.php <?php //... function mount() { if(request()->input()){ foreach(request()->input() as $conta => $valor){} $valor=deca($valor); tbprevisao::where('conta',$conta)->update(['valor'=>$valor]); } $balancete = new Lbalancete(); $balancete->tbw(new Request(['opcao'=>1])); $this->mercado=tbmercado::all(); $this->total = DB::table('tbmercado')->select( DB::raw('SUM(venda) as tvenda'), DB::raw('SUM(tarifa) as ttarifa'), DB::raw('SUM(conta) as tconta'))->first(); $this->painel=DB::table('tbprevisao')->join('tbw', 'tbprevisao.conta', '=', 'tbw.conta') ->orderBy('tbprevisao.conta')->get(); } E aqui é só gambiarra, usei o mount( ) como uma espécie de roteador, ele pega o conteúdo do cabeçalho pelo request()->input(), depois joga a chave na variável $conta e o conteúdo na variável $valor através do comando foreach( ) que não faz absolutamente nada { }, mas consegue pegar o conteúdo do cabeçalho e jogar nas variáveis. Isso é um péssimo exemplo de programação. A ideia deu certo lá no Hostinger, mas o Livewire não foi feito para usar o <form>, mas a gambiarra deu certo. A mágica do Livewire está no componente wire:model, fazer isso funcionar com o array que é o problema.

arquivo resources > views > livewire > lteste.blade.php <div> <div class="mt-5 flex"> <div class="w-[200px] px-2"> <flux:input.group> <flux:input.group.prefix>Label 1</flux:input.group.prefix> <flux:input wire:model="teste" placeholder="Olá mundo" /> </flux:input.group> </div> <div class="w-[200px] px-2"> <flux:input.group> <flux:input.group.prefix>Label 2</flux:input.group.prefix> <flux:input wire:model="teste2" placeholder="Olá mundo" /> </flux:input.group> </div> <div class="w-[200px] px-2"> <flux:input.group> <flux:input.group.prefix>Label 3</flux:input.group.prefix> <flux:input wire:model="teste3" placeholder="Olá mundo" /> </flux:input.group> </div> </div> </div>

arquivo resources > views > livewire > ldiario-lcto.blade.php (parcial) <flux:field> <div class="w-[130px]""> <flux:input.group> <flux:input.group.prefix>Dia</flux:input.group.prefix> <flux:input type="date" wire:model="dia" wire:change="data" onclick=this.showPicker() /> </flux:input.group> </div> <div class="w-[130px]"> <flux:input.group> <flux:input.group.prefix>Lçto</flux:input.group.prefix> <flux:input wire:model="lcto" onclick=this.showPicker() /> </flux:input.group> </div> <div class="flex items-center"> <div class="w-[130px]"> <flux:input.group> <flux:input.group.prefix>ContaD</flux:input.group.prefix> <flux:input wire:model="ctaD" wire:click="abrirModal('ctaD')" /> </flux:input.group> </div> <div class='px-2'>{{$descD}}</div> </div> <div class="flex items-center"> <div class="w-[130px]"> <flux:input.group> <flux:input.group.prefix>ContaC</flux:input.group.prefix> <flux:input wire:model="ctaC" wire:click="abrirModal('ctaC')" /> </flux:input.group> </div> <div class='px-2'>{{$descC}}</div> </div> <div class="w-[130px]"> <flux:input.group> <flux:input.group.prefix>Valor</flux:input.group.prefix> <flux:input wire:model="valor" /> </flux:input.group> </div> <div> <flux:input.group> <flux:input.group.prefix>Histórico</flux:input.group.prefix> <flux:input wire:model="hist" /> </flux:input.group> </div> <div class="w-[130px]"> <flux:button wire:click="salvar" variant="primary"> Registrar </flux:button> </div> </flux:field>

Hoje de manhã pensei em instalar uma rotina para acrescentar um registro contábil, mas na hora de testar o modal do plano de contas não funcionou. No console da web, eu só vi a mensagem de que o problema é o livewire.js, isso não ajuda nada. Não tive outra escolha, senão começar do zero. Deixei vazio o arquivo app.livewire.LdiarioLcto.php e o arquivo resources.views.livewire.ldiario-lcto.blade.php, e o primeiro que reclamou foi o roteador web.php. Defini a classe no LdiarioLcto, e o roteador me colocou direto on line com o blade, e assim acabei descobrindo que eu não preciso do atributo layout e nem da function render( ), o roteador já faz isso automaticamente, quando você invoca uma classe do tipo Livewire. Fui testando peça por peça, até que cheguei nesse código: @if($comando=="Editar Lançamento") <div class="py-2"> <div wire:click="acrescentar(<?=$consulta->lcto?>)" class="text-gray-500 font-semibold hover:bg-gray-200 p-1 rounded-lg"> Acrescentar no lançamento <?=$consulta->lcto?> </a> </div> @endif Eu perdi o meu domingo só por causa de um erro de digitação, onde deveria escrever </div> eu escrevi </a>. Joguei todo o meu código no Copilot e ele encontrou alguns erros, mas não o marcador que eu usei errado. O Copilot sugeriu para eu instalar o HTMLhint no VS Code, isso sim foi pura perda de tempo, o HTMLhint disse que não encontrou nenhum erro no meu código. Eu estou gostando do Livewire, principalmente quando o meu código funciona. Hoje eu aprendi que o que trava o Livewire é o erro de digitação (80%), erro de lógica (10%) e ausência do tutorial (hoje só temos o counter no portal do Liveware, já o Chirper do Laravel desapareceu). Ou seja, estou fazendo tudo na base da tentativa e erro.