From 86742d015823c7c657d1d84d9cc2292bb837c6ec Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 17 Feb 2023 09:48:05 +0100
Subject: [PATCH 1/4] refactor(frontend): community routes

---
 .../Template/ContentHeader/NavCommunity.vue   |  25 +-
 .../Template/RightSide/ContributionInfo.vue   |  22 +-
 .../src/layouts/templates/ContentHeader.vue   |  17 +-
 frontend/src/layouts/templates/RightSide.vue  |  32 +-
 frontend/src/pages/Community.vue              | 485 +++++++++---------
 frontend/src/routes/routes.js                 |  11 +
 6 files changed, 304 insertions(+), 288 deletions(-)

diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index 31a839af4..841304b2a 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/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 active-class="btn-active" block variant="link" @click="handleClick(0)">
           <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 active-class="btn-active" block variant="link" @click="handleClick(1)">
           <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 active-class="btn-active" block variant="link" @click="handleClick(2)">
           <b-icon icon="people" class="mr-2" />
           {{ $t('community.community') }}
         </b-btn>
@@ -23,9 +23,22 @@
   </div>
 </template>
 <script>
-export default {
-  name: 'NavCommunity',
-}
+ export default {
+   name: 'NavCommunity',
+   methods: {
+     handleClick(tab) {
+       console.log('handleClick', tab)
+       if (this.$route.params && this.$route.params.tab && Number(this.$route.params.tab) !== tab) {
+         this.$router.push({ params: { tab } })
+       }
+     },
+   },
+   watch: {
+     '$route.params.tab'(tab) {
+       this.handleClick(tab)
+     },
+   },
+ }
 </script>
 <style scoped>
 .nav-row {
diff --git a/frontend/src/components/Template/RightSide/ContributionInfo.vue b/frontend/src/components/Template/RightSide/ContributionInfo.vue
index 2227df1c3..fdd2d10d8 100644
--- a/frontend/src/components/Template/RightSide/ContributionInfo.vue
+++ b/frontend/src/components/Template/RightSide/ContributionInfo.vue
@@ -65,12 +65,18 @@
   </div>
 </template>
 <script>
-export default {
-  name: 'ContributionInfo',
-  computed: {
-    hash() {
-      return this.$route.hash
-    },
-  },
-}
+ 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>
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 407d8dcad..75686974e 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -5,12 +5,13 @@
 </template>
 
 <script>
-export default {
-  name: 'ContentHeader',
-  computed: {
-    path() {
-      return this.$route.path.replace(/^\//, '')
-    },
-  },
-}
+ export default {
+   name: 'ContentHeader',
+   computed: {
+     path() {
+       console.log('ContentHeader', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
+       return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
+     },
+   },
+ }
 </script>
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index 0a92cb1a1..9d357eeec 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -6,19 +6,21 @@
   </div>
 </template>
 <script>
-export default {
-  name: 'RightSide',
-  computed: {
-    name() {
-      switch (this.$route.path.replace(/^\//, '')) {
-        case 'settings':
-          return 'empty'
-        case 'community':
-          return 'community'
-        default:
-          return 'transactions'
-      }
-    },
-  },
-}
+ export default {
+   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'
+       }
+     },
+   },
+ }
 </script>
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 113bcd4e4..a9b5e2c11 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -58,258 +58,241 @@
   </div>
 </template>
 <script>
-import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
-import ContributionForm from '@/components/Contributions/ContributionForm.vue'
-import ContributionList from '@/components/Contributions/ContributionList.vue'
-import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
-import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
+ import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
+ import ContributionForm from '@/components/Contributions/ContributionForm.vue'
+ import ContributionList from '@/components/Contributions/ContributionList.vue'
+ import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
+ import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
 
-export default {
-  name: 'Community',
-  components: {
-    ContributionForm,
-    ContributionList,
-    OpenCreationsAmount,
-  },
-  data() {
-    return {
-      hashLink: '',
-      tabLinkHashes: ['#edit', '#my', '#all'],
-      tabIndex: 0,
-      items: [],
-      itemsAll: [],
-      currentPage: 1,
-      pageSize: 25,
-      currentPageAll: 1,
-      pageSizeAll: 25,
-      contributionCount: 0,
-      contributionCountAll: 0,
-      form: {
-        id: null,
-        date: '',
-        memo: '',
-        hours: 0,
-        amount: '',
-      },
-      updateAmount: '',
-      maximalDate: new Date(),
-      openCreations: [],
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash)
-      this.hashLink = this.$route.hash
-    })
-  },
-  apollo: {
-    OpenCreations: {
-      query() {
-        return openCreations
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return {}
-      },
-      update({ openCreations }) {
-        this.openCreations = openCreations
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-    ListAllContributions: {
-      query() {
-        return listAllContributions
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return {
-          currentPage: this.currentPageAll,
-          pageSize: this.pageSizeAll,
-        }
-      },
-      update({ listAllContributions }) {
-        this.contributionCountAll = listAllContributions.contributionCount
-        this.itemsAll = listAllContributions.contributionList
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-    ListContributions: {
-      query() {
-        return listContributions
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return {
-          currentPage: this.currentPage,
-          pageSize: this.pageSize,
-        }
-      },
-      update({ listContributions }) {
-        this.contributionCount = listContributions.contributionCount
-        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' })
-          }
-          this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
-        }
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-  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: '',
-        }
-      }
-    },
-  },
-  computed: {
-    minimalDate() {
-      const date = new Date(this.maximalDate)
-      return new Date(date.setMonth(date.getMonth() - 1, 1))
-    },
-    isThisMonth() {
-      const formDate = new Date(this.form.date)
-      return (
-        formDate.getFullYear() === this.maximalDate.getFullYear() &&
-        formDate.getMonth() === this.maximalDate.getMonth()
-      )
-    },
-    amountToAdd() {
-      // when existing contribution is edited, the amount is added back on top of the amount
-      if (this.form.id) return parseInt(this.updateAmount)
-      return 0
-    },
-    maxForMonths() {
-      const formDate = new Date(this.form.date)
-      if (this.openCreations && this.openCreations.length)
-        return this.openCreations.slice(1).map((creation) => {
-          if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
-            return parseInt(creation.amount) + this.amountToAdd
-          return parseInt(creation.amount)
-        })
-      return [0, 0]
-    },
-  },
-  methods: {
-    closeAllOpenCollapse() {
-      this.$el.querySelectorAll('.collapse.show').forEach((value) => {
-        this.$root.$emit('bv::toggle::collapse', value.id)
-      })
-    },
-    refetchData() {
-      this.$apollo.queries.ListAllContributions.refetch()
-      this.$apollo.queries.ListContributions.refetch()
-      this.$apollo.queries.OpenCreations.refetch()
-    },
-    saveContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: createContribution,
-          variables: {
-            creationDate: data.date,
-            memo: data.memo,
-            amount: data.amount,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.submitted'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    updateContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: updateContribution,
-          variables: {
-            contributionId: data.id,
-            creationDate: data.date,
-            memo: data.memo,
-            amount: data.amount,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.updated'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    deleteContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: deleteContribution,
-          variables: {
-            id: data.id,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.deleted'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    updateListAllContributions(pagination) {
-      this.currentPageAll = pagination.currentPage
-      this.pageSizeAll = pagination.pageSize
-      this.$apollo.queries.ListAllContributions.refetch()
-    },
-    updateListContributions(pagination) {
-      this.currentPage = pagination.currentPage
-      this.pageSize = pagination.pageSize
-      this.$apollo.queries.ListContributions.refetch()
-    },
-    updateContributionForm(item) {
-      this.form.id = item.id
-      this.form.date = item.contributionDate
-      this.form.memo = item.memo
-      this.form.amount = item.amount
-      this.form.hours = item.amount / 20
-      this.updateAmount = item.amount
-      this.$router.push({ path: '#edit' })
-      this.tabIndex = 0
-    },
-    updateTransactions(pagination) {
-      this.$emit('update-transactions', pagination)
-    },
-    updateState(id) {
-      this.items.find((item) => item.id === id).state = 'PENDING'
-    },
-  },
-  created() {
-    this.updateTransactions(0)
-    this.tabIndex = 0
-    this.$router.push({ path: '/community#edit' })
-  },
-}
+ export default {
+   name: 'Community',
+   components: {
+     ContributionForm,
+     ContributionList,
+     OpenCreationsAmount,
+   },
+   data() {
+     return {
+       tabIndex: 1,
+       items: [],
+       itemsAll: [],
+       currentPage: 1,
+       pageSize: 25,
+       currentPageAll: 1,
+       pageSizeAll: 25,
+       contributionCount: 0,
+       contributionCountAll: 0,
+       form: {
+         id: null,
+         date: '',
+         memo: '',
+         hours: 0,
+         amount: '',
+       },
+       updateAmount: '',
+       maximalDate: new Date(),
+       openCreations: [],
+     }
+   },
+   mounted() {
+     this.updateTabIndex(Number(this.$route.params.tab))
+   },
+   apollo: {
+     OpenCreations: {
+       query() {
+         return openCreations
+       },
+       fetchPolicy: 'network-only',
+       variables() {
+         return {}
+       },
+       update({ openCreations }) {
+         this.openCreations = openCreations
+       },
+       error({ message }) {
+         this.toastError(message)
+       },
+     },
+     ListAllContributions: {
+       query() {
+         return listAllContributions
+       },
+       fetchPolicy: 'network-only',
+       variables() {
+         return {
+           currentPage: this.currentPageAll,
+           pageSize: this.pageSizeAll,
+         }
+       },
+       update({ listAllContributions }) {
+         this.contributionCountAll = listAllContributions.contributionCount
+         this.itemsAll = listAllContributions.contributionList
+       },
+       error({ message }) {
+         this.toastError(message)
+       },
+     },
+     ListContributions: {
+       query() {
+         return listContributions
+       },
+       fetchPolicy: 'network-only',
+       variables() {
+         return {
+           currentPage: this.currentPage,
+           pageSize: this.pageSize,
+         }
+       },
+       update({ listContributions }) {
+         this.contributionCount = listContributions.contributionCount
+         this.items = listContributions.contributionList
+         if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
+           this.tabIndex = 1
+           this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
+         }
+       },
+       error({ message }) {
+         this.toastError(message)
+       },
+     },
+   },
+   watch: {
+     '$route.params.tab'(tab) {
+       this.updateTabIndex(tab)
+     },
+   },
+   computed: {
+     minimalDate() {
+       const date = new Date(this.maximalDate)
+       return new Date(date.setMonth(date.getMonth() - 1, 1))
+     },
+     isThisMonth() {
+       const formDate = new Date(this.form.date)
+       return (
+         formDate.getFullYear() === this.maximalDate.getFullYear() &&
+         formDate.getMonth() === this.maximalDate.getMonth()
+       )
+     },
+     amountToAdd() {
+       // when existing contribution is edited, the amount is added back on top of the amount
+       if (this.form.id) return parseInt(this.updateAmount)
+       return 0
+     },
+     maxForMonths() {
+       const formDate = new Date(this.form.date)
+       if (this.openCreations && this.openCreations.length)
+         return this.openCreations.slice(1).map((creation) => {
+           if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
+             return parseInt(creation.amount) + this.amountToAdd
+           return parseInt(creation.amount)
+         })
+       return [0, 0]
+     },
+   },
+   methods: {
+     updateTabIndex(tab) {
+       console.log('updateTabIndex', tab)
+       if (Number(tab) !== this.tabIndex) {
+         this.tabIndex = Number(tab)
+         this.closeAllOpenCollapse()
+       }
+     },
+     closeAllOpenCollapse() {
+       this.$el.querySelectorAll('.collapse.show').forEach((value) => {
+         this.$root.$emit('bv::toggle::collapse', value.id)
+       })
+     },
+     refetchData() {
+       this.$apollo.queries.ListAllContributions.refetch()
+       this.$apollo.queries.ListContributions.refetch()
+       this.$apollo.queries.OpenCreations.refetch()
+     },
+     saveContribution(data) {
+       this.$apollo
+           .mutate({
+             fetchPolicy: 'no-cache',
+             mutation: createContribution,
+             variables: {
+               creationDate: data.date,
+               memo: data.memo,
+               amount: data.amount,
+             },
+           })
+           .then((result) => {
+             this.toastSuccess(this.$t('contribution.submitted'))
+             this.refetchData()
+           })
+           .catch((err) => {
+             this.toastError(err.message)
+           })
+     },
+     updateContribution(data) {
+       this.$apollo
+           .mutate({
+             fetchPolicy: 'no-cache',
+             mutation: updateContribution,
+             variables: {
+               contributionId: data.id,
+               creationDate: data.date,
+               memo: data.memo,
+               amount: data.amount,
+             },
+           })
+           .then((result) => {
+             this.toastSuccess(this.$t('contribution.updated'))
+             this.refetchData()
+           })
+           .catch((err) => {
+             this.toastError(err.message)
+           })
+     },
+     deleteContribution(data) {
+       this.$apollo
+           .mutate({
+             fetchPolicy: 'no-cache',
+             mutation: deleteContribution,
+             variables: {
+               id: data.id,
+             },
+           })
+           .then((result) => {
+             this.toastSuccess(this.$t('contribution.deleted'))
+             this.refetchData()
+           })
+           .catch((err) => {
+             this.toastError(err.message)
+           })
+     },
+     updateListAllContributions(pagination) {
+       this.currentPageAll = pagination.currentPage
+       this.pageSizeAll = pagination.pageSize
+       this.$apollo.queries.ListAllContributions.refetch()
+     },
+     updateListContributions(pagination) {
+       this.currentPage = pagination.currentPage
+       this.pageSize = pagination.pageSize
+       this.$apollo.queries.ListContributions.refetch()
+     },
+     updateContributionForm(item) {
+       this.form.id = item.id
+       this.form.date = item.contributionDate
+       this.form.memo = item.memo
+       this.form.amount = item.amount
+       this.form.hours = item.amount / 20
+       this.updateAmount = item.amount
+       this.tabIndex = 0
+     },
+     updateTransactions(pagination) {
+       this.$emit('update-transactions', pagination)
+     },
+     updateState(id) {
+       this.items.find((item) => item.id === id).state = 'PENDING'
+     },
+   },
+   created() {
+     this.updateTransactions(0)
+   },
+ }
 </script>
 <style scoped>
 .tab-content {
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 57e10c763..84480dc80 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -58,6 +58,17 @@ const routes = [
       requiresAuth: true,
       pageTitle: 'community',
     },
+    redirect: (to) => {
+      return { path: '/community/1' }
+    },
+  },
+  {
+    path: '/community/:tab',
+    component: () => import('@/pages/Community.vue'),
+    meta: {
+      requiresAuth: true,
+      pageTitle: 'community',
+    },
   },
   {
     path: '/information',

From df468b9b1d938d50a7554bdfa31abd983d81f5f9 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 17 Feb 2023 11:15:19 +0100
Subject: [PATCH 2/4] change to named tab param

---
 .../Template/ContentHeader/NavCommunity.vue   |  28 +-
 .../Template/RightSide/ContributionInfo.vue   |  80 +--
 frontend/src/layouts/DashboardLayout.vue      |  24 +-
 .../layouts/templates/CommunityTemplate.vue   |  82 +++
 .../src/layouts/templates/ContentHeader.vue   |  17 +-
 frontend/src/layouts/templates/RightSide.vue  |  32 +-
 frontend/src/pages/Community.vue              | 471 +++++++++---------
 frontend/src/routes/routes.js                 |   2 +-
 8 files changed, 370 insertions(+), 366 deletions(-)
 create mode 100644 frontend/src/layouts/templates/CommunityTemplate.vue

diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index 841304b2a..fc64f6b1c 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -23,22 +23,24 @@
   </div>
 </template>
 <script>
- export default {
-   name: 'NavCommunity',
-   methods: {
-     handleClick(tab) {
-       console.log('handleClick', tab)
-       if (this.$route.params && this.$route.params.tab && Number(this.$route.params.tab) !== tab) {
-         this.$router.push({ params: { tab } })
-       }
-     },
-   },
+export const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
+
+export default {
+  name: 'NavCommunity',
+  methods: {
+    handleClick(tab) {
+      if (this.$route.params.tab !== COMMUNITY_TABS[tab]) {
+        this.$router.push({ params: { tab: COMMUNITY_TABS[tab] } })
+      }
+    },
+  },
+  /*
    watch: {
-     '$route.params.tab'(tab) {
-       this.handleClick(tab)
+     '$route.params.tab'() {
      },
    },
- }
+   */
+}
 </script>
 <style scoped>
 .nav-row {
diff --git a/frontend/src/components/Template/RightSide/ContributionInfo.vue b/frontend/src/components/Template/RightSide/ContributionInfo.vue
index fdd2d10d8..d2b1c9ac1 100644
--- a/frontend/src/components/Template/RightSide/ContributionInfo.vue
+++ b/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'">
-      <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
-     },
-     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
-     },
-   },
- }
+export default {
+  name: 'ContributionInfo',
+}
 </script>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 11b9e3060..55b362097 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/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 {
diff --git a/frontend/src/layouts/templates/CommunityTemplate.vue b/frontend/src/layouts/templates/CommunityTemplate.vue
new file mode 100644
index 000000000..448c06bd2
--- /dev/null
+++ b/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>
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 75686974e..78252e450 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -5,13 +5,12 @@
 </template>
 
 <script>
- export default {
-   name: 'ContentHeader',
-   computed: {
-     path() {
-       console.log('ContentHeader', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
-       return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
-     },
-   },
- }
+export default {
+  name: 'ContentHeader',
+  computed: {
+    path() {
+      return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
+    },
+  },
+}
 </script>
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index 9d357eeec..315c374ed 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -6,21 +6,19 @@
   </div>
 </template>
 <script>
- export default {
-   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'
-       }
-     },
-   },
- }
+export default {
+  name: 'RightSide',
+  computed: {
+    name() {
+      switch (this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')) {
+        case 'settings':
+          return 'empty'
+        case 'community':
+          return 'community'
+        default:
+          return 'transactions'
+      }
+    },
+  },
+}
 </script>
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index a9b5e2c11..b368dc96d 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -58,241 +58,244 @@
   </div>
 </template>
 <script>
- import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
- import ContributionForm from '@/components/Contributions/ContributionForm.vue'
- import ContributionList from '@/components/Contributions/ContributionList.vue'
- import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
- import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
+import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
+import ContributionForm from '@/components/Contributions/ContributionForm.vue'
+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',
-   components: {
-     ContributionForm,
-     ContributionList,
-     OpenCreationsAmount,
-   },
-   data() {
-     return {
-       tabIndex: 1,
-       items: [],
-       itemsAll: [],
-       currentPage: 1,
-       pageSize: 25,
-       currentPageAll: 1,
-       pageSizeAll: 25,
-       contributionCount: 0,
-       contributionCountAll: 0,
-       form: {
-         id: null,
-         date: '',
-         memo: '',
-         hours: 0,
-         amount: '',
-       },
-       updateAmount: '',
-       maximalDate: new Date(),
-       openCreations: [],
-     }
-   },
-   mounted() {
-     this.updateTabIndex(Number(this.$route.params.tab))
-   },
-   apollo: {
-     OpenCreations: {
-       query() {
-         return openCreations
-       },
-       fetchPolicy: 'network-only',
-       variables() {
-         return {}
-       },
-       update({ openCreations }) {
-         this.openCreations = openCreations
-       },
-       error({ message }) {
-         this.toastError(message)
-       },
-     },
-     ListAllContributions: {
-       query() {
-         return listAllContributions
-       },
-       fetchPolicy: 'network-only',
-       variables() {
-         return {
-           currentPage: this.currentPageAll,
-           pageSize: this.pageSizeAll,
-         }
-       },
-       update({ listAllContributions }) {
-         this.contributionCountAll = listAllContributions.contributionCount
-         this.itemsAll = listAllContributions.contributionList
-       },
-       error({ message }) {
-         this.toastError(message)
-       },
-     },
-     ListContributions: {
-       query() {
-         return listContributions
-       },
-       fetchPolicy: 'network-only',
-       variables() {
-         return {
-           currentPage: this.currentPage,
-           pageSize: this.pageSize,
-         }
-       },
-       update({ listContributions }) {
-         this.contributionCount = listContributions.contributionCount
-         this.items = listContributions.contributionList
-         if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
-           this.tabIndex = 1
-           this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
-         }
-       },
-       error({ message }) {
-         this.toastError(message)
-       },
-     },
-   },
-   watch: {
-     '$route.params.tab'(tab) {
-       this.updateTabIndex(tab)
-     },
-   },
-   computed: {
-     minimalDate() {
-       const date = new Date(this.maximalDate)
-       return new Date(date.setMonth(date.getMonth() - 1, 1))
-     },
-     isThisMonth() {
-       const formDate = new Date(this.form.date)
-       return (
-         formDate.getFullYear() === this.maximalDate.getFullYear() &&
-         formDate.getMonth() === this.maximalDate.getMonth()
-       )
-     },
-     amountToAdd() {
-       // when existing contribution is edited, the amount is added back on top of the amount
-       if (this.form.id) return parseInt(this.updateAmount)
-       return 0
-     },
-     maxForMonths() {
-       const formDate = new Date(this.form.date)
-       if (this.openCreations && this.openCreations.length)
-         return this.openCreations.slice(1).map((creation) => {
-           if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
-             return parseInt(creation.amount) + this.amountToAdd
-           return parseInt(creation.amount)
-         })
-       return [0, 0]
-     },
-   },
-   methods: {
-     updateTabIndex(tab) {
-       console.log('updateTabIndex', tab)
-       if (Number(tab) !== this.tabIndex) {
-         this.tabIndex = Number(tab)
-         this.closeAllOpenCollapse()
-       }
-     },
-     closeAllOpenCollapse() {
-       this.$el.querySelectorAll('.collapse.show').forEach((value) => {
-         this.$root.$emit('bv::toggle::collapse', value.id)
-       })
-     },
-     refetchData() {
-       this.$apollo.queries.ListAllContributions.refetch()
-       this.$apollo.queries.ListContributions.refetch()
-       this.$apollo.queries.OpenCreations.refetch()
-     },
-     saveContribution(data) {
-       this.$apollo
-           .mutate({
-             fetchPolicy: 'no-cache',
-             mutation: createContribution,
-             variables: {
-               creationDate: data.date,
-               memo: data.memo,
-               amount: data.amount,
-             },
-           })
-           .then((result) => {
-             this.toastSuccess(this.$t('contribution.submitted'))
-             this.refetchData()
-           })
-           .catch((err) => {
-             this.toastError(err.message)
-           })
-     },
-     updateContribution(data) {
-       this.$apollo
-           .mutate({
-             fetchPolicy: 'no-cache',
-             mutation: updateContribution,
-             variables: {
-               contributionId: data.id,
-               creationDate: data.date,
-               memo: data.memo,
-               amount: data.amount,
-             },
-           })
-           .then((result) => {
-             this.toastSuccess(this.$t('contribution.updated'))
-             this.refetchData()
-           })
-           .catch((err) => {
-             this.toastError(err.message)
-           })
-     },
-     deleteContribution(data) {
-       this.$apollo
-           .mutate({
-             fetchPolicy: 'no-cache',
-             mutation: deleteContribution,
-             variables: {
-               id: data.id,
-             },
-           })
-           .then((result) => {
-             this.toastSuccess(this.$t('contribution.deleted'))
-             this.refetchData()
-           })
-           .catch((err) => {
-             this.toastError(err.message)
-           })
-     },
-     updateListAllContributions(pagination) {
-       this.currentPageAll = pagination.currentPage
-       this.pageSizeAll = pagination.pageSize
-       this.$apollo.queries.ListAllContributions.refetch()
-     },
-     updateListContributions(pagination) {
-       this.currentPage = pagination.currentPage
-       this.pageSize = pagination.pageSize
-       this.$apollo.queries.ListContributions.refetch()
-     },
-     updateContributionForm(item) {
-       this.form.id = item.id
-       this.form.date = item.contributionDate
-       this.form.memo = item.memo
-       this.form.amount = item.amount
-       this.form.hours = item.amount / 20
-       this.updateAmount = item.amount
-       this.tabIndex = 0
-     },
-     updateTransactions(pagination) {
-       this.$emit('update-transactions', pagination)
-     },
-     updateState(id) {
-       this.items.find((item) => item.id === id).state = 'PENDING'
-     },
-   },
-   created() {
-     this.updateTransactions(0)
-   },
- }
+export default {
+  name: 'Community',
+  components: {
+    ContributionForm,
+    ContributionList,
+    OpenCreationsAmount,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+      items: [],
+      itemsAll: [],
+      currentPage: 1,
+      pageSize: 25,
+      currentPageAll: 1,
+      pageSizeAll: 25,
+      contributionCount: 0,
+      contributionCountAll: 0,
+      form: {
+        id: null,
+        date: '',
+        memo: '',
+        hours: 0,
+        amount: '',
+      },
+      updateAmount: '',
+      maximalDate: new Date(),
+      openCreations: [],
+    }
+  },
+  mounted() {
+    this.updateTabIndex()
+  },
+  apollo: {
+    OpenCreations: {
+      query() {
+        return openCreations
+      },
+      fetchPolicy: 'network-only',
+      variables() {
+        return {}
+      },
+      update({ openCreations }) {
+        this.openCreations = openCreations
+      },
+      error({ message }) {
+        this.toastError(message)
+      },
+    },
+    ListAllContributions: {
+      query() {
+        return listAllContributions
+      },
+      fetchPolicy: 'network-only',
+      variables() {
+        return {
+          currentPage: this.currentPageAll,
+          pageSize: this.pageSizeAll,
+        }
+      },
+      update({ listAllContributions }) {
+        this.contributionCountAll = listAllContributions.contributionCount
+        this.itemsAll = listAllContributions.contributionList
+      },
+      error({ message }) {
+        this.toastError(message)
+      },
+    },
+    ListContributions: {
+      query() {
+        return listContributions
+      },
+      fetchPolicy: 'network-only',
+      variables() {
+        return {
+          currentPage: this.currentPage,
+          pageSize: this.pageSize,
+        }
+      },
+      update({ listContributions }) {
+        this.contributionCount = listContributions.contributionCount
+        this.items = listContributions.contributionList
+        if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
+          this.$router.push({ params: { tab: 'contributions' } })
+          this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
+        }
+      },
+      error({ message }) {
+        this.toastError(message)
+      },
+    },
+  },
+  watch: {
+    '$route.params.tab'(tab) {
+      this.updateTabIndex()
+    },
+  },
+  computed: {
+    minimalDate() {
+      const date = new Date(this.maximalDate)
+      return new Date(date.setMonth(date.getMonth() - 1, 1))
+    },
+    isThisMonth() {
+      const formDate = new Date(this.form.date)
+      return (
+        formDate.getFullYear() === this.maximalDate.getFullYear() &&
+        formDate.getMonth() === this.maximalDate.getMonth()
+      )
+    },
+    amountToAdd() {
+      // when existing contribution is edited, the amount is added back on top of the amount
+      if (this.form.id) return parseInt(this.updateAmount)
+      return 0
+    },
+    maxForMonths() {
+      const formDate = new Date(this.form.date)
+      if (this.openCreations && this.openCreations.length)
+        return this.openCreations.slice(1).map((creation) => {
+          if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
+            return parseInt(creation.amount) + this.amountToAdd
+          return parseInt(creation.amount)
+        })
+      return [0, 0]
+    },
+  },
+  methods: {
+    updateTabIndex() {
+      const index = COMMUNITY_TABS.indexOf(this.$route.params.tab)
+      if (index > -1) {
+        this.tabIndex = index
+      } else {
+        this.tabIndex = 0
+      }
+      this.closeAllOpenCollapse()
+    },
+    closeAllOpenCollapse() {
+      this.$el.querySelectorAll('.collapse.show').forEach((value) => {
+        this.$root.$emit('bv::toggle::collapse', value.id)
+      })
+    },
+    refetchData() {
+      this.$apollo.queries.ListAllContributions.refetch()
+      this.$apollo.queries.ListContributions.refetch()
+      this.$apollo.queries.OpenCreations.refetch()
+    },
+    saveContribution(data) {
+      this.$apollo
+        .mutate({
+          fetchPolicy: 'no-cache',
+          mutation: createContribution,
+          variables: {
+            creationDate: data.date,
+            memo: data.memo,
+            amount: data.amount,
+          },
+        })
+        .then((result) => {
+          this.toastSuccess(this.$t('contribution.submitted'))
+          this.refetchData()
+        })
+        .catch((err) => {
+          this.toastError(err.message)
+        })
+    },
+    updateContribution(data) {
+      this.$apollo
+        .mutate({
+          fetchPolicy: 'no-cache',
+          mutation: updateContribution,
+          variables: {
+            contributionId: data.id,
+            creationDate: data.date,
+            memo: data.memo,
+            amount: data.amount,
+          },
+        })
+        .then((result) => {
+          this.toastSuccess(this.$t('contribution.updated'))
+          this.refetchData()
+        })
+        .catch((err) => {
+          this.toastError(err.message)
+        })
+    },
+    deleteContribution(data) {
+      this.$apollo
+        .mutate({
+          fetchPolicy: 'no-cache',
+          mutation: deleteContribution,
+          variables: {
+            id: data.id,
+          },
+        })
+        .then((result) => {
+          this.toastSuccess(this.$t('contribution.deleted'))
+          this.refetchData()
+        })
+        .catch((err) => {
+          this.toastError(err.message)
+        })
+    },
+    updateListAllContributions(pagination) {
+      this.currentPageAll = pagination.currentPage
+      this.pageSizeAll = pagination.pageSize
+      this.$apollo.queries.ListAllContributions.refetch()
+    },
+    updateListContributions(pagination) {
+      this.currentPage = pagination.currentPage
+      this.pageSize = pagination.pageSize
+      this.$apollo.queries.ListContributions.refetch()
+    },
+    updateContributionForm(item) {
+      this.form.id = item.id
+      this.form.date = item.contributionDate
+      this.form.memo = item.memo
+      this.form.amount = item.amount
+      this.form.hours = item.amount / 20
+      this.updateAmount = item.amount
+      this.$router.push({ params: { tab: 'contribute' } })
+    },
+    updateTransactions(pagination) {
+      this.$emit('update-transactions', pagination)
+    },
+    updateState(id) {
+      this.items.find((item) => item.id === id).state = 'PENDING'
+    },
+  },
+  created() {
+    this.updateTransactions(0)
+  },
+}
 </script>
 <style scoped>
 .tab-content {
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 84480dc80..1ebb1701b 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -59,7 +59,7 @@ const routes = [
       pageTitle: 'community',
     },
     redirect: (to) => {
-      return { path: '/community/1' }
+      return { path: '/community/contribute' }
     },
   },
   {

From 9910e2e201222a7475cb1df77dbad49aebb7840f Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 17 Feb 2023 12:04:57 +0100
Subject: [PATCH 3/4] improve code, fix button highlight

---
 .../Template/ContentHeader/NavCommunity.vue   | 21 +++----------------
 frontend/src/pages/Community.vue              | 16 ++++++--------
 2 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index fc64f6b1c..ca96ce914 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/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" @click="handleClick(0)">
+        <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" @click="handleClick(1)">
+        <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" @click="handleClick(2)">
+        <b-btn to="community" active-class="btn-active" block variant="link">
           <b-icon icon="people" class="mr-2" />
           {{ $t('community.community') }}
         </b-btn>
@@ -23,23 +23,8 @@
   </div>
 </template>
 <script>
-export const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
-
 export default {
   name: 'NavCommunity',
-  methods: {
-    handleClick(tab) {
-      if (this.$route.params.tab !== COMMUNITY_TABS[tab]) {
-        this.$router.push({ params: { tab: COMMUNITY_TABS[tab] } })
-      }
-    },
-  },
-  /*
-   watch: {
-     '$route.params.tab'() {
-     },
-   },
-   */
 }
 </script>
 <style scoped>
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index b368dc96d..cadf49ffe 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -63,7 +63,8 @@ import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 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'
+
+const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
 
 export default {
   name: 'Community',
@@ -148,7 +149,9 @@ export default {
         this.contributionCount = listContributions.contributionCount
         this.items = listContributions.contributionList
         if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
-          this.$router.push({ params: { tab: 'contributions' } })
+          this.tabIndex = 1
+          if (this.$route.params.tab !== 'contributions')
+            this.$router.push({ params: { tab: 'contributions' } })
           this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
         }
       },
@@ -193,11 +196,7 @@ export default {
   methods: {
     updateTabIndex() {
       const index = COMMUNITY_TABS.indexOf(this.$route.params.tab)
-      if (index > -1) {
-        this.tabIndex = index
-      } else {
-        this.tabIndex = 0
-      }
+      this.tabIndex = index > -1 ? index : 0
       this.closeAllOpenCollapse()
     },
     closeAllOpenCollapse() {
@@ -292,9 +291,6 @@ export default {
       this.items.find((item) => item.id === id).state = 'PENDING'
     },
   },
-  created() {
-    this.updateTransactions(0)
-  },
 }
 </script>
 <style scoped>

From 625b4cb3d03c6330c21aaf554c8f274e74dfec9c Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 17 Feb 2023 12:56:37 +0100
Subject: [PATCH 4/4] fix unit tests

---
 .../templates/CommunityTemplate.spec.js}      | 22 +++++++++--------
 frontend/src/pages/Community.spec.js          | 24 +++++++++----------
 frontend/src/pages/Community.vue              |  3 ++-
 frontend/src/routes/router.test.js            | 18 +++++++++++---
 4 files changed, 41 insertions(+), 26 deletions(-)
 rename frontend/src/{components/Template/RightSide/ContributionInfo.spec.js => layouts/templates/CommunityTemplate.spec.js} (85%)

diff --git a/frontend/src/components/Template/RightSide/ContributionInfo.spec.js b/frontend/src/layouts/templates/CommunityTemplate.spec.js
similarity index 85%
rename from frontend/src/components/Template/RightSide/ContributionInfo.spec.js
rename to frontend/src/layouts/templates/CommunityTemplate.spec.js
index f4547e42d..cd4b598ef 100644
--- a/frontend/src/components/Template/RightSide/ContributionInfo.spec.js
+++ b/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"', () => {
diff --git a/frontend/src/pages/Community.spec.js b/frontend/src/pages/Community.spec.js
index b4d1677df..28d742fe9 100644
--- a/frontend/src/pages/Community.spec.js
+++ b/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', () => {
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index cadf49ffe..af626f400 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -161,7 +161,7 @@ export default {
     },
   },
   watch: {
-    '$route.params.tab'(tab) {
+    '$route.params.tab'() {
       this.updateTabIndex()
     },
   },
@@ -282,6 +282,7 @@ export default {
       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) {
diff --git a/frontend/src/routes/router.test.js b/frontend/src/routes/router.test.js
index dff97d160..ed5d274c3 100644
--- a/frontend/src/routes/router.test.js
+++ b/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()
         })