change community components to contribution

frontend/src/components/Contributions/NavContributions.vue

@@ -1,34 +1,34 @@
 <template>
-  <div class="nav-community">
+  <div class="nav-contributions">
     <div
-      class="nav-community-btn-wrapper bg-209 rounded-26 d-flex bd-highlight mx-xl-6 mx-lg-5 shadow justify-content-between"
+      class="nav-contributions-btn-wrapper bg-209 rounded-26 d-flex bd-highlight mx-xl-6 mx-lg-5 shadow justify-content-between"
     >
       <BButton
-        :to="{ path: '/community/contribute' }"
-        :class="stateClasses('/community/contribute')"
+        :to="{ path: routeByIndex(0) }"
+        :class="stateClasses(0)"
         block
         variant="link"
-        class="nav-community__btn"
+        class="nav-contributions__btn"
       >
         <b-img src="/img/svg/write.svg" height="20" class="svg-icon" />
         {{ $t('community.submitContribution') }}
       </BButton>
       <BButton
-        :to="{ path: '/community/contributions' }"
-        :class="stateClasses('/community/contributions')"
+        :to="{ path: routeByIndex(1) }"
+        :class="stateClasses(1)"
         block
         variant="link"
-        class="nav-community__btn"
+        class="nav-contributions__btn"
       >
         <i-ion-person-sharp class="svg-icon" />
         {{ $t('community.myContributions') }}
       </BButton>
       <BButton
-        :to="{ path: '/community/community' }"
-        :class="stateClasses('/community/community')"
+        :to="{ path: routeByIndex(2) }"
+        :class="stateClasses(2)"
         block
         variant="link"
-        class="nav-community__btn"
+        class="nav-contributions__btn"
       >
         <i-mdi-people-group class="svg-icon" />
         {{ $t('community.community') }}
@@ -38,20 +38,34 @@
 </template>
 <script>
 export default {
-  name: 'NavCommunity',
+  name: 'NavContributions',
+
+  props: {
+    tabRoutes: {
+      type: Array,
+      default: () => [],
+    },
+    routeBase: {
+      type: String,
+      default: '',
+    },
+  },
 
   methods: {
-    stateClasses(path) {
-      if (this.$route.path.includes(path)) {
+    stateClasses(index) {
+      if (this.$route.path.includes(this.tabRoutes[index])) {
         return 'router-link-active router-link-exact-active'
       }
       return ''
     },
+    routeByIndex(index) {
+      return this.routeBase + this.tabRoutes[index]
+    },
   },
 }
 </script>
 <style scoped lang="scss">
-.nav-community-btn-wrapper {
+.nav-contributions-btn-wrapper {
   background-color: #d1d1d1;
 
   > :deep(*) {

frontend/src/layouts/DashboardLayout.vue

@@ -115,9 +115,6 @@
                         </BCol>
                       </BRow>
                     </template>
-                    <template #community>
-                      <nav-community />
-                    </template>
                     <template #settings></template>
                   </content-header>
                 </BCol>
@@ -133,8 +130,8 @@
                     :transaction-link-count="transactionLinkCount"
                   />
                 </template>
-                <template #community>
-                  <community-template />
+                <template #contributions>
+                  <contributions-template />
                 </template>
                 <template #empty />
               </right-side>
@@ -169,8 +166,8 @@
               />
             </template>
             <template #empty />
-            <template #community>
-              <community-template />
+            <template #contributions>
+              <contributions-template />
             </template>
           </right-side>
         </BCol>
@@ -192,7 +189,7 @@ import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 import { useQuery, useMutation } from '@vue/apollo-composable'
 import ContentHeader from '@/layouts/templates/ContentHeader'
-import CommunityTemplate from '@/layouts/templates/CommunityTemplate'
+import ContributionsTemplate from '@/layouts/templates/ContributionsTemplate'
 import Breadcrumb from '@/components/Breadcrumb/breadcrumb'
 import RightSide from '@/layouts/templates/RightSide'
 import SkeletonOverview from '@/components/skeleton/Overview'
@@ -204,7 +201,6 @@ import ContentFooter from '@/components/ContentFooter'
 import GddAmount from '@/components/Template/ContentHeader/GddAmount'
 import GdtAmount from '@/components/Template/ContentHeader/GdtAmount'
 import CommunityMember from '@/components/Template/ContentHeader/CommunityMember'
-import NavCommunity from '@/components/Template/ContentHeader/NavCommunity'
 import LastTransactions from '@/components/Template/RightSide/LastTransactions'
 import { transactionsUserCountQuery } from '@/graphql/transactions.graphql'
 import { logout } from '@/graphql/mutations'

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
-import CommunityTemplate from './CommunityTemplate'
+import ContributionsTemplate from './ContributionsTemplate'
 import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
 
 vi.mock('vue-i18n', () => ({
@@ -9,11 +9,11 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-describe('CommunityTemplate', () => {
+describe('ContributionsTemplate', () => {
   let wrapper
 
   const createWrapper = (tab) => {
-    return mount(CommunityTemplate, {
+    return mount(ContributionsTemplate, {
       global: {
         components: {
           ContributionInfo,

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

@@ -27,13 +27,13 @@ describe('RightSide', () => {
     })
   }
 
-  describe('at /community/contribute', () => {
+  describe('at /contributions/contribute', () => {
     beforeEach(() => {
-      wrapper = createWrapper('/community/contribute')
+      wrapper = createWrapper('/contributions/contribute')
     })
 
-    it('has name set to "community"', () => {
-      expect(wrapper.vm.name).toBe('community')
+    it('has name set to "contributions"', () => {
+      expect(wrapper.vm.name).toBe('contributions')
     })
   })
 

frontend/src/layouts/templates/RightSide.vue

@@ -13,8 +13,8 @@ export default {
       switch (this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')) {
         case 'settings':
           return 'empty'
-        case 'community':
-          return 'community'
+        case 'contributions':
+          return 'contributions'
         default:
           return 'transactions'
       }

frontend/src/pages/Contributions.spec.js

@@ -56,6 +56,13 @@ vi.mock('@/components/Contributions/ContributionListAll', () => ({
   },
 }))
 
+vi.mock('@/components/Contributions/NavContributions', () => ({
+  default: {
+    name: 'NavContributions',
+    template: '<div></div>',
+  },
+}))
+
 describe('Contributions', () => {
   let wrapper
   let mockRouter

frontend/src/pages/Contributions.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="contributions-page">
-    <div>
-      <BTabs :model-value="tabIndex" no-nav-style borderless align="center">
+    <div class="mt--3">
+      <nav-contributions :tab-routes="CONTRIBUTION_TABS" route-base="/contributions/" />
+      <BTabs :model-value="tabIndex" no-nav-style borderless align="center" class="mt-3">
         <BTab no-body lazy>
           <contribution-edit
             v-if="itemData"
@@ -29,11 +30,12 @@ import ContributionEdit from '@/components/Contributions/ContributionEdit'
 import ContributionCreate from '@/components/Contributions/ContributionCreate'
 import ContributionList from '@/components/Contributions/ContributionList'
 import ContributionListAll from '@/components/Contributions/ContributionListAll'
+import NavContributions from '@/components/Contributions/NavContributions'
 import { countContributionsInProgress } from '@/graphql/contributions.graphql'
 import { useAppToast } from '@/composables/useToast'
 import { useI18n } from 'vue-i18n'
 
-const CONTRIBUTION_TABS = ['contribute', 'own_contributions', 'all_contributions']
+const CONTRIBUTION_TABS = ['contribute', 'own-contributions', 'all-contributions']
 
 const route = useRoute()
 const router = useRouter()
@@ -58,8 +60,8 @@ handleInProgressContributionFound(({ data }) => {
   if (data) {
     if (data.countContributionsInProgress > 0) {
       tabIndex.value = 1
-      if (route.params.tab !== 'own_contributions') {
-        router.push({ params: { tab: 'own_contributions' } })
+      if (route.params.tab !== 'own-contributions') {
+        router.push({ params: { tab: 'own-contributions' } })
       }
       toastInfo(t('contribution.alert.answerQuestionToast'))
     }
@@ -76,7 +78,7 @@ function handleContributionUpdated() {
   itemData.value = null
   tabIndex.value = 1
   router.push({
-    params: { tab: 'own_contributions', page: editContributionPage.value },
+    params: { tab: 'own-contributions', page: editContributionPage.value },
     hash: `#contributionListItem-${contributionItemId}`,
   })
 }

frontend/src/routes/router.test.js

@@ -104,7 +104,7 @@ describe('router', () => {
     testRoute('/overview', 'Overview')
     testRoute('/send/:communityIdentifier?/:userIdentifier?', 'Send')
     testRoute('/transactions', 'Transactions')
-    testRoute('/community', 'Community')
+    testRoute('/contributions', 'Contributions')
     testRoute('/information', 'InfoStatistic')
     testRoute('/usersearch', 'UserSearch')
     testRoute('/gdt', 'Transactions')
@@ -116,10 +116,10 @@ describe('router', () => {
     testRoute('/checkEmail/:optin/:code?', 'ResetPassword', false)
     testRoute('/redeem/:code', 'TransactionLink', false)
 
-    describe('community without tab parameter', () => {
+    describe('contributions without tab parameter', () => {
       it('redirects to contribute tab', () => {
-        const route = routes.find((r) => r.path === '/community')
-        expect(route.redirect()).toEqual({ path: '/community/contribute' })
+        const route = routes.find((r) => r.path === '/contributions')
+        expect(route.redirect()).toEqual({ path: '/contributions/contribute' })
       })
     })