Merge pull request #2527 from gradido/2516-Creation-menu-is-not-highlighted-on-all-submenus

fix(frontend): creation menu highlighted on all submenus

frontend/src/components/Menu/Sidebar.vue

@@ -19,7 +19,7 @@
             <b-icon icon="layers" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('gdt.gdt') }}</span>
           </b-nav-item>
-          <b-nav-item to="/community#my" class="" active-class="activeRoute">
+          <b-nav-item to="/community" class="" active-class="activeRoute">
             <b-icon icon="people" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('creation') }}</span>
           </b-nav-item>

frontend/src/components/Template/ContentHeader/NavCommunity.vue

@@ -1,20 +1,20 @@
 <template>
-  <div class="nav-community">
+  <div class="nav-community container">
     <b-row class="nav-row">
-      <b-col cols="12" lg="4" md="4">
-        <b-btn active-class="btn-active" block variant="link" to="#edit">
+      <b-col cols="12" lg="4" md="4" class="px-0">
+        <b-btn active-class="btn-active" block variant="link" to="/community#edit">
           <b-icon icon="pencil" class="mr-2" />
           {{ $t('community.submitContribution') }}
         </b-btn>
       </b-col>
-      <b-col cols="12" lg="4" md="4">
-        <b-btn active-class="btn-active" block variant="link" to="#my">
+      <b-col cols="12" lg="4" md="4" class="px-0">
+        <b-btn active-class="btn-active" block variant="link" to="/community#my">
           <b-icon icon="person" class="mr-2" />
           {{ $t('community.myContributions') }}
         </b-btn>
       </b-col>
-      <b-col cols="12" lg="4" md="4">
-        <b-btn active-class="btn-active" block variant="link" to="#all">
+      <b-col cols="12" lg="4" md="4" class="px-0">
+        <b-btn active-class="btn-active" block variant="link" to="/community#all">
           <b-icon icon="people" class="mr-2" />
           {{ $t('community.community') }}
         </b-btn>

frontend/src/pages/Community.spec.js

@@ -4,33 +4,13 @@ import { toastErrorSpy, toastSuccessSpy } from '@test/testSetup'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions } from '@/graphql/queries'
 
-import VueRouter from 'vue-router'
-import routes from '../routes/routes'
-
 const localVue = global.localVue
-localVue.use(VueRouter)
 
 const mockStoreDispach = jest.fn()
 const apolloQueryMock = jest.fn()
 const apolloMutationMock = jest.fn()
 const apolloRefetchMock = jest.fn()
 
-const router = new VueRouter({
-  base: '/',
-  routes,
-  linkActiveClass: 'active',
-  mode: 'history',
-  // scrollBehavior: (to, from, savedPosition) => {
-  //   if (savedPosition) {
-  //     return savedPosition
-  //   }
-  //   if (to.hash) {
-  //     return { selector: to.hash }
-  //   }
-  //   return { x: 0, y: 0 }
-  // },
-})
-
 describe('Community', () => {
   let wrapper
 
@@ -55,12 +35,17 @@ describe('Community', () => {
     $i18n: {
       locale: 'en',
     },
+    $router: {
+      push: jest.fn(),
+    },
+    $route: {
+      hash: 'my',
+    },
   }
 
   const Wrapper = () => {
     return mount(Community, {
       localVue,
-      router,
       mocks,
     })
   }

frontend/src/pages/Community.vue

@@ -280,7 +280,7 @@ export default {
           if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
             this.tabIndex = 1
             if (this.$route.hash !== '#my') {
-              this.$router.push({ path: '#my' })
+              this.$router.push({ path: '/community#my' })
             }
             this.toastInfo('Du hast eine Rückfrage auf eine Contribution. Bitte beantworte diese!')
           }
@@ -318,6 +318,7 @@ export default {
     })
     this.updateTransactions(0)
     this.tabIndex = 1
+    this.$router.push({ path: '/community#my' })
   },
 }
 </script>