From b7fb043504b2bd4ce42d0cce2d22d110f5a23bd0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 25 Oct 2022 11:21:43 +0530
Subject: [PATCH] refactor(gui): manage nested users tab route based

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../account/index/users.vue}                  | 55 +++++++++----------
 .../pages/account/index/users/[[tabType]].vue | 18 ++++++
 2 files changed, 45 insertions(+), 28 deletions(-)
 rename packages/nc-gui/{components/account/UserManagement.vue => pages/account/index/users.vue} (57%)
 create mode 100644 packages/nc-gui/pages/account/index/users/[[tabType]].vue

diff --git a/packages/nc-gui/components/account/UserManagement.vue b/packages/nc-gui/pages/account/index/users.vue
similarity index 57%
rename from packages/nc-gui/components/account/UserManagement.vue
rename to packages/nc-gui/pages/account/index/users.vue
index 3528abbba7..0d51b3c388 100644
--- a/packages/nc-gui/components/account/UserManagement.vue
+++ b/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'">
-      <LazyAccountUserList />
-    </template>
-    <template v-else-if="selectedTabKey === 'settings'">
-      <LazyAccountSignupSettings />
-    </template>
-    <template v-else-if="selectedTabKey === 'password-reset'">
-      <LazyAccountResetPassword />
-    </template>
+    <NuxtPage :tab-key="selectedTabKey"/>
   </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>
diff --git a/packages/nc-gui/pages/account/index/users/[[tabType]].vue b/packages/nc-gui/pages/account/index/users/[[tabType]].vue
new file mode 100644
index 0000000000..cfb8fc9037
--- /dev/null
+++ b/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>