refactor: now using KRequestProgressBar and useErrors composable from…

… KDK
kalisio · Jan 22, 2025 · 08fdcbc · 08fdcbc
1 parent 6eaee64
commit 08fdcbc
Showing 1 changed file with 6 additions and 96 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -2,113 +2,23 @@
   <!-- Don't drop "q-app" class -->
   <div id="q-app">
     <!-- Progress bar -->
-    <q-ajax-bar 
-      ref="progessBarRef" 
-      position="bottom" 
-      size="8px" 
-      color="primary" 
-      :delay="250">
-    </q-ajax-bar>
+    <KRequestProgressBar />
     <!-- App content -->
     <router-view v-if="isKDKCoreInitialized">
     </router-view>
   </div>
 </template>
 
 <script setup>
-import _ from 'lodash'
-import logger from 'loglevel'
-import { ref, watch, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
 import { useQuasar } from 'quasar'
-import { Store, Events, i18n, utils as kdkCoreUtils } from '@kalisio/kdk/core.client'
+import { Store, composables as kdkCoreComposables, utils as kdkCoreUtils } from '@kalisio/kdk/core.client'
+import KRequestProgressBar from '@kalisio/kdk/core/client/components/app/KRequestProgressBar.vue'
 
-// Data
 const $q = useQuasar()
-const Route = useRoute()
-const isKDKCoreInitialized = Store.get('kdk.core.initialized')
-const progessBarRef = ref(null)
-let nbRequests = 0
-let nbCompletedRequests = 0
-let isProgressBarActive = false
-
-// Funcrions
-function showError (error) {
-  // Check if this error is a quiet one or not
-  if (error.ignore) {
-    // In this case simply log
-    logger.error(error)
-    return
-  }
-  const notification = { type: 'negative', message: error.message || error.error_message, html: true }
-  // Check if user can retry to avoid this error
-  if (error.retryHandler) {
-    notification.actions = [{
-      label: this.$t('RETRY'),
-      handler: error.retryHandler
-    }]
-    // Increase timeout so that user has a chance to retry
-    notification.timeout = 20000
-  }
-  $q.notify(notification)
-}
-function showRouteError (route) {
-  // We handle error on any page with query string
-  if (route.query && route.query.error_message) {
-    showError(route.query)
-  }
-}
-function addRequest () {
-  nbRequests++
-  if (progessBarRef.value && !isProgressBarActive && (nbRequests > nbCompletedRequests)) {
-    progessBarRef.value.start()
-    isProgressBarActive = true
-  }
-}
-function addCompletedRequest () {
-  nbCompletedRequests++
-  if (progessBarRef.value && isProgressBarActive && (nbRequests <= nbCompletedRequests)) {
-    isProgressBarActive = false
-    progessBarRef.value.stop()
-  }
-}
+kdkCoreComposables.useErrors()
 
-// Watch
-watch(Route, (to, from) => showRouteError(to))
-
-// Hooks
-onMounted(() => {
-  showRouteError(Route)
-  Events.on('before-hook', hook => {
-    addRequest()
-  })
-  Events.on('after-hook', hook => {
-    addCompletedRequest()
-  })
-  Events.on('error-hook', hook => {
-    addCompletedRequest()
-    // Forward to global error handler
-    Events.emit('error', hook.error)
-  })
-  Events.on('error', error => {
-    // Translate the message if a translation key exists
-    const translation = _.get(error, 'data.translation')
-    if (translation) {
-      error.message = i18n.tie('errors.' + translation.key, translation.params)
-      if (translation.keys) {
-        translation.keys.forEach(key => {
-          error.message += '<br/>' + i18n.tie('errors.' + key, translation.params)
-        })
-      }
-    } else {
-      // Overwrite the message using error code
-      if (error.code) {
-        error.message = i18n.tie('errors.' + error.code)
-      }
-    }
-    showError(error)
-  })
-})
+// Data
+const isKDKCoreInitialized = Store.get('kdk.core.initialized')
 
 // Immediate
 $q.iconMapFn = kdkCoreUtils.mapIconFunction