fix: improve ulr change handling for SettingsView

Author: yaroslav8765

adminforth/spa/src/components/UserMenuSettingsButton.vue

@@ -50,7 +50,6 @@ const showDropdown = ref(false);
 const props = defineProps(['meta', 'resource']);
 
 const options = computed(() => {
-  console.log('Returning setting pages', coreStore.config?.settingPages);
   return coreStore.config?.settingPages?.map((page) => {
     return {
       pageLabel: page.pageLabel,
@@ -69,13 +68,10 @@ function slugifyString(str: string): string {
 }
 
 function navigateTo(option: { slug?: string | null | undefined, pageLabel: string }) {
-  console.log('Navigating to option', option);
   if (option.slug) {
-    console.log('Navigating to settings page', option.slug);
-    router.push({ name: 'settings', query: { page: option.slug } });
+    router.push({ name: 'settings', params: { page: option.slug } });
   } else {
     const destinationSlug = slugifyString(option.pageLabel);
-    console.log('Navigating to settings page by label', destinationSlug);
     router.push({ name: 'settings', params: { page: destinationSlug } });
   }
 }

adminforth/spa/src/views/SettingsView.vue

@@ -68,7 +68,7 @@
     <div v-if="!coreStore?.config?.settingPages || coreStore?.config?.settingPages.length === 0">
       <p>No setting pages configured or still loading...</p>
     </div>
-      <VerticalTabs v-else ref="VerticalTabsRef" @update:active-tab="setURL({slug: $event, pageLabel: ''})">
+      <VerticalTabs v-else ref="VerticalTabsRef" v-model:active-tab="activeTab" @update:active-tab="setURL({slug: $event, pageLabel: ''})">
       <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`tab:${settingPageSlotName(c,i)}`" v-slot:['tab:'+settingPageSlotName(c,i)]>
         <div class="flex items-center justify-center whitespace-nowrap w-full px-4 gap-2" @click="setURL(c)">
           <component v-if="c.icon" :is="getIcon(c.icon)" class="w-5 h-5 group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
@@ -98,6 +98,7 @@ import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import adminforth from '@/adminforth';
 import { VerticalTabs } from '@/afcl'
 import { useRoute } from 'vue-router'
+import UserMenuSettingsButton from '../components/UserMenuSettingsButton.vue';
 
 const route = useRoute()
 const coreStore = useCoreStore();
@@ -111,6 +112,11 @@ const sideBarOpen = ref(false);
 const theme = ref('light');
 const dropdownUserButton = ref<HTMLElement | null>(null);
 const VerticalTabsRef = ref();
+const activeTab = ref('');
+
+watch(() => route?.params?.page, (val) => {
+  handleURLChange(val as string | null);
+});
 
 async function initRouter() {
   await router.isReady();
@@ -157,20 +163,7 @@ onMounted(async () => {
       setURL(coreStore.config.settingPages[0]);
     }
   } else {
-    let isParamInTabs;
-    for (const c of coreStore?.config?.settingPages || []) {
-      if (c.slug ? c.slug === routeParamsPage : slugifyString(c.pageLabel) === routeParamsPage) {
-        isParamInTabs = true;
-        break;
-      }
-    }
-    if (isParamInTabs) {
-      VerticalTabsRef.value.setActiveTab(routeParamsPage);
-    } else {
-      if (coreStore.config?.settingPages?.[0]) {
-        setURL(coreStore.config.settingPages[0]);
-      }
-    }
+    handleURLChange(routeParamsPage as string | null);
   }
 });
 
@@ -205,4 +198,22 @@ function setURL(item: {
     });
   }
 }
+
+function handleURLChange(val: string | null) {
+  let isParamInTabs;
+  for (const c of coreStore?.config?.settingPages || []) {
+    if (c.slug ? c.slug === val : slugifyString(c.pageLabel) === val) {
+      isParamInTabs = true;
+      break;
+    }
+  }
+  if (isParamInTabs) {
+    VerticalTabsRef.value.setActiveTab(val);
+    activeTab.value = val as string;
+  } else {
+    if (coreStore.config?.settingPages?.[0]) {
+      setURL(coreStore.config.settingPages[0]);
+    }
+  }
+}
 </script>