fix: 🐛 back navigating in version steps and sidebar metadata pages

src/App.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
 import type { GlobalThemeOverrides } from "naive-ui";
 import { materialTheme, Notifications, Notivue } from "notivue";
+import { useRouter } from "vue-router";
 
+import { current_route, prev_route } from "@/stores/nav";
 import { theme } from "@/stores/settings";
 
+const router = useRouter();
 const themeOverrides: GlobalThemeOverrides = {
   Button: {},
   Form: {
     feedbackPadding: "4px 0 8px 2px",
     labelFontWeight: "600",
   },
 };
+
+router.beforeEach((to, from) => {
+  if (typeof from.name !== "string") return;
+  prev_route.value = !to.query?._clear ? from : null;
+  current_route.value = to;
+});
 </script>
 
 <template>

src/components/sidebar/AppSidebar.vue

@@ -305,25 +305,29 @@ const toggleSidebar = (collapsed: boolean) => {
 
 const navigateTo = (value: string) => {
   const routeName = value.split(":")[0];
-
   if (routeName === "studies") {
     sidebarStore.setAppSidebarCollapsed(false);
 
     router.push({
       name: value,
+      query: {
+        _clear: "true",
+      },
     });
 
     return;
   }
 
   if (routeName === "study") {
     sidebarStore.setAppSidebarCollapsed(false);
-
     router.push({
       name: value,
       params: {
         studyId: studyID.value,
       },
+      query: {
+        _clear: "true",
+      },
     });
 
     return;
@@ -337,6 +341,9 @@ const navigateTo = (value: string) => {
       params: {
         studyId: studyID.value,
       },
+      query: {
+        _clear: "true",
+      },
     });
 
     return;
@@ -373,8 +380,6 @@ const defaultExpandedKeys = computed(() => {
   if (currentRoute.name) {
     const name = currentRoute.name as string;
 
-    console.log("appsidebar-name", name, name.startsWith("study:metadata"));
-
     if (name.startsWith("study:metadata")) {
       return ["study:metadata"];
     }
@@ -390,7 +395,7 @@ const selectAndExpand = (key: string) => {
   menuInstRef.value?.showOption(key);
 };
 
-router.beforeEach((to, from) => {
+router.beforeEach((to) => {
   if (typeof to.name !== "string") return;
   const name: string = to.meta && to.meta.menuItem ? (to.meta.menuItem as string) : to.name;
   selectAndExpand(name);

src/components/sidebar/DatasetSidebar.vue

@@ -163,6 +163,9 @@ const navigateTo = (value: string) => {
         datasetId: datasetId.value,
         studyId: studyID.value,
       },
+      query: {
+        _clear: "true",
+      },
     });
 
     return;
@@ -206,7 +209,7 @@ const selectAndExpand = (key: string) => {
   menuInstRef.value?.showOption(key);
 };
 
-router.beforeEach((to, from) => {
+router.beforeEach((to) => {
   if (typeof to.name !== "string") return;
   const name: string = to.meta && to.meta.menuItem ? (to.meta.menuItem as string) : to.name;
   selectAndExpand(name);

src/stores/nav.ts

@@ -0,0 +1,52 @@
+import type { Ref } from "vue/dist/vue";
+import type { RouteLocationNormalized } from "vue-router";
+
+export const prev_route: Ref<RouteLocationNormalized | null | undefined> = ref(null);
+export const current_route: Ref<RouteLocationNormalized | null | undefined> = ref(null);
+
+export function getBackRoute(): string {
+  if (prev_route.value && typeof prev_route.value.name == "string") {
+    if (prev_route.value.name == "dataset:publish:version:study-metadata") {
+      return "dataset:publish:version:study-metadata";
+    }
+    if (prev_route.value.name == "dataset:publish:version:dataset-metadata") {
+      return "dataset:publish:version:dataset-metadata";
+    }
+    if (prev_route.value.name.startsWith("dataset:")) {
+      return "dataset:overview";
+    }
+    if (prev_route.value.name.startsWith("study:")) {
+      return "study:overview";
+    }
+  }
+  if (current_route.value && typeof current_route.value.name == "string") {
+    if (current_route.value.name.startsWith("dataset")) {
+      return "dataset:overview";
+    }
+    if (current_route.value.name.startsWith("study")) {
+      console.log("oh no were here");
+      return "study:overview";
+    }
+  }
+  return "study:overview";
+}
+
+export function getBackParams(): object {
+  if (prev_route.value && typeof prev_route.value.name == "string") {
+    if (prev_route.value.name == "dataset:publish:version:study-metadata") {
+      return prev_route.value?.params;
+    }
+    if (prev_route.value.name == "dataset:publish:version:dataset-metadata") {
+      return prev_route.value?.params;
+    }
+  }
+  if (current_route.value && typeof current_route.value.name == "string") {
+    if (current_route.value.name.startsWith("dataset")) {
+      return current_route.value?.params;
+    }
+    if (current_route.value.name.startsWith("study")) {
+      return current_route.value?.params;
+    }
+  }
+  return current_route.value ? current_route.value.params : {};
+}

src/types/Version.d.ts

@@ -41,6 +41,7 @@ export interface VersionStudyOverallOfficial {
   id: string;
   name: string;
   affiliation: string;
+  role: string;
 }
 
 export interface VersionDesign {
@@ -103,7 +104,8 @@ export interface VersionStudyStatusModule {
 }
 
 export interface VersionStudySponsor {
-  responsible_party_investigator_name: string;
+  lead_sponsor_name: string;
+  responsible_party_investigator_name: string | null;
   responsible_party_type: string;
 }
 
@@ -125,7 +127,6 @@ export interface VersionStudyArm {
 export interface VersionStudyEligibility {
   gender: string | null;
   gender_based: string | null;
-  maximum_age_value: number | null;
   minimum_age_value: number | null;
 }
 
@@ -233,7 +234,7 @@ export interface VersionDatasetSubjects {
 export interface VersionDatasetAccess {
   description: string;
   type: string | null;
-  url: string;
+  url: string | null;
   url_last_checked: number | null;
 }
 
@@ -246,7 +247,7 @@ export interface VersionDatasetRights {
 export interface VersionDatasetFunders {
   id: string;
   name: string;
-  award_number: string;
+  award_number: string | null;
   identifier: string;
 }
 

src/views/study/dataset/metadata/about/DatasetMetadataOther.vue

@@ -2,6 +2,7 @@
 import type { FormInst } from "naive-ui";
 
 import LANGUAGES_JSON from "@/assets/data/languages.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetOther } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
 
@@ -119,10 +120,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="Additional Metadata"
       description="Some metadata that didn't really fit in other sections."
-      linkName="study:overview"
-      :linkParams="{
-        studyId: route.params.studyId,
-      }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />

src/views/study/dataset/metadata/access/DatasetMetadataAccess.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { FormInst } from "naive-ui";
+import type { FormInst, FormRules } from "naive-ui";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetAccess } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
-
 const route = useRoute();
 const push = usePush();
 
@@ -102,10 +102,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="Access Details"
       description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod quia voluptatibus, voluptatem, quibusdam, quos voluptas quae quas voluptatum"
-      linkName="study:overview"
-      :linkParams="{
-        studyId: route.params.studyId,
-      }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />

src/views/study/dataset/metadata/consent/DatasetMetadataConsent.vue

@@ -2,9 +2,9 @@
 import type { FormInst } from "naive-ui";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetConsent } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
-
 const route = useRoute();
 const push = usePush();
 
@@ -113,10 +113,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="Consent"
       description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod quia voluptatibus, voluptatem, quibusdam, quos voluptas quae quas voluptatum"
-      linkName="study:overview"
-      :linkParams="{
-        studyId: route.params.studyId,
-      }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />

src/views/study/dataset/metadata/contributors/DatasetMetadataContributors.vue

@@ -3,6 +3,7 @@ import type { FormInst } from "naive-ui";
 import { nanoid } from "nanoid";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetContributors } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
 
@@ -164,8 +165,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="Contributors"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-      linkName="dataset:overview"
-      :linkParams="{ studyId: routeParams.studyId, datasetId: routeParams.datasetId }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />

src/views/study/dataset/metadata/creators/DatasetMetadataCreator.vue

@@ -3,6 +3,7 @@ import type { FormInst } from "naive-ui";
 import { nanoid } from "nanoid";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetCreators } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
 
@@ -162,8 +163,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="Creators"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-      linkName="dataset:overview"
-      :linkParams="{ studyId: routeParams.studyId, datasetId: routeParams.datasetId }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />

src/views/study/dataset/metadata/dates/DatasetMetadataDates.vue

@@ -3,6 +3,7 @@ import type { FormInst } from "naive-ui";
 import { nanoid } from "nanoid";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetDates } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
 
@@ -134,8 +135,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="Dates"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-      linkName="dataset:overview"
-      :linkParams="{ studyId: routeParams.studyId, datasetId: routeParams.datasetId }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />

src/views/study/dataset/metadata/deidentification/DatasetMetadataDeIdentification.vue

@@ -2,9 +2,9 @@
 import type { FormInst } from "naive-ui";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetDeIdentLevel } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
-
 const route = useRoute();
 const push = usePush();
 
@@ -113,10 +113,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="De-identification Levels"
       description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod quia voluptatibus, voluptatem, quibusdam, quos voluptas quae quas voluptatum"
-      linkName="study:overview"
-      :linkParams="{
-        studyId: route.params.studyId,
-      }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />

src/views/study/dataset/metadata/descriptions/DatasetMetadataDescriptions.vue

@@ -2,6 +2,7 @@
 import { nanoid } from "nanoid";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetDescriptions } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
 
@@ -148,8 +149,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="Descriptions"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-      linkName="dataset:overview"
-      :linkParams="{ studyId: routeParams.studyId, datasetId: routeParams.datasetId }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />

src/views/study/dataset/metadata/funders/DatasetMetadataFunders.vue

@@ -3,6 +3,7 @@ import type { FormInst } from "naive-ui";
 import { nanoid } from "nanoid";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { getBackParams, getBackRoute } from "@/stores/nav";
 import type { DatasetFunders } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
 
@@ -142,8 +143,8 @@ const saveMetadata = (e: MouseEvent) => {
     <PageBackNavigationHeader
       title="Funders"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-      linkName="dataset:overview"
-      :linkParams="{ studyId: routeParams.studyId, datasetId: routeParams.datasetId }"
+      :linkName="getBackRoute()"
+      :linkParams="getBackParams()"
     />
 
     <n-divider />