add tabs to query

src/pages/AdminSettings.vue

@@ -45,6 +45,8 @@
 
 <script lang="ts">
 import { Screen } from 'quasar';
+import { useRoute, useRouter } from 'vue-router';
+import { onBeforeMount, watch } from 'vue';
 import { PERMISSIONS } from '../permissions';
 import NewUser from '../components/NewUser.vue';
 import { hasPermission } from '@flaschengeist/api';
@@ -57,6 +59,8 @@ export default defineComponent({
   components: { RoleSettings, UpdateUser, NewUser },
   setup() {
     const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
+    const route = useRoute();
+    const router = useRouter();
 
     interface Tab {
       name: string;
@@ -74,6 +78,16 @@ export default defineComponent({
       { name: 'roles', label: 'Rollen', permissions: [PERMISSIONS.ROLES_EDIT] },
     ];
 
+    onBeforeMount(async () => {
+      if (
+        route.query.keys?.length === 0 ||
+        !tabs.some((value) => value.name == route.query.q_tab)
+      ) {
+        await router.replace({ query: { q_tab: 'user' } });
+      }
+      tab.value = route.query.q_tab as string;
+    });
+
     const _tabs = computed(() =>
       tabs.filter((tab) => {
         return tab.permissions.every((permission) => hasPermission(permission));
@@ -93,6 +107,10 @@ export default defineComponent({
 
     const tab = ref<string>('user');
 
+    watch(tab, async (val) => {
+      await router.replace({ query: { q_tab: val } });
+    });
+
     return {
       canEditRoles,
       showDrawer,