refactor: streamline dashboard page and improve error handling
- Removed unnecessary refresh logic for monitoring queries to enhance performance. - Updated error handling to ensure proper type casting and improved URL management. - Simplified the rendering of components and improved the overall structure for better readability. - Added a user-friendly error message for cases when dashboard data fails to load.
This commit is contained in:
@@ -32,9 +32,6 @@
|
||||
>(null);
|
||||
let redirectRoute = $state("");
|
||||
|
||||
// Forçar atualização das queries de monitoramento a cada 1 segundo
|
||||
let refreshKey = $state(0);
|
||||
|
||||
// Limpar URL após navegação estar completa
|
||||
afterNavigate(({ to }) => {
|
||||
if (to?.url.searchParams.has("error")) {
|
||||
@@ -42,7 +39,7 @@
|
||||
const route = to.url.searchParams.get("route") || to.url.searchParams.get("redirect") || "";
|
||||
|
||||
if (error) {
|
||||
alertType = error as any;
|
||||
alertType = error as typeof alertType;
|
||||
redirectRoute = route;
|
||||
showAlert = true;
|
||||
|
||||
@@ -53,10 +50,12 @@
|
||||
|
||||
// Limpar URL usando SvelteKit (após router estar inicializado)
|
||||
try {
|
||||
replaceState(to.url.pathname, {});
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
replaceState(resolve(to.url.pathname as any), {});
|
||||
} catch {
|
||||
// Se ainda não estiver pronto, usar goto com replaceState
|
||||
goto(to.url.pathname, { replaceState: true, noScroll: true });
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
goto(resolve(to.url.pathname as any), { replaceState: true, noScroll: true });
|
||||
}
|
||||
|
||||
// Auto-fechar após 10 segundos
|
||||
@@ -68,8 +67,6 @@
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
mounted = true;
|
||||
|
||||
// Verificar se há erro na URL ao carregar a página
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.has("error")) {
|
||||
@@ -81,10 +78,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Atualizar relógio e forçar refresh das queries a cada segundo
|
||||
// Atualizar relógio a cada segundo
|
||||
const interval = setInterval(() => {
|
||||
currentTime = new Date();
|
||||
refreshKey = (refreshKey + 1) % 1000; // Incrementar para forçar re-render
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
@@ -163,15 +159,14 @@
|
||||
{#if alertType === "access_denied"}
|
||||
<div class="mt-3 flex gap-2">
|
||||
<a href={resolve("/abrir-chamado")} class="btn btn-sm btn-primary">
|
||||
<svelte:component
|
||||
this={UserPlus}
|
||||
<UserPlus
|
||||
class="h-4 w-4"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
Abrir Chamado
|
||||
</a>
|
||||
<a href={resolve("/ti")} class="btn btn-sm btn-ghost">
|
||||
<svelte:component this={Mail} class="h-4 w-4" strokeWidth={2} />
|
||||
<Mail class="h-4 w-4" strokeWidth={2} />
|
||||
Contatar TI
|
||||
</a>
|
||||
</div>
|
||||
@@ -207,7 +202,7 @@
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
{" - "}
|
||||
-
|
||||
{currentTime.toLocaleTimeString("pt-BR")}
|
||||
</p>
|
||||
</div>
|
||||
@@ -606,7 +601,7 @@
|
||||
<div
|
||||
class="absolute left-0 top-0 bottom-8 w-10 flex flex-col justify-between text-right pr-2"
|
||||
>
|
||||
{#each [10, 8, 6, 4, 2, 0] as val}
|
||||
{#each [10, 8, 6, 4, 2, 0] as val (val)}
|
||||
<span class="text-xs text-base-content/60">{val}</span>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -614,7 +609,7 @@
|
||||
<!-- Grid e Barras -->
|
||||
<div class="absolute left-12 right-4 top-0 bottom-8">
|
||||
<!-- Grid horizontal -->
|
||||
{#each Array.from({ length: 6 }) as _, i}
|
||||
{#each [0, 1, 2, 3, 4, 5] as i (i)}
|
||||
<div
|
||||
class="absolute left-0 right-0 border-t border-base-content/10"
|
||||
style="top: {(i / 5) * 100}%;"
|
||||
@@ -623,7 +618,7 @@
|
||||
|
||||
<!-- Barras de atividade -->
|
||||
<div class="flex items-end justify-around h-full gap-1">
|
||||
{#each atividade.historico as ponto, idx}
|
||||
{#each atividade.historico as ponto, idx (idx)}
|
||||
<div class="flex-1 flex items-end gap-0.5 h-full group relative">
|
||||
<!-- Entradas (verde) -->
|
||||
<div
|
||||
@@ -828,6 +823,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Mensagem de erro ou estado vazio -->
|
||||
<div class="alert alert-warning">
|
||||
<span>Não foi possível carregar os dados do dashboard.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</ProtectedRoute>
|
||||
|
||||
Reference in New Issue
Block a user