Merge pull request #3494 from gradido/frontend_rename_community_page

refactor(frontend): rename community page and child components to contributions

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: routeToTab(contribute) }"
+        :class="stateClasses(contribute)"
         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: routeToTab(ownContributions) }"
+        :class="stateClasses(ownContributions)"
         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: routeToTab(allContributions) }"
+        :class="stateClasses(allContributions)"
         block
         variant="link"
-        class="nav-community__btn"
+        class="nav-contributions__btn"
       >
         <i-mdi-people-group class="svg-icon" />
         {{ $t('community.community') }}
@@ -38,20 +38,42 @@
 </template>
 <script>
 export default {
-  name: 'NavCommunity',
+  name: 'NavContributions',
+
+  props: {
+    allContributions: {
+      type: String,
+      default: '',
+    },
+    contribute: {
+      type: String,
+      default: '',
+    },
+    ownContributions: {
+      type: String,
+      default: '',
+    },
+    routeBase: {
+      type: String,
+      default: '',
+    },
+  },
 
   methods: {
-    stateClasses(path) {
-      if (this.$route.path.includes(path)) {
+    stateClasses(route) {
+      if (this.$route.path.includes(route)) {
         return 'router-link-active router-link-exact-active'
       }
       return ''
     },
+    routeToTab(route) {
+      return this.routeBase + route
+    },
   },
 }
 </script>
 <style scoped lang="scss">
-.nav-community-btn-wrapper {
+.nav-contributions-btn-wrapper {
   background-color: #d1d1d1;
 
   > :deep(*) {

frontend/src/components/Menu/Sidebar.vue

@@ -26,7 +26,12 @@
               <span class="ms-2">{{ $t('navigation.transactions') }}</span>
             </div>
           </BNavItem>
-          <BNavItem ref="communityLink" to="/community" class="mb-3" active-class="active-route">
+          <BNavItem
+            ref="contributionsLink"
+            to="/contributions"
+            class="mb-3"
+            active-class="active-route"
+          >
             <div class="sidebar-menu-item-wrapper">
               <i-mdi-people-group class="svg-icon" />
               <span class="ms-2">{{ $t('creation') }}</span>
@@ -97,7 +102,7 @@ const props = defineProps({
 const emit = defineEmits(['closeSidebar'])
 
 const route = useRoute()
-const communityLink = ref(null)
+const contributionsLink = ref(null)
 
 const transactionClass = computed(() => {
   if (route.path === '/gdt') {
@@ -109,8 +114,8 @@ const transactionClass = computed(() => {
 watch(
   () => route.path,
   () => {
-    const link = [...communityLink.value.$el.children][0]
-    if (route.path.includes('community')) {
+    const link = [...contributionsLink.value.$el.children][0]
+    if (route.path.includes('contributions')) {
       link.classList.add('active-route')
       link.classList.add('router-link-exact-active')
     } else {

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/locales/de.json

@@ -316,7 +316,7 @@
   },
   "openHours": "Offene Stunden",
   "pageTitle": {
-    "community": "Gradido schöpfen",
+    "contributions": "Gradido schöpfen",
     "gdt": "Deine GDT Transaktionen",
     "information": "{community}",
     "overview": "Willkommen {name}",

frontend/src/locales/en.json

@@ -316,7 +316,7 @@
   },
   "openHours": "Open Hours",
   "pageTitle": {
-    "community": "Create Gradido",
+    "contributions": "Create Gradido",
     "gdt": "Your GDT transactions",
     "information": "{community}",
     "overview": "Welcome {name}",

frontend/src/locales/es.json

@@ -276,7 +276,7 @@
   },
   "openHours": "Open Hours",
   "pageTitle": {
-    "community": "Create Gradido",
+    "contributions": "Cuchara Gradido",
     "gdt": "Tu GDT Transacciones",
     "information": "{community}",
     "overview": "Welcome {name}",

frontend/src/locales/fr.json

@@ -284,7 +284,7 @@
   },
   "openHours": "Heures ouverte",
   "pageTitle": {
-    "community": "Ma communauté",
+    "contributions": "Ma communauté",
     "gdt": "Vos transactions GDT",
     "information": "{community}",
     "overview": "Bienvenue {name}",

frontend/src/locales/nl.json

@@ -276,7 +276,7 @@
   },
   "openHours": "Open Hours",
   "pageTitle": {
-    "community": "Create Gradido",
+    "contributions": "Gradido scoop",
     "gdt": "Your GDT transactions",
     "information": "{community}",
     "overview": "Welcome {name}",

frontend/src/pages/Contributions.spec.js

@@ -4,7 +4,7 @@ import { mount } from '@vue/test-utils'
 import { BTab, BTabs } from 'bootstrap-vue-next'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useRoute, useRouter } from 'vue-router'
-import Community from './Community'
+import Contributions from './Contributions'
 
 // Mock external dependencies
 vi.mock('vue-router', () => ({
@@ -56,7 +56,14 @@ vi.mock('@/components/Contributions/ContributionListAll', () => ({
   },
 }))
 
-describe('Community', () => {
+vi.mock('@/components/Contributions/NavContributions', () => ({
+  default: {
+    name: 'NavContributions',
+    template: '<div></div>',
+  },
+}))
+
+describe('Contributions', () => {
   let wrapper
   let mockRouter
   let mockToast
@@ -76,7 +83,7 @@ describe('Community', () => {
       onResult: mockCountContributionsInProgress,
     }))
 
-    wrapper = mount(Community, {
+    wrapper = mount(Contributions, {
       global: {
         mocks: {
           $t: (key) => key, // Mock $t function

frontend/src/pages/Contributions.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="community-page">
-    <div>
-      <BTabs :model-value="tabIndex" no-nav-style borderless align="center">
+  <div class="contributions-page">
+    <div class="mt--3">
+      <nav-contributions v-bind="tabRoutes" 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"
@@ -22,22 +23,36 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useQuery } from '@vue/apollo-composable'
 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 COMMUNITY_TABS = ['contribute', 'contributions', 'community']
+const tabRoutes = {
+  contribute: 'contribute',
+  ownContributions: 'own-contributions',
+  allContributions: 'all-contributions',
+}
 
 const route = useRoute()
 const router = useRouter()
 
+const tabRouteToIndex = (route) => {
+  const index = Object.values(tabRoutes).indexOf(route)
+  if (index > -1) {
+    return index
+  }
+  router.push({ path: '/contributions/' + tabRoutes.contribute })
+  return 0
+}
+
 const { toastInfo } = useAppToast()
 const { t } = useI18n()
 
@@ -57,26 +72,22 @@ const { onResult: handleInProgressContributionFound } = useQuery(
 handleInProgressContributionFound(({ data }) => {
   if (data) {
     if (data.countContributionsInProgress > 0) {
-      tabIndex.value = 1
-      if (route.params.tab !== 'contributions') {
-        router.push({ params: { tab: 'contributions' } })
+      tabIndex.value = tabRouteToIndex(tabRoutes.ownContributions)
+      if (route.params.tab !== tabRoutes.ownContributions) {
+        router.push({ params: { tab: tabRoutes.ownContributions } })
       }
       toastInfo(t('contribution.alert.answerQuestionToast'))
     }
   }
 })
 
-const updateTabIndex = () => {
-  const index = COMMUNITY_TABS.indexOf(route.params.tab)
-  tabIndex.value = index > -1 ? index : 0
-}
 // after a edit contribution was saved, jump to contributions tab
 function handleContributionUpdated() {
   const contributionItemId = itemData.value.id
   itemData.value = null
-  tabIndex.value = 1
+  tabIndex.value = tabRouteToIndex(tabRoutes.ownContributions)
   router.push({
-    params: { tab: 'contributions', page: editContributionPage.value },
+    params: { tab: tabRoutes.ownContributions, page: editContributionPage.value },
     hash: `#contributionListItem-${contributionItemId}`,
   })
 }
@@ -84,13 +95,17 @@ function handleContributionUpdated() {
 const handleUpdateContributionForm = (data) => {
   itemData.value = data.item
   editContributionPage.value = data.page
-  tabIndex.value = 0
-  router.push({ params: { tab: 'contribute', page: undefined } })
+  tabIndex.value = tabRouteToIndex(tabRoutes.contribute)
+  router.push({ params: { tab: tabRoutes.contribute, page: undefined } })
 }
 
-watch(() => route.params.tab, updateTabIndex)
-
-onMounted(updateTabIndex)
+watch(
+  () => route.params.tab,
+  () => {
+    tabIndex.value = tabRouteToIndex(route.params.tab)
+  },
+  { immediate: true },
+)
 </script>
 <style scoped>
 .tab-content {

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' })
       })
     })
 

frontend/src/routes/routes.js

@@ -57,22 +57,22 @@ const routes = [
     },
   },
   {
-    path: '/community',
-    component: () => import('@/pages/Community'),
+    path: '/contributions',
+    component: () => import('@/pages/Contributions'),
     meta: {
       requiresAuth: true,
-      pageTitle: 'community',
+      pageTitle: 'contributions',
     },
     redirect: (to) => {
-      return { path: '/community/contribute' }
+      return { path: '/contributions/contribute' }
     },
   },
   {
-    path: '/community/:tab/:page?',
-    component: () => import('@/pages/Community.vue'),
+    path: '/contributions/:tab/:page?',
+    component: () => import('@/pages/Contributions.vue'),
     meta: {
       requiresAuth: true,
-      pageTitle: 'community',
+      pageTitle: 'contributions',
     },
   },
   {