Merge pull request #2721 from gradido/refactor-community-routes

refactor(frontend): community routes

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

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

frontend/src/components/Template/RightSide/ContributionInfo.vue

@@ -1,76 +1,10 @@
 <template>
   <div class="contribution-info d-none d-lg-block">
-    <div v-if="hash === '#my'">
-      <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
-      <p>
-        {{ $t('contribution.alert.myContributionNoteList') }}
-      </p>
-      <ul>
-        <li>
-          <b-icon icon="bell-fill" variant="primary"></b-icon>
-          {{ $t('contribution.alert.pending') }}
-        </li>
-        <li>
-          <b-icon icon="question-square" variant="warning"></b-icon>
-          {{ $t('contribution.alert.in_progress') }}
-        </li>
-        <li>
-          <b-icon icon="check" variant="success"></b-icon>
-          {{ $t('contribution.alert.confirm') }}
-        </li>
-        <li>
-          <b-icon icon="x-circle" variant="warning"></b-icon>
-          {{ $t('contribution.alert.denied') }}
-        </li>
-        <li>
-          <b-icon icon="trash" variant="danger"></b-icon>
-          {{ $t('contribution.alert.deleted') }}
-        </li>
-      </ul>
-    </div>
-    <div v-if="hash === '#all'" show fade variant="secondary" class="text-dark">
-      <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
-      <p>
-        {{ $t('contribution.alert.communityNoteList') }}
-      </p>
-      <ul>
-        <li>
-          <b-icon icon="bell-fill" variant="primary"></b-icon>
-          {{ $t('contribution.alert.pending') }}
-        </li>
-        <li>
-          <b-icon icon="question-square" variant="warning"></b-icon>
-          {{ $t('contribution.alert.in_progress') }}
-        </li>
-        <li>
-          <b-icon icon="check" variant="success"></b-icon>
-          {{ $t('contribution.alert.confirm') }}
-        </li>
-        <li>
-          <b-icon icon="x-circle" variant="warning"></b-icon>
-          {{ $t('contribution.alert.denied') }}
-        </li>
-      </ul>
-    </div>
-    <div v-if="hash === '#edit'" show fade variant="secondary" class="text-dark">
-      <div>
-        <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
-        {{ $t('contribution.formText.bringYourTalentsTo') }}
-
-        <div class="my-3">
-          <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
-        </div>
-      </div>
-    </div>
+    <slot :name="$route.params.tab" />
   </div>
 </template>
 <script>
 export default {
   name: 'ContributionInfo',
-  computed: {
-    hash() {
-      return this.$route.hash
-    },
-  },
 }
 </script>

frontend/src/layouts/DashboardLayout.vue

@@ -121,11 +121,7 @@
             </b-col>
             <!-- Right Side Mobil -->
             <b-col class="d-block d-lg-none">
-              <right-side
-                :transactions="transactions"
-                :transactionCount="transactionCount"
-                :transactionLinkCount="transactionLinkCount"
-              >
+              <right-side>
                 <template #transactions>
                   <last-transactions
                     :transactions="transactions"
@@ -135,7 +131,7 @@
                   />
                 </template>
                 <template #community>
-                  <contribution-info />
+                  <community-template />
                 </template>
                 <template #empty />
               </right-side>
@@ -162,11 +158,7 @@
         </b-col>
         <!-- RightSide Desktop -->
         <b-col cols="3" class="d-none d-lg-block">
-          <right-side
-            :transactions="transactions"
-            :transactionCount="transactionCount"
-            :transactionLinkCount="transactionLinkCount"
-          >
+          <right-side>
             <template #transactions>
               <last-transactions
                 :transactions="transactions"
@@ -175,10 +167,10 @@
                 @set-tunneled-email="setTunneledEmail"
               />
             </template>
-            <template #community>
-              <contribution-info />
-            </template>
             <template #empty />
+            <template #community>
+              <community-template />
+            </template>
           </right-side>
         </b-col>
       </b-row>
@@ -194,6 +186,7 @@
 </template>
 <script>
 import ContentHeader from '@/layouts/templates/ContentHeader.vue'
+import CommunityTemplate from '@/layouts/templates/CommunityTemplate.vue'
 import Breadcrumb from '@/components/Breadcrumb/breadcrumb.vue'
 import RightSide from '@/layouts/templates/RightSide.vue'
 import SkeletonOverview from '@/components/skeleton/Overview.vue'
@@ -211,7 +204,6 @@ import GdtAmount from '@/components/Template/ContentHeader/GdtAmount.vue'
 import CommunityMember from '@/components/Template/ContentHeader/CommunityMember.vue'
 import NavCommunity from '@/components/Template/ContentHeader/NavCommunity.vue'
 import LastTransactions from '@/components/Template/RightSide/LastTransactions.vue'
-import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
 
 export default {
   name: 'DashboardLayout',
@@ -231,7 +223,7 @@ export default {
     CommunityMember,
     NavCommunity,
     LastTransactions,
-    ContributionInfo,
+    CommunityTemplate,
   },
   data() {
     return {

frontend/src/layouts/templates/CommunityTemplate.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import ContributionInfo from './ContributionInfo'
+import CommunityTemplate from './CommunityTemplate'
 
 const localVue = global.localVue
 
@@ -10,15 +10,17 @@ const mocks = {
   $t: jest.fn((t) => t),
   $d: jest.fn((d) => d),
   $route: {
-    hash: '',
+    params: {
+      tab: 'contribute',
+    },
   },
 }
 
-describe('ContributionInfo', () => {
+describe('CommunityTemplate', () => {
   let wrapper
 
   const Wrapper = () => {
-    return mount(ContributionInfo, { localVue, mocks })
+    return mount(CommunityTemplate, { localVue, mocks })
   }
   describe('mount', () => {
     beforeEach(() => {
@@ -29,9 +31,9 @@ describe('ContributionInfo', () => {
       expect(wrapper.findComponent({ name: 'ContributionInfo' }).exists()).toBe(true)
     })
 
-    describe('mounted with hash #my', () => {
+    describe('mounted with parameter contributions', () => {
       beforeEach(() => {
-        mocks.$route.hash = '#my'
+        mocks.$route.params.tab = 'contributions'
       })
 
       it('has a header related to "my contribitions"', () => {
@@ -59,9 +61,9 @@ describe('ContributionInfo', () => {
       })
     })
 
-    describe('mounted with hash #all', () => {
+    describe('mounted with parameter community', () => {
       beforeEach(() => {
-        mocks.$route.hash = '#all'
+        mocks.$route.params.tab = 'community'
       })
 
       it('has a header related to "the community"', () => {
@@ -89,9 +91,9 @@ describe('ContributionInfo', () => {
       })
     })
 
-    describe('mounted with hash #edit', () => {
+    describe('mounted with parameter contribute', () => {
       beforeEach(() => {
-        mocks.$route.hash = '#edit'
+        mocks.$route.params.tab = 'contribute'
       })
 
       it('has a header related to "the community"', () => {

frontend/src/layouts/templates/CommunityTemplate.vue

@@ -0,0 +1,82 @@
+<template>
+  <contribution-info>
+    <template #contribute>
+      <div show fade variant="secondary" class="text-dark">
+        <div>
+          <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
+          {{ $t('contribution.formText.bringYourTalentsTo') }}
+
+          <div class="my-3">
+            <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #contributions>
+      <div show fade variant="secondary" class="text-dark">
+        <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
+        <p>
+          {{ $t('contribution.alert.myContributionNoteList') }}
+        </p>
+        <ul>
+          <li>
+            <b-icon icon="bell-fill" variant="primary"></b-icon>
+            {{ $t('contribution.alert.pending') }}
+          </li>
+          <li>
+            <b-icon icon="question-square" variant="warning"></b-icon>
+            {{ $t('contribution.alert.in_progress') }}
+          </li>
+          <li>
+            <b-icon icon="check" variant="success"></b-icon>
+            {{ $t('contribution.alert.confirm') }}
+          </li>
+          <li>
+            <b-icon icon="x-circle" variant="warning"></b-icon>
+            {{ $t('contribution.alert.denied') }}
+          </li>
+          <li>
+            <b-icon icon="trash" variant="danger"></b-icon>
+            {{ $t('contribution.alert.deleted') }}
+          </li>
+        </ul>
+      </div>
+    </template>
+    <template #community>
+      <div show fade variant="secondary" class="text-dark">
+        <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
+        <p>
+          {{ $t('contribution.alert.communityNoteList') }}
+        </p>
+        <ul>
+          <li>
+            <b-icon icon="bell-fill" variant="primary"></b-icon>
+            {{ $t('contribution.alert.pending') }}
+          </li>
+          <li>
+            <b-icon icon="question-square" variant="warning"></b-icon>
+            {{ $t('contribution.alert.in_progress') }}
+          </li>
+          <li>
+            <b-icon icon="check" variant="success"></b-icon>
+            {{ $t('contribution.alert.confirm') }}
+          </li>
+          <li>
+            <b-icon icon="x-circle" variant="warning"></b-icon>
+            {{ $t('contribution.alert.denied') }}
+          </li>
+        </ul>
+      </div>
+    </template>
+  </contribution-info>
+</template>
+<script>
+import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
+
+export default {
+  name: 'CommunityTemplate',
+  components: {
+    ContributionInfo,
+  },
+}
+</script>

frontend/src/layouts/templates/ContentHeader.vue

@@ -9,7 +9,7 @@ export default {
   name: 'ContentHeader',
   computed: {
     path() {
-      return this.$route.path.replace(/^\//, '')
+      return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
     },
   },
 }

frontend/src/layouts/templates/RightSide.vue

@@ -10,7 +10,7 @@ export default {
   name: 'RightSide',
   computed: {
     name() {
-      switch (this.$route.path.replace(/^\//, '')) {
+      switch (this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')) {
         case 'settings':
           return 'empty'
         case 'community':

frontend/src/pages/Community.spec.js

@@ -215,7 +215,9 @@ describe('Community', () => {
       push: routerPushMock,
     },
     $route: {
-      hash: '#edit',
+      params: {
+        tab: 'contribute',
+      },
     },
   }
 
@@ -260,7 +262,11 @@ describe('Community', () => {
       })
 
       it('check for correct tabIndex if state is "IN_PROGRESS" or not', () => {
-        expect(routerPushMock).toBeCalledWith({ path: '/community#my' })
+        expect(routerPushMock).toBeCalledWith({ params: { tab: 'contributions' } })
+      })
+
+      it('sets tab index to 1', () => {
+        expect(wrapper.vm.tabIndex).toBe(1)
       })
 
       it('toasts an info', () => {
@@ -268,16 +274,6 @@ describe('Community', () => {
       })
     })
 
-    describe('API calls after creation', () => {
-      it('has a DIV .community-page', () => {
-        expect(wrapper.find('div.community-page').exists()).toBe(true)
-      })
-
-      it('emits update transactions', () => {
-        expect(wrapper.emitted('update-transactions')).toEqual([[0]])
-      })
-    })
-
     describe('save contrubtion', () => {
       describe('with error', () => {
         const now = new Date().toISOString()
@@ -491,6 +487,10 @@ describe('Community', () => {
       it('sets tab index back to 0', () => {
         expect(wrapper.vm.tabIndex).toBe(0)
       })
+
+      it('pushes contribute parameter to router', () => {
+        expect(routerPushMock).toBeCalledWith({ params: { tab: 'contribute' } })
+      })
     })
 
     describe('update list all contributions', () => {

frontend/src/pages/Community.vue

@@ -64,6 +64,8 @@ import ContributionList from '@/components/Contributions/ContributionList.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
 
+const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
+
 export default {
   name: 'Community',
   components: {
@@ -73,8 +75,6 @@ export default {
   },
   data() {
     return {
-      hashLink: '',
-      tabLinkHashes: ['#edit', '#my', '#all'],
       tabIndex: 0,
       items: [],
       itemsAll: [],
@@ -97,10 +97,7 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash)
-      this.hashLink = this.$route.hash
-    })
+    this.updateTabIndex()
   },
   apollo: {
     OpenCreations: {
@@ -153,9 +150,8 @@ export default {
         this.items = listContributions.contributionList
         if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
           this.tabIndex = 1
-          if (this.$route.hash !== '#my') {
-            this.$router.push({ path: '/community#my' })
-          }
+          if (this.$route.params.tab !== 'contributions')
+            this.$router.push({ params: { tab: 'contributions' } })
           this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
         }
       },
@@ -165,21 +161,8 @@ export default {
     },
   },
   watch: {
-    $route(to, from) {
-      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === to.hash)
-      this.hashLink = to.hash
-      this.closeAllOpenCollapse()
-    },
-    tabIndex(num) {
-      if (num !== 0) {
-        this.form = {
-          id: null,
-          date: new Date(),
-          memo: '',
-          hours: 0,
-          amount: '',
-        }
-      }
+    '$route.params.tab'() {
+      this.updateTabIndex()
     },
   },
   computed: {
@@ -211,6 +194,11 @@ export default {
     },
   },
   methods: {
+    updateTabIndex() {
+      const index = COMMUNITY_TABS.indexOf(this.$route.params.tab)
+      this.tabIndex = index > -1 ? index : 0
+      this.closeAllOpenCollapse()
+    },
     closeAllOpenCollapse() {
       this.$el.querySelectorAll('.collapse.show').forEach((value) => {
         this.$root.$emit('bv::toggle::collapse', value.id)
@@ -294,8 +282,8 @@ export default {
       this.form.amount = item.amount
       this.form.hours = item.amount / 20
       this.updateAmount = item.amount
-      this.$router.push({ path: '#edit' })
       this.tabIndex = 0
+      this.$router.push({ params: { tab: 'contribute' } })
     },
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
@@ -304,11 +292,6 @@ export default {
       this.items.find((item) => item.id === id).state = 'PENDING'
     },
   },
-  created() {
-    this.updateTransactions(0)
-    this.tabIndex = 0
-    this.$router.push({ path: '/community#edit' })
-  },
 }
 </script>
 <style scoped>

frontend/src/routes/router.test.js

@@ -49,8 +49,8 @@ describe('router', () => {
         expect(routes.find((r) => r.path === '/').redirect()).toEqual({ path: '/login' })
       })
 
-      it('has sixteen routes defined', () => {
-        expect(routes).toHaveLength(18)
+      it('has 19 routes defined', () => {
+        expect(routes).toHaveLength(19)
       })
 
       describe('overview', () => {
@@ -75,7 +75,19 @@ describe('router', () => {
         })
       })
 
-      describe('community', () => {
+      describe('community without tab parameter', () => {
+        it('requires authorization', () => {
+          expect(routes.find((r) => r.path === '/community').meta.requiresAuth).toBeTruthy()
+        })
+
+        it('redirects to contribute tab', async () => {
+          expect(routes.find((r) => r.path === '/community').redirect()).toEqual({
+            path: '/community/contribute',
+          })
+        })
+      })
+
+      describe('community with tab parameter', () => {
         it('requires authorization', () => {
           expect(routes.find((r) => r.path === '/community').meta.requiresAuth).toBeTruthy()
         })

frontend/src/routes/routes.js

@@ -58,6 +58,17 @@ const routes = [
       requiresAuth: true,
       pageTitle: 'community',
     },
+    redirect: (to) => {
+      return { path: '/community/contribute' }
+    },
+  },
+  {
+    path: '/community/:tab',
+    component: () => import('@/pages/Community.vue'),
+    meta: {
+      requiresAuth: true,
+      pageTitle: 'community',
+    },
   },
   {
     path: '/information',