feat: ✨ dataset sidebar router

AI-READI · Nov 13, 2023 · 2d2a6f0 · 2d2a6f0
1 parent 3dab10a
commit 2d2a6f0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/components/sidebar/DatasetSidebar.vue b/src/components/sidebar/DatasetSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue";
-import type { MenuOption } from "naive-ui";
+import type { MenuInst, MenuOption } from "naive-ui";
 import { NLayoutSider, NMenu, NSpace } from "naive-ui";
 import { computed, h, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
@@ -197,6 +197,20 @@ const showSidebar = computed(() => {
 
   return false;
 });
+
+const selectedKeyRef = ref("1");
+const menuInstRef = ref<MenuInst | null>(null);
+
+const selectAndExpand = (key: string) => {
+  selectedKeyRef.value = key;
+  menuInstRef.value?.showOption(key);
+};
+
+router.beforeEach((to, from) => {
+  if (typeof to.name !== "string") return;
+  const name: string = to.meta && to.meta.menuItem ? (to.meta.menuItem as string) : to.name;
+  selectAndExpand(name);
+});
 </script>
 
 <template>
@@ -213,6 +227,8 @@ const showSidebar = computed(() => {
   >
     <n-space vertical justify="space-between" class="h-full">
       <n-menu
+        ref="menuInstRef"
+        v-model:value="selectedKeyRef"
         :collapsed-width="64"
         :collapsed-icon-size="22"
         :default-expanded-keys="['dataset:metadata']"

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -286,6 +286,7 @@ const router = createRouter({
                       name: "dataset:publish:versions:new",
                       path: "new",
                       component: NewVersion,
+                      meta: { menuItem: "dataset:publish:versions" },
                     },
                     {
                       path: ":versionId",
@@ -294,31 +295,37 @@ const router = createRouter({
                           name: "dataset:publish:version:participants",
                           path: "participants",
                           component: PublishSelectParticipants,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:study-metadata",
                           path: "study-metadata",
                           component: PublishStudyMetadata,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:dataset-metadata",
                           path: "dataset-metadata",
                           component: PublishDatasetMetadata,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:changelog",
                           path: "changelog",
                           component: PublishChangelog,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:readme",
                           path: "additional-readme",
                           component: PublishReadme,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:summary",
                           path: "summary",
                           component: PublishSummary,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                       ],
                     },