Stay on current view when navigating between items

oslokommune · Sep 7, 2023 · bf018fc · bf018fc
1 parent f5a9d25
commit bf018fc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,8 @@ All notable changes to this project will be documented in this file. The format
 - Made links clickable in the description of objects, key results and goals.
 - It is no longer possible to close open modals or drawers by clicking outside
   them. This is meant to prevent accidental data loss in unsaved forms.
+- The currently active item tab is now kept when navigating between
+  organizational items.
 
 ## [3.9.0] 2023-09-01
 

diff --git a/src/components/Navigation/header/OrganizationTree.vue b/src/components/Navigation/header/OrganizationTree.vue
@@ -7,7 +7,7 @@
         class="organization-tree__item organization-tree__item--organization"
       >
         <router-link
-          :to="{ name: 'ItemHome', params: { slug: organization.slug } }"
+          :to="getRoute(organization.slug)"
           :class="[
             'organization-tree__link',
             {
@@ -26,7 +26,7 @@
             class="organization-tree__item organization-tree__item--department"
           >
             <router-link
-              :to="{ name: 'ItemHome', params: { slug: dept.slug } }"
+              :to="getRoute(dept.slug)"
               :class="[
                 'organization-tree__link',
                 { 'organization-tree__link--active': dept.slug === $route.params.slug },
@@ -43,7 +43,7 @@
                 class="organization-tree__item organization-tree__item--product pkt-txt-14-light"
               >
                 <router-link
-                  :to="{ name: 'ItemHome', params: { slug: prod.slug } }"
+                  :to="getRoute(prod.slug)"
                   :class="[
                     'organization-tree__link',
                     {
@@ -89,6 +89,17 @@ export default {
       return this.tree.find((org) => org.id === this.organization.id)?.children || [];
     },
   },
+
+  methods: {
+    getRoute(slug) {
+      const { name: currentRouteName, query: currentQuery } = this.$route;
+      const name = ['ItemMeasurements', 'ItemAbout'].includes(currentRouteName)
+        ? currentRouteName
+        : 'ItemHome';
+      const query = currentQuery?.view ? { view: currentQuery.view } : null;
+      return { name, params: { slug }, query };
+    },
+  },
 };
 </script>