change to named tab param

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 {

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>

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.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

@@ -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>

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>

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 {

frontend/src/routes/routes.js

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