refactor(gui): manage nested users tab route based

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/pages/account/index/users.vue

@@ -1,21 +1,3 @@
-<script lang="ts" setup>
-import { useUIPermission } from '~/composables/useUIPermission'
-
-const { isUIAllowed } = useUIPermission()
-
-const tabs = [
-  ...(isUIAllowed('superAdminUserManagement')
-    ? [
-        { label: 'Users', key: 'users' },
-        { label: 'Settings', key: 'settings' },
-      ]
-    : []),
-  { label: 'Reset Password', key: 'password-reset' },
-]
-
-const selectedTabKey = ref(tabs[0].key)
-</script>
-
 <template>
   <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-4">
     <a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs">
@@ -27,16 +9,33 @@ const selectedTabKey = ref(tabs[0].key)
         </template>
       </a-tab-pane>
     </a-tabs>
-    <template v-if="selectedTabKey === 'users'">
+    <NuxtPage :tab-key="selectedTabKey"/>
-      <LazyAccountUserList />
-    </template>
-    <template v-else-if="selectedTabKey === 'settings'">
-      <LazyAccountSignupSettings />
-    </template>
-    <template v-else-if="selectedTabKey === 'password-reset'">
-      <LazyAccountResetPassword />
-    </template>
   </div>
 </template>
 
-<style scoped></style>
+<script setup lang="ts">
+import { useUIPermission } from '~/composables/useUIPermission'
+
+const { isUIAllowed } = useUIPermission()
+
+const tabs = [
+  ...(isUIAllowed('superAdminUserManagement')
+    ? [
+      { label: 'Users', key: 'list' },
+      { label: 'Settings', key: 'settings' },
+    ]
+    : []),
+  { label: 'Reset Password', key: 'password-reset' },
+]
+
+const $route = useRoute()
+
+const selectedTabKey = computed({
+  get() {
+    return tabs.find(t => t.key === $route.params.tabType)?.key ?? tabs[0].key
+  },
+  set(val) {
+    navigateTo(`/account/users/${val}`)
+  },
+})
+</script>

packages/nc-gui/pages/account/index/users/[[tabType]].vue

@@ -0,0 +1,18 @@
+<template>
+  <template v-if="props.tabKey === 'list'">
+    <LazyAccountUserList />
+  </template>
+  <template v-else-if="props.tabKey === 'settings'">
+    <LazyAccountSignupSettings />
+  </template>
+  <template v-else-if="props.tabKey === 'password-reset'">
+    <LazyAccountResetPassword />
+  </template>
+</template>
+<script setup lang="ts">
+import { defineProps } from '#imports'
+
+const props = defineProps<{
+  tabKey: string
+}>()
+</script>