refactor: update pagination handling and improve navigation in settings components

- Refactored pagination setup in multiple settings components to include a name parameter for better context.
- Enhanced navigation buttons in the app bar and settings dialog to use 'to' for routing, aligning with Vue Router best practices.
- Improved loading state representation in the TwoPan component by replacing the skeleton loader with a spinner for a more user-friendly experience.

Author: tacxou

apps/web/src/components/core/twopan.vue

@@ -35,15 +35,10 @@ q-splitter.fit.q-custom-splitter.absolute.q-pa-sm(
         dense flat binary-state-sort
       )
         template(v-slot:loading)
-          q-inner-loading(showing color='primary')
-            .full-width.q-px-md
-              q-skeleton(
-                v-for='index in loadingSkeletonRows'
-                :key='`twopan-loading-row-${index}`'
-                type='text'
-                height='18px'
-                class='q-my-sm'
-              )
+          q-inner-loading(showing)
+            .column.items-center.q-gutter-sm
+              q-spinner-gears(size='46px')
+              .text-caption Chargement de la liste...
         template(v-slot:top="props")
           slot(name="before-top" v-bind="{ ...props, selected, clearSelection }")
             slot(name="before-top-left" v-bind="{ ...props, selected, clearSelection }")
@@ -244,11 +239,6 @@ export default defineNuxtComponent({
     },
   },
   computed: {
-    loadingSkeletonRows(): number {
-      const rowsPerPage = Number(this.pagination?.rowsPerPage) || 12
-
-      return Math.min(Math.max(rowsPerPage, 6), 20)
-    },
     visibleColumnsSelected(): QTableProps['visibleColumns'] {
       if (!this.visibleColumns || this.visibleColumns.length === 0) {
         return (this.columns || []).map((column) => column.name)

apps/web/src/components/layouts/default/appbar.vue

@@ -25,7 +25,7 @@
       )
 
       q-btn(
-        @click="$router.push('/settings/agents')"
+        to='/settings/agents'
         v-if="hasPermissionStartsWith(['/core', '/settings'])"
         icon="mdi-cog"
         size="md"

apps/web/src/pages/settings.vue

@@ -4,7 +4,7 @@ q-dialog(:model-value="true" transition-show='none' transition-hide='none' full-
     q-toolbar.bg-primary.text-white(flat)
       q-btn(flat @click="drawer = !drawer" round dense icon="mdi-menu")
       q-toolbar-title Paramètres
-      q-btn(icon="mdi-close" flat round dense @click="router.push('/')")
+      q-btn(icon="mdi-close" flat round dense to='/')
     .flex.fit(:style='{ flexDirection: $q.screen.gt.sm ? "row" : "column" }')
       .col-0
         q-tabs.full-height.border-right(
@@ -53,7 +53,8 @@ export default defineNuxtComponent({
     const tab = computed({
       get: () => router.currentRoute.value.path,
       set: (val: string) => {
-        window.location.href = val
+        // window.location.href = val
+        router.push(val)
       },
     })
     const drawer = ref(true)

apps/web/src/pages/settings/agents.vue

@@ -87,7 +87,7 @@ export default defineNuxtComponent({
     }
   },
   async setup() {
-    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination()
+    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination({ name: 'settings-agents' })
     const { toPathWithQueries, navigateToTab } = useRouteQueries()
 
     const paginationOptions = useHttpPaginationOptions()

apps/web/src/pages/settings/cron.vue

@@ -151,7 +151,7 @@ export default defineNuxtComponent({
     }
   },
   async setup() {
-    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination()
+    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination({ name: 'settings-cron' })
     const { toPathWithQueries, navigateToTab } = useRouteQueries()
     const { hasPermission } = useAccessControl()
     const { monacoOptions } = useDebug()

apps/web/src/pages/settings/keyrings.vue

@@ -71,7 +71,7 @@ export default defineNuxtComponent({
     }
   },
   async setup() {
-    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination()
+    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination({ name: 'settings-keyrings' })
     const { hasPermission } = useAccessControl()
     const paginationOptions = useHttpPaginationOptions()
 

apps/web/src/pages/settings/roles.vue

@@ -87,7 +87,7 @@ export default defineNuxtComponent({
     }
   },
   async setup() {
-    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination()
+    const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination({ name: 'settings-roles' })
     const { toPathWithQueries, navigateToTab } = useRouteQueries()
     const { hasPermission } = useAccessControl()