refactor: update modal z-index for improved visibility and enhance alert deletion confirmation with additional messaging and logging; ensure fallback for user data in diagnostics card

This commit is contained in:
2025-12-10 06:44:29 -03:00
parent d27c0b6f91
commit 9f523d99a5
5 changed files with 40 additions and 21 deletions

View File

@@ -25,7 +25,7 @@
{#if open} {#if open}
<div <div
class="pointer-events-none fixed inset-0 z-50" class="pointer-events-none fixed inset-0 z-[9999]"
style="animation: fadeIn 0.2s ease-out;" style="animation: fadeIn 0.2s ease-out;"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"

View File

@@ -34,7 +34,7 @@
{#if open} {#if open}
<div <div
class="pointer-events-none fixed inset-0 z-50" class="pointer-events-none fixed inset-0 z-[9999]"
style="animation: fadeIn 0.2s ease-out;" style="animation: fadeIn 0.2s ease-out;"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"

View File

@@ -114,14 +114,19 @@
} }
function handleDeleteClick(alertId: Id<'alertConfigurations'>) { function handleDeleteClick(alertId: Id<'alertConfigurations'>) {
confirmMessage = 'Tem certeza que deseja deletar este alerta?'; confirmMessage = 'Tem certeza que deseja deletar este alerta? Esta ação não pode ser desfeita.';
confirmCallback = () => deleteAlert(alertId); confirmCallback = () => deleteAlert(alertId);
showConfirmModal = true; showConfirmModal = true;
console.log('Modal de confirmação aberto para deletar alerta:', alertId);
} }
async function deleteAlert(alertId: Id<'alertConfigurations'>) { async function deleteAlert(alertId: Id<'alertConfigurations'>) {
try { try {
console.log('Deletando alerta:', alertId);
await client.mutation(api.monitoramento.deletarAlerta, { alertId }); await client.mutation(api.monitoramento.deletarAlerta, { alertId });
console.log('Alerta deletado com sucesso');
// Aguardar um pouco para garantir que a query seja atualizada
await new Promise(resolve => setTimeout(resolve, 200));
} catch (error) { } catch (error) {
console.error('Erro ao deletar alerta:', error); console.error('Erro ao deletar alerta:', error);
alertMessage = 'Erro ao deletar alerta. Tente novamente.'; alertMessage = 'Erro ao deletar alerta. Tente novamente.';
@@ -557,12 +562,14 @@
message={confirmMessage} message={confirmMessage}
confirmText="Deletar" confirmText="Deletar"
cancelText="Cancelar" cancelText="Cancelar"
onConfirm={() => { onConfirm={async () => {
if (confirmCallback) { if (confirmCallback) {
confirmCallback(); await confirmCallback();
confirmCallback = null; confirmCallback = null;
} }
showConfirmModal = false; showConfirmModal = false;
// Aguardar um pouco para garantir que a query seja atualizada
await new Promise(resolve => setTimeout(resolve, 200));
}} }}
onCancel={() => { onCancel={() => {
confirmCallback = null; confirmCallback = null;

View File

@@ -38,7 +38,19 @@
<span>Erro ao carregar diagnóstico</span> <span>Erro ao carregar diagnóstico</span>
</div> </div>
{:else} {:else}
{@const config = configQuery} {@const config = configQuery || {
templateExiste: false,
templateInfo: null,
roleTiMasterExiste: false,
usuariosTiMaster: [],
configSmtpAtiva: false,
configSmtpInfo: null,
emailsPendentes: 0,
emailsFalha: 0,
alertasAtivos: 0,
alertasComEmail: 0
}}
{@const usuariosTiMaster = Array.isArray(config.usuariosTiMaster) ? config.usuariosTiMaster : []}
<!-- Template --> <!-- Template -->
<div class="divider">Template de Email</div> <div class="divider">Template de Email</div>
@@ -80,7 +92,7 @@
<div class="flex-1"> <div class="flex-1">
<p class="font-semibold text-success">Perfil TI_MASTER encontrado</p> <p class="font-semibold text-success">Perfil TI_MASTER encontrado</p>
<p class="text-sm text-base-content/70"> <p class="text-sm text-base-content/70">
{config.usuariosTiMaster.length} usuário(s) com este perfil {usuariosTiMaster?.length || 0} usuário(s) com este perfil
</p> </p>
</div> </div>
{:else} {:else}
@@ -98,18 +110,18 @@
</div> </div>
<!-- Usuários TI_MASTER --> <!-- Usuários TI_MASTER -->
{#if config.usuariosTiMaster.length > 0} {#if usuariosTiMaster.length > 0}
<div class="ml-10 mt-2 space-y-2"> <div class="ml-10 mt-2 space-y-2">
{#each config.usuariosTiMaster as usuario} {#each usuariosTiMaster as usuario}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
{#if usuario.temEmail} {#if usuario?.temEmail}
<CheckCircle class="h-4 w-4 text-success" /> <CheckCircle class="h-4 w-4 text-success" />
{:else} {:else}
<XCircle class="h-4 w-4 text-error" /> <XCircle class="h-4 w-4 text-error" />
{/if} {/if}
<span class="text-sm"> <span class="text-sm">
{usuario.nome} {usuario?.nome || 'Usuário desconhecido'}
{#if usuario.email} {#if usuario?.email}
<span class="text-base-content/60">({usuario.email})</span> <span class="text-base-content/60">({usuario.email})</span>
{:else} {:else}
<span class="text-error"> - Sem email cadastrado</span> <span class="text-error"> - Sem email cadastrado</span>
@@ -179,8 +191,8 @@
<!-- Resumo --> <!-- Resumo -->
<div class="divider">Resumo</div> <div class="divider">Resumo</div>
<div class="alert {config.templateExiste && config.roleTiMasterExiste && config.usuariosTiMaster.some(u => u.temEmail) && config.configSmtpAtiva ? 'alert-success' : 'alert-warning'}"> <div class="alert {config.templateExiste && config.roleTiMasterExiste && usuariosTiMaster.some(u => u?.temEmail) && config.configSmtpAtiva ? 'alert-success' : 'alert-warning'}">
{#if config.templateExiste && config.roleTiMasterExiste && config.usuariosTiMaster.some(u => u.temEmail) && config.configSmtpAtiva} {#if config.templateExiste && config.roleTiMasterExiste && usuariosTiMaster.some(u => u?.temEmail) && config.configSmtpAtiva}
<CheckCircle class="h-6 w-6" /> <CheckCircle class="h-6 w-6" />
<div> <div>
<p class="font-semibold">✅ Sistema configurado corretamente</p> <p class="font-semibold">✅ Sistema configurado corretamente</p>

View File

@@ -67,15 +67,15 @@
</div> </div>
{/if} {/if}
<!-- Diagnóstico de Configuração -->
<div class="mb-6">
{#if !hasError}
<AlertDiagnosticsCard />
{/if}
</div>
<!-- Card de Monitoramento --> <!-- Card de Monitoramento -->
{#if !hasError} {#if !hasError}
<SystemMonitorCardLocal /> <SystemMonitorCardLocal />
{/if} {/if}
<!-- Diagnóstico de Configuração -->
<div class="mb-6 mt-6">
{#if !hasError}
<AlertDiagnosticsCard />
{/if}
</div>
</div> </div>