From a13b340bde3bff1753a434351517d9b54762ce8e Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 16 May 2024 13:58:06 +0200
Subject: [PATCH] add loading indicator for analaysis
---
frontend/app.vue | 1 +
frontend/components/AnalysisList.vue | 18 ++++++++++++------
frontend/composables/useFetchAnalysis.ts | 2 --
frontend/plugins/api.ts | 1 -
frontend/server/api/auth.get.ts | 4 ----
5 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/frontend/app.vue b/frontend/app.vue
index 5aada8f..d926bd7 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,5 +1,6 @@
<template>
<div>
+ <NuxtLoadingIndicator />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
diff --git a/frontend/components/AnalysisList.vue b/frontend/components/AnalysisList.vue
index 8ec5158..ed529ac 100644
--- a/frontend/components/AnalysisList.vue
+++ b/frontend/components/AnalysisList.vue
@@ -12,11 +12,11 @@ const sanitizedAnalyses = computed(() => {
const createTimeDate = new Date(a.create_time)
return {
...a,
- create_time: createTimeDate.toLocaleString()
+ create_time: createTimeDate.toLocaleString(),
}
}) ?? [] : []
})
-
+const analysisPendings = ref<Record<string, boolean>>({"1": false})
function getResultArchiveUrl(analysisId: number) {
return joinURL(runtimeConfig.public.dfApiPrefix, `/analysis/${analysisId}/results-archive`)
}
@@ -62,8 +62,16 @@ function cancelEdit() {
toEdit.value = null
newTitle.value = null
}
+
+
async function goToAnalysis(analysisId: number) {
- await navigateTo(`/analyses/${analysisId}/systems`)
+ const analysisPendingsVal = toValue(analysisPendings)
+ try {
+ analysisPendingsVal[analysisId] = true
+ await navigateTo(`/analyses/${analysisId}/systems`)
+ } catch (error) {
+ throw createError("Unable to get analysis data")
+ }
}
const options = computed(() => {
return {
@@ -81,7 +89,6 @@ const { data, refresh, pending, error } = await useAPI<Analysis[]>('/analysis/',
usePolling(options)
if (error.value) {
- console.log(error.value)
const toValError = toValue(error)
if (toValError?.data) {
@@ -92,7 +99,6 @@ if (error.value) {
data: toValError?.data ?? ""
})
} else {
- console.log(error.value)
throw createError("Unable to get the analysis")
}
@@ -181,7 +187,7 @@ if (sessionError.value) {
</v-list>
</v-menu>
<v-divider vertical inset class="mx-1"></v-divider>
- <v-btn variant="text" append-icon="md:navigate_next" @click="goToAnalysis(analysis.raw.id)">Results
+ <v-btn variant="text" append-icon="md:navigate_next" :loading="analysisPendings?.[analysis.raw.id] ?? false" @click="goToAnalysis(analysis.raw.id)">Results
</v-btn>
</div>
</template>
diff --git a/frontend/composables/useFetchAnalysis.ts b/frontend/composables/useFetchAnalysis.ts
index 1060651..df0c97f 100644
--- a/frontend/composables/useFetchAnalysis.ts
+++ b/frontend/composables/useFetchAnalysis.ts
@@ -9,7 +9,6 @@ export function useAnalysisPolling(options: MaybeRef<AnalysisPollingOptions> = {
const { interval, refresh, pending, data } = toValue(options)
const { pause, resume, isActive } = useIntervalFn(() => {
- console.log("je suis dans le polling")
if (!pending.value) {
console.log(
`pending ${pending.value
@@ -25,7 +24,6 @@ export function useAnalysisPolling(options: MaybeRef<AnalysisPollingOptions> = {
watchEffect(() => {
if (data.value?.status !== undefined) {
- console.log(data.value.status)
if (terminalStates.value.has(data.value.status) && pause != null) {
pause();
}
diff --git a/frontend/plugins/api.ts b/frontend/plugins/api.ts
index 57f7964..8d66b65 100644
--- a/frontend/plugins/api.ts
+++ b/frontend/plugins/api.ts
@@ -5,7 +5,6 @@ export default defineNuxtPlugin(() => {
const $api = $fetch.create({
baseURL: "/dfapi",
async onRequest({ request, options, error }) {
- console.log("dans le on request du create")
const { data } = await useFetch("/api/auth", { headers })
const toValToken = toValue(csrfToken)
if (toValToken !== undefined) {
diff --git a/frontend/server/api/auth.get.ts b/frontend/server/api/auth.get.ts
index 6c40fc1..87bc5b3 100644
--- a/frontend/server/api/auth.get.ts
+++ b/frontend/server/api/auth.get.ts
@@ -10,10 +10,6 @@ const sessionExpiryDate = useState('sessionExpiryDate')
export default defineEventHandler(async (event) => {
-
-
- console.log("je suis dans le point api auth du server nuxt")
-
const loginUrl = joinURL(
runtimeConfig.serverSideApiBaseUrl,
runtimeConfig.dfApiPrefix,
--
GitLab