change to named tab param

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

@@ -23,21 +23,23 @@
   </div>
 </template>
 <script>
+export const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
+
 export default {
   name: 'NavCommunity',
   methods: {
     handleClick(tab) {
-       console.log('handleClick', tab)
+      if (this.$route.params.tab !== COMMUNITY_TABS[tab]) {
-       if (this.$route.params && this.$route.params.tab && Number(this.$route.params.tab) !== tab) {
+        this.$router.push({ params: { tab: COMMUNITY_TABS[tab] } })
-         this.$router.push({ params: { tab } })
       }
     },
   },
+  /*
    watch: {
-     '$route.params.tab'(tab) {
+     '$route.params.tab'() {
-       this.handleClick(tab)
      },
    },
+   */
 }
 </script>
 <style scoped>

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

@@ -1,82 +1,10 @@
 <template>
   <div class="contribution-info d-none d-lg-block">
-    <div v-if="hash === '#my'">
+    <slot :name="$route.params.tab" />
-      <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>
   </div>
 </template>
 <script>
 export default {
   name: 'ContributionInfo',
-   computed: {
-     hash() {
-       return this.$route.hash
-     },
-     currentTab() {
-       console.log('ROUTE', this.$route)
-       if (this.$route.from && this.$route.from.params && this.$route.from.params.tab)
-         return this.$route.from.params.tab
-       return 0
-     },
-   },
 }
 </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
+              <right-side>
-                :transactions="transactions"
-                :transactionCount="transactionCount"
-                :transactionLinkCount="transactionLinkCount"
-              >
                 <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
+          <right-side>
-            :transactions="transactions"
-            :transactionCount="transactionCount"
-            :transactionLinkCount="transactionLinkCount"
-          >
             <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.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,6 @@
   name: 'ContentHeader',
   computed: {
     path() {
-       console.log('ContentHeader', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
       return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
     },
   },

frontend/src/layouts/templates/RightSide.vue

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

frontend/src/pages/Community.vue

@@ -63,6 +63,7 @@
 import ContributionList from '@/components/Contributions/ContributionList.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
+import { COMMUNITY_TABS } from '@/components/Template/ContentHeader/NavCommunity'
 
 export default {
   name: 'Community',
@@ -73,7 +74,7 @@
   },
   data() {
     return {
-       tabIndex: 1,
+      tabIndex: 0,
       items: [],
       itemsAll: [],
       currentPage: 1,
@@ -95,7 +96,7 @@
     }
   },
   mounted() {
-     this.updateTabIndex(Number(this.$route.params.tab))
+    this.updateTabIndex()
   },
   apollo: {
     OpenCreations: {
@@ -147,7 +148,7 @@
         this.contributionCount = listContributions.contributionCount
         this.items = listContributions.contributionList
         if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
-           this.tabIndex = 1
+          this.$router.push({ params: { tab: 'contributions' } })
           this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
         }
       },
@@ -158,7 +159,7 @@
   },
   watch: {
     '$route.params.tab'(tab) {
-       this.updateTabIndex(tab)
+      this.updateTabIndex()
     },
   },
   computed: {
@@ -190,12 +191,14 @@
     },
   },
   methods: {
-     updateTabIndex(tab) {
+    updateTabIndex() {
-       console.log('updateTabIndex', tab)
+      const index = COMMUNITY_TABS.indexOf(this.$route.params.tab)
-       if (Number(tab) !== this.tabIndex) {
+      if (index > -1) {
-         this.tabIndex = Number(tab)
+        this.tabIndex = index
-         this.closeAllOpenCollapse()
+      } else {
+        this.tabIndex = 0
       }
+      this.closeAllOpenCollapse()
     },
     closeAllOpenCollapse() {
       this.$el.querySelectorAll('.collapse.show').forEach((value) => {
@@ -280,7 +283,7 @@
       this.form.amount = item.amount
       this.form.hours = item.amount / 20
       this.updateAmount = item.amount
-       this.tabIndex = 0
+      this.$router.push({ params: { tab: 'contribute' } })
     },
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)

frontend/src/routes/routes.js

@@ -59,7 +59,7 @@ const routes = [
       pageTitle: 'community',
     },
     redirect: (to) => {
-      return { path: '/community/1' }
+      return { path: '/community/contribute' }
     },
   },
   {