refactor: use named navigation

Signed-off-by: Pedro Lamas <[email protected]>
fluidd-core · Nov 5, 2024 · c720446 · c720446
1 parent 4363ed3
commit c720446
Show file tree

Hide file tree

Showing 20 changed files with 86 additions and 73 deletions.
diff --git a/src/components/layout/AppBar.vue b/src/components/layout/AppBar.vue
@@ -8,7 +8,7 @@
   >
     <router-link
       v-if="!isMobileViewport"
-      to="/"
+      :to="{ name: 'home' }"
       class="toolbar-logo"
     >
       <app-icon />
@@ -29,7 +29,7 @@
 
       <v-toolbar-title class="printer-title text--secondary">
         <router-link
-          to="/"
+          :to="{ name: 'home' }"
           v-html="instanceName"
         />
       </v-toolbar-title>

diff --git a/src/components/layout/AppNavDrawer.vue b/src/components/layout/AppNavDrawer.vue
@@ -22,7 +22,7 @@
           :style="`height: ${$globals.HEADER_HEIGHT}px;`"
           class="app-icon"
         >
-          <router-link to="/">
+          <router-link :to="{ name: 'home' }">
             <app-icon />
           </router-link>
         </div>
@@ -34,80 +34,80 @@
           <app-nav-item
             icon="$dash"
             exact
-            to="/"
+            to="home"
           >
             {{ $t('app.general.title.home') }}
           </app-nav-item>
 
           <app-nav-item
             icon="$console"
-            to="/console"
+            to="console"
           >
             {{ $t('app.general.title.console') }}
           </app-nav-item>
 
           <app-nav-item
             icon="$cubeScan"
-            to="/preview"
+            to="preview"
           >
             {{ $t('app.general.title.gcode_preview') }}
           </app-nav-item>
 
           <app-nav-item
             icon="$files"
-            to="/jobs"
+            to="jobs"
           >
             {{ $t('app.general.title.jobs') }}
           </app-nav-item>
 
           <app-nav-item
             v-if="supportsHistory"
             icon="$history"
-            to="/history"
+            to="history"
           >
             {{ $t('app.general.title.history') }}
           </app-nav-item>
 
           <app-nav-item
             v-if="supportsTimelapse"
             icon="$video"
-            to="/timelapse"
+            to="timelapse"
           >
             {{ $t('app.general.title.timelapse') }}
           </app-nav-item>
 
           <app-nav-item
             icon="$tune"
-            to="/tune"
+            to="tune"
           >
             {{ $t('app.general.title.tune') }}
           </app-nav-item>
 
           <app-nav-item
             v-if="enableDiagnostics"
             icon="$chart"
-            to="/diagnostics"
+            to="diagnostics"
           >
             {{ $t('app.general.title.diagnostics') }}
           </app-nav-item>
 
           <app-nav-item
             icon="$codeJson"
-            to="/configure"
+            to="configure"
           >
             {{ $t('app.general.title.configure') }}
           </app-nav-item>
 
           <app-nav-item
             icon="$desktopTower"
-            to="/system"
+            to="system"
           >
             {{ $t('app.general.title.system') }}
           </app-nav-item>
 
           <app-nav-item
             icon="$cog"
-            to="/settings"
+            to="settings"
           >
             {{ $t('app.general.title.settings') }}
           </app-nav-item>

diff --git a/src/components/layout/AppSettingsNav.vue b/src/components/layout/AppSettingsNav.vue
@@ -11,7 +11,7 @@
       <v-list-item
         v-if="item.visible"
         :key="item.name"
-        :to="`/settings${item.hash}`"
+        :to="{ name: 'settings', hash: item.hash }"
         :exact="false"
         link
       >

diff --git a/src/components/layout/AppUserMenu.vue b/src/components/layout/AppUserMenu.vue
@@ -59,7 +59,7 @@
         dense
         class="py-0"
       >
-        <v-list-item @click="$filters.routeTo($router, '/settings#auth')">
+        <v-list-item @click="$filters.routeTo({ name: 'settings', hash: '#auth' })">
           <v-list-item-icon>
             <v-icon>$addAccount</v-icon>
           </v-list-item-icon>

diff --git a/src/components/settings/macros/MacroCategorySettings.vue b/src/components/settings/macros/MacroCategorySettings.vue
@@ -128,7 +128,7 @@ const routeGuard = (to: Route): Parameters<NavigationGuardNext>[0] => {
   const categories = store.getters['macros/getCategories']
   const i = categories.findIndex((c: MacroCategory) => c.id === id)
   if (id !== '0' && i === -1) {
-    return { path: '/settings', hash: 'macros' } satisfies Location
+    return { name: 'settings', hash: '#macros' } satisfies Location
   }
 }
 
@@ -170,11 +170,11 @@ export default class MacroCategorySettings extends Vue {
     }
   }
 
-  beforeRouteEnter (to: Route, from: Route, next: NavigationGuardNext<Vue>) {
+  beforeRouteEnter (to: Route, from: Route, next: NavigationGuardNext) {
     next(routeGuard(to))
   }
 
-  beforeRouteUpdate (to: Route, from: Route, next: NavigationGuardNext<Vue>) {
+  beforeRouteUpdate (to: Route, from: Route, next: NavigationGuardNext) {
     next(routeGuard(to))
   }
 

diff --git a/src/components/settings/macros/MacroSettings.vue b/src/components/settings/macros/MacroSettings.vue
@@ -176,8 +176,13 @@ export default class MacroSettings extends Mixins(StateMixin) {
   }
 
   handleCategoryClick (category?: MacroCategory) {
-    const id = category?.id ?? 0
-    this.$router.push(`/settings/macros/${id}`)
+    const categoryId = category?.id ?? '0'
+    this.$router.push({
+      name: 'settings_macro_category',
+      params: {
+        categoryId
+      }
+    })
   }
 }
 </script>
diff --git a/src/components/ui/AppNavItem.vue b/src/components/ui/AppNavItem.vue
@@ -5,7 +5,7 @@
   >
     <template #activator="{ attrs, on }">
       <v-list-item
-        :to="to"
+        :to="{ name: to }"
         :exact="exact"
         link
         color="secondary"
@@ -55,15 +55,9 @@ export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
   readonly icon?: string
 
   get accelerator (): string | undefined {
-    if (this.to) {
-      const destination = this.to === '/'
-        ? 'home'
-        : this.to.substring(1)
-
-      return isKeyOf(destination, Globals.KEYBOARD_SHORTCUTS)
-        ? Globals.KEYBOARD_SHORTCUTS[destination]
-        : undefined
-    }
+    return isKeyOf(this.to, Globals.KEYBOARD_SHORTCUTS)
+      ? Globals.KEYBOARD_SHORTCUTS[this.to]
+      : undefined
   }
 
   get enableKeyboardShortcuts (): boolean {
@@ -83,11 +77,11 @@ export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
     if (
       shortcut === this.accelerator &&
       !eventTargetIsContentEditable(event) &&
-      this.$router.currentRoute.path !== this.to
+      this.$router.currentRoute.name !== this.to
     ) {
       event.preventDefault()
 
-      this.$router.push(this.to)
+      this.$router.push({ name: this.to })
     }
   }
 

diff --git a/src/components/widgets/bedmesh/BedMeshCard.vue b/src/components/widgets/bedmesh/BedMeshCard.vue
@@ -48,7 +48,7 @@
         x-small
         text
         class="ms-1 my-1"
-        @click="$filters.routeTo($router, '/tune')"
+        @click="$filters.routeTo({ name: 'tune' })"
       >
         <v-icon>$fullScreen</v-icon>
       </app-btn>

diff --git a/src/components/widgets/console/ConsoleCard.vue b/src/components/widgets/console/ConsoleCard.vue
@@ -32,7 +32,7 @@
         x-small
         text
         class="ms-1 my-1"
-        @click="$filters.routeTo($router, '/console')"
+        @click="$filters.routeTo({ name: 'console' })"
       >
         <v-icon>$fullScreen</v-icon>
       </app-btn>

diff --git a/src/components/widgets/filesystem/FileSystem.vue b/src/components/widgets/filesystem/FileSystem.vue
@@ -701,8 +701,11 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
 
       if (!gcode) return
 
-      if (this.$router.currentRoute.path !== '/' || !this.$store.getters['layout/isEnabledInCurrentLayout']('gcode-preview-card')) {
-        this.$router.push({ path: '/preview' })
+      if (
+        this.$router.currentRoute.name !== 'home' ||
+        !this.$store.getters['layout/isEnabledInCurrentLayout']('gcode-preview-card')
+      ) {
+        this.$router.push({ name: 'preview' })
       }
 
       this.$store.dispatch('gcodePreview/loadGcode', {
@@ -758,8 +761,8 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
     SocketActions.printerPrintStart(filename)
 
     // If we aren't on the dashboard, push the user back there.
-    if (this.$router.currentRoute.path !== '/') {
-      this.$router.push({ path: '/' })
+    if (this.$router.currentRoute.name !== 'home') {
+      this.$router.push({ name: 'home' })
     }
   }
 

diff --git a/src/components/widgets/gcode-preview/GcodePreviewCard.vue b/src/components/widgets/gcode-preview/GcodePreviewCard.vue
@@ -24,7 +24,7 @@
           x-small
           text
           class="ms-1 my-1"
-          @click="$filters.routeTo($router, '/preview')"
+          @click="$filters.routeTo({ name: 'preview' })"
         >
           <v-icon>$fullScreen</v-icon>
         </app-btn>

diff --git a/src/components/widgets/job-queue/JobQueueCard.vue b/src/components/widgets/job-queue/JobQueueCard.vue
@@ -46,7 +46,7 @@
         x-small
         text
         class="ms-1 my-1"
-        @click="$filters.routeTo($router, '/jobs')"
+        @click="$filters.routeTo({ name: 'jobs' })"
       >
         <v-icon>$fullScreen</v-icon>
       </app-btn>

diff --git a/src/components/widgets/jobs/JobsCard.vue b/src/components/widgets/jobs/JobsCard.vue
@@ -12,7 +12,7 @@
         fab
         x-small
         text
-        @click="$filters.routeTo($router, '/jobs')"
+        @click="$filters.routeTo({ name: 'jobs' })"
       >
         <v-icon>$fullScreen</v-icon>
       </app-btn>

diff --git a/src/components/widgets/macros/Macros.vue b/src/components/widgets/macros/Macros.vue
@@ -95,7 +95,7 @@ export default class Macros extends Mixins(StateMixin) {
   }
 
   handleEditCategory () {
-    this.$router.push('/settings/#macros')
+    this.$router.push({ name: 'settings', hash: '#macros' })
   }
 }
 </script>

diff --git a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
@@ -14,7 +14,7 @@
         x-small
         text
         class="ms-1 my-1"
-        @click="$filters.routeTo($router, '/tune')"
+        @click="$filters.routeTo({ name: 'tune' })"
       >
         <v-icon>$fullScreen</v-icon>
       </app-btn>

diff --git a/src/components/widgets/spoolman/SpoolSelectionDialog.vue b/src/components/widgets/spoolman/SpoolSelectionDialog.vue
@@ -496,8 +496,8 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
     if (this.filename) {
       await SocketActions.printerPrintStart(this.filename)
 
-      if (this.$router.currentRoute.path !== '/') {
-        this.$router.push({ path: '/' })
+      if (this.$router.currentRoute.name !== 'home') {
+        this.$router.push({ name: 'home' })
       }
     }
 

diff --git a/src/init.ts b/src/init.ts
@@ -223,12 +223,12 @@ export const appInit = async (apiConfig?: ApiConfig, hostConfig?: HostConfig): P
   await store.dispatch('init', { apiConfig, hostConfig, apiConnected })
 
   if (store.state.auth.authenticated) {
-    if (router.currentRoute.path === '/login') {
-      await router.push('/')
+    if (router.currentRoute.name === 'login') {
+      await router.push({ name: 'home' })
     }
   } else {
-    if (router.currentRoute.path !== '/login') {
-      await router.push('/login')
+    if (router.currentRoute.name !== 'login') {
+      await router.push({ name: 'login' })
     }
   }
 

diff --git a/src/plugins/filters.ts b/src/plugins/filters.ts
@@ -1,14 +1,16 @@
-import _Vue from 'vue'
-import VueRouter from 'vue-router'
+import type _Vue from 'vue'
+import { isNavigationFailure, NavigationFailureType, type RawLocation } from 'vue-router'
 import { camelCase, startCase, capitalize, isFinite, upperFirst } from 'lodash-es'
 import type { ApiConfig, TextSortOrder } from '@/store/config/types'
 import { TinyColor } from '@ctrl/tinycolor'
 import { DateFormats, Globals, TimeFormats, Waits, type DateTimeFormat } from '@/globals'
 import i18n from '@/plugins/i18n'
 import type { TranslateResult } from 'vue-i18n'
 import store from '@/store'
+import router from '@/router'
 import type { FileBrowserEntry } from '@/store/files/types'
 import versionStringCompare from '@/util/version-string-compare'
+import consola from 'consola'
 
 /**
  * credit: taken from Vuetify source
@@ -439,8 +441,15 @@ export const Filters = {
    * Simple approach to route somewhere when we don't necessarily want
    * route matching via :to
    */
-  routeTo (router: VueRouter, path: string) {
-    if (router.currentRoute.fullPath !== path) router.push(path)
+  async routeTo (to: RawLocation) {
+    try {
+      await router.push(to)
+    } catch (error) {
+      // Ignore any duplicate navigation error but log the others
+      if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
+        consola.error('[Router]', error)
+      }
+    }
   },
 
   /**