Copilot & Tailwinds: o modal

[Frank K Hosaka]

Hoje eu perdi um tempo danado para testar o código, esqueci de ativar o Tailwinds no terminal do VS Code:

npx tailwindcss -i input.css -o output.css --watch

Outro problema bem sério é que o Copilot  às vezes usa o CSS puro e outras vezes o CSS da Tailwinds.

Mesmo assim, eu consegui fazer um modal baseado num arquivo fora do arquivo principal.

Mas estou contente com o Copilot, ele me ensinou como mandar uma variável para o modal funcionar. Tive que mudar a classe e outros dois arquivos:

arquivo balancete.php
<?php
class Balancete 
{
	function apuracaoSelecionada()
	{
		$_SESSION['dia']=$_POST['ano']."-".$_POST['mes']."-01";
		return header('location:?Balancete.inicio');
	}

	function inicio($paginaAtual=null)
	{
		$maiorAno=(new Conn)->select("max(year(dia)) as maior from tbdiario")[0]->maior;
		$menorAno=(new Conn)->select("min(year(dia)) as menor from tbdiario")[0]->menor;
		$anos=[];
		for($i=$maiorAno;$i>=$menorAno;$i--)
		{
			$anos[]=$i;
		}
		$dia = isset($_SESSION['dia']) ? $_SESSION['dia'] : date('Y-m-d');
		$vetor=apuracao($dia);
		$primeiroDia=$vetor->primeiroDia;
		$ultimoDia=$vetor->ultimoDia;
		$mesExtenso=$vetor->mesExtenso;
		$matriz=[];
		$registros=(new Conn)->select("count(*) as total from tbconta")[0]->total;
		$registrosPorPagina=15;
		$paginaAtual = ($paginaAtual) ? $paginaAtual : 1;
		$indicador = ($paginaAtual - 1) * $registrosPorPagina;
		$contas=(new Conn)->select("* from tbconta limit $indicador, $registrosPorPagina");
		foreach($contas as $conta)
		{
			$debitos=(new Conn)->select("sum(valor) as soma from tbdiario
				where contad=$conta->conta and dia < '$primeiroDia'")[0]->soma;
			$creditos=(new Conn)->select("sum(valor) as soma from tbdiario
				where contac=$conta->conta and dia < '$primeiroDia'")[0]->soma;
			$inicio=round($debitos-$creditos,2);
			$debito=(new Conn)->select("sum(valor) as soma from tbdiario
				where contad=$conta->conta and
				dia between '$primeiroDia' and '$ultimoDia'")[0]->soma;
			$credito=(new Conn)->select("sum(valor) as soma from tbdiario
				where contac=$conta->conta and
				dia between '$primeiroDia' and '$ultimoDia'")[0]->soma;
			$saldo=$inicio+$debito-$credito;
			$matriz[]=['conta'=>$conta->conta,'descricao'=>$conta->descricao,
				'inicio'=>$inicio,'debito'=>$debito,'credito'=>$credito,
				'saldo'=>$saldo];
		}
		$jMatriz=json_decode(json_encode($matriz));
		return view('balanceteView',['jMatriz'=>$jMatriz,'paginaAtual'=>$paginaAtual,
			'mesExtenso'=>$mesExtenso,'anos'=>$anos]);
	}
}

arquivo balanceteApuracao.php
<?php if(isset($_GET['anos'])){$anos=json_decode($_GET['anos']);} ?>
<div class="fixed w-full max-w-[500px] mx-auto sm:w-[500px] text-center mb-4">
    <div>Escolha o ano</div>
    <form method="post" action="?Balancete.apuracaoSelecionada">
        <div>
            <select name="ano" class="bg-blue-600 shadow appearance-none border rounded py-2 px-3 text-white leading-tight focus:outline-none focus:shadow-outline">
                <?php foreach($anos as $ano): ?>
                    <option><?=$ano?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class=mt-4>Escolha o mês</div>
        <div class="grid grid-cols-6 gap-1 max-w-md mx-auto mt-4">
            <?php for($i = 1; $i <= 12; $i++): $j = sprintf("%02d", $i); ?>
                <input type="submit" name="mes" value="<?=$j?>" class="bg-blue-500 text-white py-2 px-4 rounded">
            <?php endfor; ?>
        </div>
    </form>
</div>

arquivo balanceteView.php
<?php include('menuView.php'); ?>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: 260px 150px 150px 150px 125px; /* Colunas com largura fixa */
        width: 835px; /* Ajustando explicitamente o tamanho do grid */
        margin: 0 auto; /* Centralizando */
    }
    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: 200px 125px; /* Ajuste para 2 colunas */
            width: 100%; /* Largura cheia para mobile */
        }
        .grid-container > :nth-child(2),
        .grid-container > :nth-child(3),
        .grid-container > :nth-child(4) {
            display: none;
        }
        .truncate {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
</style>
<script>
    function abrirModal() {
            modal.classList.toggle('hidden');
            var anos=<?=json_encode($anos)?>;
            var xhr = new XMLHttpRequest();
            var queryString = "?anos=" + encodeURIComponent(JSON.stringify(anos));
            xhr.open('GET', 'balanceteApuracao.php' + queryString, true);
            
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('modal').innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }
</script>
<div id="modal" class="hidden absolute mt-[40px] left-[510px] 
        bg-white bg-opacity-100 w-[500px] h-60 border">
</div>

<div class="w-full max-w-[500px] mx-auto sm:w-[500px] text-center mb-4">
    <button class="text-blue-500 hover:text-blue-700" onclick=abrirModal()>
        Balancete de <?=$mesExtenso?></button></div>
<div class="bg-gray-100 flex flex-col items-center justify-center w-full mx-auto">
    <div class="container mx-auto">

        <div class="grid-container bg-gray-800 text-white">
            <div class="py-0 text-center truncate">Conta</div>
            <div class="py-0 text-center">Início</div>
            <div class="py-0 text-center">Débito</div>
            <div class="py-0 text-center">Crédito</div>
            <div class="py-0 text-center">Saldo</div>
        </div>
        <?php foreach($jMatriz as $conta): ?>
        <div class="grid-container bg-white">
            <div class="border px-4 py-0 text-left truncate"><?=$conta->conta?> <?=$conta->descricao?></div>
            <div class="border px-4 py-0 text-right"><?=dec($conta->inicio)?></div>
            <div class="border px-4 py-0 text-right"><?=dec($conta->debito)?></div>
            <div class="border px-4 py-0 text-right"><?=dec($conta->credito)?></div>
            <div class="border px-4 py-0 text-right"><?=dec($conta->saldo)?></div>
        </div>
        <?php endforeach; $paginaAnterior=$paginaAtual-1; $paginaAtual++; ?>
        <div class="flex justify-between w-full max-w-[835px] mt-4 mx-auto">
            <a href="?Balancete.inicio.<?=$paginaAnterior?>" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">Anterior</a>
            <a href="?Balancete.inicio.<?=$paginaAtual?>" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">Próximo</a>
        </div>
    </div>
</div>