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);
|
>(null);
|
||||||
let redirectRoute = $state("");
|
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
|
// Limpar URL após navegação estar completa
|
||||||
afterNavigate(({ to }) => {
|
afterNavigate(({ to }) => {
|
||||||
if (to?.url.searchParams.has("error")) {
|
if (to?.url.searchParams.has("error")) {
|
||||||
@@ -42,7 +39,7 @@
|
|||||||
const route = to.url.searchParams.get("route") || to.url.searchParams.get("redirect") || "";
|
const route = to.url.searchParams.get("route") || to.url.searchParams.get("redirect") || "";
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
alertType = error as any;
|
alertType = error as typeof alertType;
|
||||||
redirectRoute = route;
|
redirectRoute = route;
|
||||||
showAlert = true;
|
showAlert = true;
|
||||||
|
|
||||||
@@ -53,10 +50,12 @@
|
|||||||
|
|
||||||
// Limpar URL usando SvelteKit (após router estar inicializado)
|
// Limpar URL usando SvelteKit (após router estar inicializado)
|
||||||
try {
|
try {
|
||||||
replaceState(to.url.pathname, {});
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
} catch (e) {
|
replaceState(resolve(to.url.pathname as any), {});
|
||||||
|
} catch {
|
||||||
// Se ainda não estiver pronto, usar goto com replaceState
|
// 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
|
// Auto-fechar após 10 segundos
|
||||||
@@ -68,8 +67,6 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
mounted = true;
|
|
||||||
|
|
||||||
// Verificar se há erro na URL ao carregar a página
|
// Verificar se há erro na URL ao carregar a página
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
if (urlParams.has("error")) {
|
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(() => {
|
const interval = setInterval(() => {
|
||||||
currentTime = new Date();
|
currentTime = new Date();
|
||||||
refreshKey = (refreshKey + 1) % 1000; // Incrementar para forçar re-render
|
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
@@ -163,15 +159,14 @@
|
|||||||
{#if alertType === "access_denied"}
|
{#if alertType === "access_denied"}
|
||||||
<div class="mt-3 flex gap-2">
|
<div class="mt-3 flex gap-2">
|
||||||
<a href={resolve("/abrir-chamado")} class="btn btn-sm btn-primary">
|
<a href={resolve("/abrir-chamado")} class="btn btn-sm btn-primary">
|
||||||
<svelte:component
|
<UserPlus
|
||||||
this={UserPlus}
|
|
||||||
class="h-4 w-4"
|
class="h-4 w-4"
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
/>
|
/>
|
||||||
Abrir Chamado
|
Abrir Chamado
|
||||||
</a>
|
</a>
|
||||||
<a href={resolve("/ti")} class="btn btn-sm btn-ghost">
|
<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
|
Contatar TI
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -207,7 +202,7 @@
|
|||||||
month: "long",
|
month: "long",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
})}
|
})}
|
||||||
{" - "}
|
-
|
||||||
{currentTime.toLocaleTimeString("pt-BR")}
|
{currentTime.toLocaleTimeString("pt-BR")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -606,7 +601,7 @@
|
|||||||
<div
|
<div
|
||||||
class="absolute left-0 top-0 bottom-8 w-10 flex flex-col justify-between text-right pr-2"
|
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>
|
<span class="text-xs text-base-content/60">{val}</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
@@ -614,7 +609,7 @@
|
|||||||
<!-- Grid e Barras -->
|
<!-- Grid e Barras -->
|
||||||
<div class="absolute left-12 right-4 top-0 bottom-8">
|
<div class="absolute left-12 right-4 top-0 bottom-8">
|
||||||
<!-- Grid horizontal -->
|
<!-- Grid horizontal -->
|
||||||
{#each Array.from({ length: 6 }) as _, i}
|
{#each [0, 1, 2, 3, 4, 5] as i (i)}
|
||||||
<div
|
<div
|
||||||
class="absolute left-0 right-0 border-t border-base-content/10"
|
class="absolute left-0 right-0 border-t border-base-content/10"
|
||||||
style="top: {(i / 5) * 100}%;"
|
style="top: {(i / 5) * 100}%;"
|
||||||
@@ -623,7 +618,7 @@
|
|||||||
|
|
||||||
<!-- Barras de atividade -->
|
<!-- Barras de atividade -->
|
||||||
<div class="flex items-end justify-around h-full gap-1">
|
<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">
|
<div class="flex-1 flex items-end gap-0.5 h-full group relative">
|
||||||
<!-- Entradas (verde) -->
|
<!-- Entradas (verde) -->
|
||||||
<div
|
<div
|
||||||
@@ -828,6 +823,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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}
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
|
|||||||
Reference in New Issue
Block a user