, correção de UX para gerara prévia do romaneio
This commit is contained in:
32
app/assets/tailwind/application.css
Normal file
32
app/assets/tailwind/application.css
Normal file
@@ -0,0 +1,32 @@
|
||||
/* app/assets/tailwind/application.css
|
||||
*
|
||||
* ESTE ARQUIVO EXISTE PARA O DEPLOY NÃO QUEBRAR. Leia antes de apagar.
|
||||
*
|
||||
* A gem `tailwindcss-rails` está no Gemfile e pendura a tarefa `tailwindcss:build`
|
||||
* dentro de `assets:precompile`. Ela procura ESTE caminho fixo e, se não achar,
|
||||
* aborta com:
|
||||
*
|
||||
* Specified input file `./app/assets/tailwind/application.css` does not exist.
|
||||
* Tasks: TOP => assets:precompile => tailwindcss:build
|
||||
*
|
||||
* E o `assets:precompile` morre INTEIRO nessa linha — nenhum arquivo chega em
|
||||
* public/assets. O efeito na tela é traiçoeiro: o Propshaft, sem manifesto, cai
|
||||
* no resolvedor dinâmico e continua montando URLs com o digest certo, então a
|
||||
* página abre normal e CADA /assets/*.js devolve 404 em silêncio. O sistema fica
|
||||
* sem JavaScript nenhum: prévia do PDF, edição inline da tabela, busca e
|
||||
* carrossel todos mortos, sem erro visível. Foi o que aconteceu de 27 a
|
||||
* 28/08/2026 e custou três rodadas de diagnóstico.
|
||||
*
|
||||
* POR QUE ESTÁ VAZIO: o CSS do sistema hoje vem do CDN do Tailwind, carregado em
|
||||
* app/views/layouts/application.html.erb. Sem `@import "tailwindcss"` aqui, o
|
||||
* build termina na hora e gera um arquivo vazio — nada é servido a mais e o
|
||||
* deploy não perde tempo montando um CSS que ninguém carrega.
|
||||
*
|
||||
* DÍVIDA CONHECIDA (uma das duas, quando houver espaço):
|
||||
* a) migrar do CDN para o Tailwind local — o próprio Tailwind desaconselha o
|
||||
* CDN em produção, e ele deixa o sistema dependendo de rede externa. Neste
|
||||
* caso, troque este comentário por `@import "tailwindcss";` e o
|
||||
* <script src="https://cdn.tailwindcss.com"> por stylesheet_link_tag; ou
|
||||
* b) remover `tailwindcss-rails` do Gemfile, que hoje é dependência morta.
|
||||
* Aí este arquivo some junto.
|
||||
*/
|
||||
@@ -131,10 +131,15 @@ export default class extends Controller {
|
||||
this.buscaTarget.focus()
|
||||
}
|
||||
|
||||
// ── Prévia (bloco <details> nativo) ─────────────────────────────────────
|
||||
// Abrir e fechar é do NAVEGADOR — o <details> não depende deste controller,
|
||||
// e é isso que mantém a prévia viva quando o JavaScript não carrega. O que
|
||||
// sobra aqui é só recarregar a folha depois de uma edição.
|
||||
// ── Prévia (pop-up por :target, CSS puro) ───────────────────────────────
|
||||
// Abrir, fechar e trocar de folha são do NAVEGADOR: link para `#previa`,
|
||||
// link para `#sem-previa` e links `?veiculo=X#previa`. Nada disso depende
|
||||
// deste controller — é o que mantém a prévia viva quando o JS não carrega.
|
||||
// O que sobra aqui é recarregar a folha depois de uma edição.
|
||||
previewAberta() {
|
||||
return this.hasOverlayTarget && this.overlayTarget.matches(":target")
|
||||
}
|
||||
|
||||
carregarPreview() {
|
||||
if (!this.hasPreviewTarget) return
|
||||
|
||||
@@ -145,23 +150,21 @@ export default class extends Controller {
|
||||
this.previewDesatualizado = false
|
||||
}
|
||||
|
||||
// Chamada depois de cada gravação. Com o bloco FECHADO não gera PDF nenhum —
|
||||
// Chamada depois de cada gravação. Com o pop-up FECHADO não gera PDF nenhum —
|
||||
// o `loading="lazy"` do iframe já garante isso, e recarregar o src de um
|
||||
// iframe escondido forçaria o servidor a montar um PDF que ninguém vai ver.
|
||||
atualizarPreview() {
|
||||
if (!this.hasOverlayTarget || !this.overlayTarget.open) {
|
||||
if (!this.previewAberta()) {
|
||||
this.previewDesatualizado = true
|
||||
return
|
||||
}
|
||||
this.carregarPreview()
|
||||
}
|
||||
|
||||
// O operador pode abrir a prévia depois de ter editado: neste caso o iframe
|
||||
// ainda mostra a folha antiga, então recarregamos no momento da abertura.
|
||||
aoAbrirPreview() {
|
||||
if (this.hasOverlayTarget && this.overlayTarget.open && this.previewDesatualizado) {
|
||||
this.carregarPreview()
|
||||
}
|
||||
// O operador pode abrir a prévia DEPOIS de editar: aí o iframe ainda mostra a
|
||||
// folha antiga. Como quem abre é o `:target`, o gancho é o hashchange.
|
||||
aoTrocarHash() {
|
||||
if (this.previewAberta() && this.previewDesatualizado) this.carregarPreview()
|
||||
}
|
||||
|
||||
// ── Infra ───────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -1,44 +1,101 @@
|
||||
<%# ── Prévia do PDF ───────────────────────────────────────────────────────
|
||||
<details> NATIVO, e não um modal controlado por Stimulus. Isto é o
|
||||
conserto de um problema que voltou três vezes: a prévia era o ÚNICO jeito
|
||||
de conferir a folha antes de imprimir e morria junto com o JavaScript.
|
||||
Quando os assets do servidor ficaram 404 (precompile que não rodou no
|
||||
deploy), o botão "Ver prévia do PDF" não fazia nada e o operador ficava
|
||||
sem saída — a tela abria normal, sem erro visível. Com <details> o
|
||||
abrir/fechar é do navegador: funciona com o JS quebrado, sem JS, e no
|
||||
celular.
|
||||
<%# Prévia do PDF em POP-UP, com navegação de veículo igual à do carrossel do
|
||||
motorista (setas grandes + contador "3 de 72").
|
||||
|
||||
`loading="lazy"`: o iframe só busca o PDF quando o bloco é aberto. É o que
|
||||
preserva a economia que o modal trazia (gerar PDF a cada carregamento da
|
||||
tela era o problema original) sem precisar de JS para preencher o `src`.
|
||||
── POR QUE É CSS PURO E NÃO JAVASCRIPT ────────────────────────────────────
|
||||
Abrir/fechar sai do `:target`: o botão é um link para `#previa` e o pop-up só
|
||||
aparece quando ele é o alvo da URL. As setas são links de verdade para
|
||||
`?veiculo=X#previa`, então trocar de folha mantém o pop-up aberto.
|
||||
|
||||
<iframe> e não <embed>/<object>: o CSP está em enforcing com
|
||||
`object_src :none`, e sem `frame_src` ele cai em `default_src :self` — o
|
||||
iframe de mesma origem passa, os outros dois não.
|
||||
Isso não é preciosismo: a prévia é a ÚNICA conferência antes de imprimir e
|
||||
já morreu três vezes junto com o JavaScript (assets 404 no servidor, com a
|
||||
tela abrindo normal e o botão sem reação). Do jeito atual ela funciona com o
|
||||
JS quebrado, sem JS, no celular, e continua endereçável — dá para mandar o
|
||||
link já com a prévia aberta.
|
||||
|
||||
O `data-romaneio-target="preview"` continua aqui de propósito: com o JS
|
||||
no ar, `atualizarPreview()` recarrega a folha depois de cada edição. Sem
|
||||
ele, basta fechar e abrir. %>
|
||||
<details class="bg-[#111] border border-white/5 rounded-2xl overflow-hidden"
|
||||
data-romaneio-target="overlay"
|
||||
data-action="toggle->romaneio#aoAbrirPreview">
|
||||
<summary class="cursor-pointer list-none px-4 py-3 min-h-[48px] flex items-center gap-2
|
||||
text-white hover:bg-white/5">
|
||||
<%= icone :visualizar, cor: nil, espaco: false %>
|
||||
Prévia do PDF — <span data-romaneio-target="tituloPreview"><%= @veiculo %></span>
|
||||
<span class="ml-auto text-xs text-gray-500">clique para abrir / fechar</span>
|
||||
</summary>
|
||||
`loading="lazy"` no iframe: fechado, o pop-up é `display:none` e o navegador
|
||||
NÃO busca o PDF. É o que preserva a economia de não gerar um documento a cada
|
||||
carregamento da tela.
|
||||
|
||||
<div class="px-4 pb-4 space-y-2">
|
||||
<div class="flex justify-end">
|
||||
<iframe> e não <embed>/<object>: o CSP está enforcing com `object_src :none`
|
||||
e sem `frame_src`, então cai em `default_src :self` — o iframe de mesma
|
||||
origem passa, os outros dois não.
|
||||
|
||||
Fechar leva para `#sem-previa`, um id que não existe em lugar nenhum: o
|
||||
`:target` deixa de casar e o pop-up some sem o salto ao topo que um `href="#"`
|
||||
causaria. %>
|
||||
<% nomes = @veiculos.map(&:veiculo) %>
|
||||
<% posicao = nomes.index(@veiculo) %>
|
||||
<% anterior = posicao&.positive? ? nomes[posicao - 1] : nil %>
|
||||
<% proximo = posicao && posicao < nomes.size - 1 ? nomes[posicao + 1] : nil %>
|
||||
|
||||
<div id="previa" data-romaneio-target="overlay"
|
||||
class="hidden target:flex fixed inset-0 z-50 items-center justify-center p-3 sm:p-6
|
||||
bg-black/80 backdrop-blur-sm">
|
||||
|
||||
<%# O fundo escuro fecha ao ser clicado — um link cobrindo a área, atrás da
|
||||
caixa (que é `relative`). Sem isso, só o ✕ fecharia. %>
|
||||
<a href="#sem-previa" tabindex="-1" aria-label="Fechar prévia" class="absolute inset-0"></a>
|
||||
|
||||
<div class="relative w-full max-w-6xl h-[92vh] flex flex-col gap-3">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h2 class="text-white font-semibold truncate">
|
||||
Prévia — <span data-romaneio-target="tituloPreview"><%= @veiculo %></span>
|
||||
</h2>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<%= link_to 'Abrir em outra aba',
|
||||
pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo),
|
||||
target: '_blank', rel: 'noopener',
|
||||
class: 'text-sm text-gray-300 hover:text-white px-3 py-2 rounded-lg hover:bg-white/10' %>
|
||||
<a href="#sem-previa" aria-label="Fechar prévia"
|
||||
class="min-w-[48px] min-h-[48px] flex items-center justify-center rounded-xl
|
||||
bg-[#1a1a1a] border border-white/10 text-white hover:bg-[#242424]">✕</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<iframe data-romaneio-target="preview" loading="lazy"
|
||||
src="<%= pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo) %>"
|
||||
class="w-full h-[80vh] rounded-xl border border-white/10 bg-white"
|
||||
class="flex-1 w-full rounded-xl border border-white/10 bg-white"
|
||||
title="Pré-visualização do romaneio"></iframe>
|
||||
|
||||
<%# Controles no mesmo desenho do carrossel do motorista (redondos, 56px,
|
||||
próximo em laranja), mas como LINKS: cada folha é uma URL. Na ponta vira
|
||||
<span> apagado em vez de sumir — botão que some muda o layout no meio da
|
||||
conferência e o operador perde o alvo do clique. %>
|
||||
<div class="flex items-center justify-center gap-3">
|
||||
<% if anterior %>
|
||||
<%= link_to admin_romaneio_path(@romaneio, veiculo: anterior, anchor: 'previa'),
|
||||
'aria-label': "Folha anterior (#{anterior})",
|
||||
class: 'w-14 h-14 rounded-full flex items-center justify-center
|
||||
bg-[#1a1a1a]/90 backdrop-blur border border-white/15 text-white
|
||||
hover:border-orange-500 transition-colors' do %>
|
||||
<%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="w-14 h-14 rounded-full flex items-center justify-center
|
||||
bg-[#1a1a1a]/50 border border-white/10 text-gray-600 opacity-40">
|
||||
<%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
||||
</span>
|
||||
<% end %>
|
||||
|
||||
<span class="bg-[#1a1a1a] border border-[#2a2a2a] text-gray-200 text-sm font-semibold
|
||||
rounded-full px-4 py-2 whitespace-nowrap">
|
||||
<%= posicao ? posicao + 1 : 1 %> de <%= nomes.size %> · <%= @veiculo %>
|
||||
</span>
|
||||
|
||||
<% if proximo %>
|
||||
<%= link_to admin_romaneio_path(@romaneio, veiculo: proximo, anchor: 'previa'),
|
||||
'aria-label': "Próxima folha (#{proximo})",
|
||||
class: 'w-14 h-14 rounded-full flex items-center justify-center
|
||||
bg-orange-500/90 backdrop-blur border border-orange-400 text-black
|
||||
hover:bg-orange-500 transition-colors' do %>
|
||||
<%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="w-14 h-14 rounded-full flex items-center justify-center
|
||||
bg-orange-500/20 border border-orange-400/30 text-black/40 opacity-40">
|
||||
<%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
@@ -38,17 +38,30 @@
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button type="button" data-action="romaneio#anterior" aria-label="Veículo anterior"
|
||||
class="flex-1 min-h-[48px] bg-[#1a1a1a] border border-white/10 rounded-xl
|
||||
text-white hover:bg-[#242424]">‹</button>
|
||||
<button type="button" data-action="romaneio#proximo" aria-label="Próximo veículo"
|
||||
class="flex-1 min-h-[48px] bg-[#1a1a1a] border border-white/10 rounded-xl
|
||||
text-white hover:bg-[#242424]">›</button>
|
||||
<%# Setas para andar na LISTA (a prévia tem as suas). Links de verdade pelo
|
||||
mesmo motivo dos itens acima: o veículo mora na query string. %>
|
||||
<div class="flex gap-2 pt-1">
|
||||
<% nomes_v = @veiculos.map(&:veiculo) %>
|
||||
<% pos_v = nomes_v.index(@veiculo) %>
|
||||
<% ant_v = pos_v&.positive? ? nomes_v[pos_v - 1] : nil %>
|
||||
<% prox_v = pos_v && pos_v < nomes_v.size - 1 ? nomes_v[pos_v + 1] : nil %>
|
||||
<% base_v = 'flex-1 min-h-[48px] flex items-center justify-center rounded-xl border' %>
|
||||
<% if ant_v %>
|
||||
<a href="<%= admin_romaneio_path(@romaneio, veiculo: ant_v) %>" aria-label="Veículo anterior"
|
||||
class="<%= base_v %> bg-[#1a1a1a] border-white/10 text-white hover:bg-[#242424]">‹</a>
|
||||
<% else %>
|
||||
<span class="<%= base_v %> bg-[#1a1a1a]/50 border-white/5 text-gray-600">‹</span>
|
||||
<% end %>
|
||||
<% if prox_v %>
|
||||
<a href="<%= admin_romaneio_path(@romaneio, veiculo: prox_v) %>" aria-label="Próximo veículo"
|
||||
class="<%= base_v %> bg-[#1a1a1a] border-white/10 text-white hover:bg-[#242424]">›</a>
|
||||
<% else %>
|
||||
<span class="<%= base_v %> bg-[#1a1a1a]/50 border-white/5 text-gray-600">›</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="pt-1 border-t border-white/5">
|
||||
<label class="block text-sm font-medium text-gray-300 mb-1.5 mt-3">
|
||||
<div class="pt-4 mt-1 border-t border-white/5">
|
||||
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Motorista deste veículo
|
||||
<span class="text-gray-500 font-normal">— só na tela</span>
|
||||
</label>
|
||||
@@ -62,21 +75,25 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 pt-1">
|
||||
<%# A prévia NÃO tem botão aqui: ela é o bloco recolhível no topo da coluna
|
||||
ao lado (`_previa`), aberto pelo próprio navegador. Um segundo botão que
|
||||
dependesse de JavaScript para abrir aquele bloco voltaria a ficar morto
|
||||
quando os assets falhassem — que é justamente o que se está evitando. %>
|
||||
<div class="space-y-3 pt-4 mt-4 border-t border-white/5">
|
||||
<%# Link, não botão: abre o pop-up da prévia pelo `:target` do CSS (ver
|
||||
`_previa`), então continua funcionando com o JavaScript fora do ar — foi
|
||||
o botão daqui que ficou morto três vezes seguidas. %>
|
||||
<a href="#previa"
|
||||
class="w-full min-h-[48px] flex items-center justify-center gap-2 bg-[#1a1a1a]
|
||||
hover:bg-[#242424] text-white border border-white/10 rounded-xl">
|
||||
<%= icone :visualizar, cor: nil, espaco: false %> Ver prévia do PDF
|
||||
</a>
|
||||
<%= link_to pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo),
|
||||
target: '_blank', rel: 'noopener',
|
||||
class: 'w-full min-h-[48px] flex items-center justify-center gap-2 bg-[#1a1a1a]
|
||||
hover:bg-[#242424] text-white border border-white/10 rounded-xl' do %>
|
||||
<%= icone :baixar, cor: nil %> PDF deste veículo
|
||||
<%= icone :baixar, cor: nil, espaco: false %> PDF deste veículo
|
||||
<% end %>
|
||||
<%= link_to pdf_admin_romaneio_path(@romaneio),
|
||||
class: 'w-full min-h-[48px] flex items-center justify-center gap-2 bg-[#f97316]
|
||||
hover:bg-orange-500 text-white font-semibold rounded-xl' do %>
|
||||
<%= icone :baixar, cor: nil %> PDF de TODOS os veículos
|
||||
<%= icone :baixar, cor: nil, espaco: false %> PDF de TODOS os veículos
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<%# app/views/admin/romaneios/show.html.erb
|
||||
Editor do romaneio: veículos à esquerda, tabela editável à direita, e o PDF
|
||||
REAL numa prévia recolhível no topo da coluna de edição (partial `_previa`,
|
||||
que explica por que ela é <details> nativo e não um modal com JavaScript). %>
|
||||
REAL num pop-up com navegação entre as folhas (partial `_previa`, que explica
|
||||
por que abrir/fechar/trocar de folha é CSS puro e não JavaScript). %>
|
||||
<div class="space-y-5"
|
||||
data-controller="romaneio"
|
||||
data-action="hashchange@window->romaneio#aoTrocarHash"
|
||||
data-romaneio-url-value="<%= admin_romaneio_path(@romaneio) %>"
|
||||
data-romaneio-pdf-url-value="<%= pdf_admin_romaneio_path(@romaneio) %>"
|
||||
data-romaneio-veiculo-value="<%= @veiculo %>">
|
||||
@@ -64,22 +65,24 @@
|
||||
<%= render 'operacao' %>
|
||||
<%= render 'avisos' %>
|
||||
|
||||
<%# Duas zonas na tela: VEÍCULOS e a edição. A prévia é o bloco fechado no topo
|
||||
da coluna de edição — o PDF só é gerado quando alguém o abre (antes o
|
||||
<iframe> era montado em TODO carregamento, gerando um PDF no servidor para
|
||||
ficar num canto que o operador nem sempre olha). %>
|
||||
<%# Duas zonas na tela: VEÍCULOS e a edição. A prévia é o pop-up mais abaixo —
|
||||
o PDF só é gerado quando alguém o abre (antes o <iframe> era montado em
|
||||
TODO carregamento, gerando um PDF no servidor para ficar num canto que o
|
||||
operador nem sempre olha). %>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,260px)_minmax(0,1fr)] gap-5 items-start">
|
||||
<div class="lg:sticky lg:top-4">
|
||||
<%= render 'veiculos' %>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<%= render 'previa' %>
|
||||
<%= render 'controles' %>
|
||||
<%= render 'tabela', linhas: @linhas %>
|
||||
<%= render 'removidas', linhas: @removidas %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# Pop-up da prévia: FORA da grade porque cobre a tela inteira quando
|
||||
aberto (`:target`). Fechado não ocupa espaço nem busca o PDF. %>
|
||||
<%= render 'previa' %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@@ -141,6 +141,15 @@ if [ "${RAILS_ENV:-development}" = "production" ]; then
|
||||
log "ERRO: assets:precompile falhou — o sistema vai subir SEM JS/CSS novos."
|
||||
log " Rode 'docker compose exec app bundle exec rails assets:precompile'"
|
||||
log " e veja o erro completo."
|
||||
# Causa já vista (28/08/2026), e que não se anuncia: a tarefa
|
||||
# `tailwindcss:build` roda DENTRO do precompile e aborta tudo se
|
||||
# app/assets/tailwind/application.css não existir. Se o arquivo sumir de
|
||||
# novo, o log abaixo aponta direto para ele em vez de mandar caçar.
|
||||
if [ ! -f app/assets/tailwind/application.css ]; then
|
||||
log " CAUSA PROVÁVEL: falta app/assets/tailwind/application.css, exigido"
|
||||
log " por tailwindcss:build (gem tailwindcss-rails). Leia o cabeçalho"
|
||||
log " desse arquivo no repositório antes de recriá-lo."
|
||||
fi
|
||||
fi
|
||||
else
|
||||
# Em development o Propshaft calcula o digest do arquivo atual a cada
|
||||
|
||||
Reference in New Issue
Block a user