route names on one place, refactor tab handling a bit

frontend/src/components/Contributions/NavContributions.vue

@@ -4,8 +4,8 @@
       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: routeByIndex(0) }"
-        :class="stateClasses(0)"
+        :to="{ path: routeToTab(contribute) }"
+        :class="stateClasses(contribute)"
         block
         variant="link"
         class="nav-contributions__btn"
@@ -14,8 +14,8 @@
         {{ $t('community.submitContribution') }}
       </BButton>
       <BButton
-        :to="{ path: routeByIndex(1) }"
-        :class="stateClasses(1)"
+        :to="{ path: routeToTab(ownContributions) }"
+        :class="stateClasses(ownContributions)"
         block
         variant="link"
         class="nav-contributions__btn"
@@ -24,8 +24,8 @@
         {{ $t('community.myContributions') }}
       </BButton>
       <BButton
-        :to="{ path: routeByIndex(2) }"
-        :class="stateClasses(2)"
+        :to="{ path: routeToTab(allContributions) }"
+        :class="stateClasses(allContributions)"
         block
         variant="link"
         class="nav-contributions__btn"
@@ -41,9 +41,17 @@ export default {
   name: 'NavContributions',
 
   props: {
-    tabRoutes: {
-      type: Array,
-      default: () => [],
+    allContributions: {
+      type: String,
+      default: '',
+    },
+    contribute: {
+      type: String,
+      default: '',
+    },
+    ownContributions: {
+      type: String,
+      default: '',
     },
     routeBase: {
       type: String,
@@ -52,14 +60,14 @@ export default {
   },
 
   methods: {
-    stateClasses(index) {
-      if (this.$route.path.includes(this.tabRoutes[index])) {
+    stateClasses(route) {
+      if (this.$route.path.includes(route)) {
         return 'router-link-active router-link-exact-active'
       }
       return ''
     },
-    routeByIndex(index) {
-      return this.routeBase + this.tabRoutes[index]
+    routeToTab(route) {
+      return this.routeBase + route
     },
   },
 }

frontend/src/pages/Contributions.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="contributions-page">
     <div class="mt--3">
-      <nav-contributions :tab-routes="CONTRIBUTION_TABS" route-base="/contributions/" />
+      <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
@@ -35,11 +35,24 @@ 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 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()
 
@@ -59,26 +72,22 @@ const { onResult: handleInProgressContributionFound } = useQuery(
 handleInProgressContributionFound(({ data }) => {
   if (data) {
     if (data.countContributionsInProgress > 0) {
-      tabIndex.value = 1
-      if (route.params.tab !== 'own-contributions') {
-        router.push({ params: { tab: 'own-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 = CONTRIBUTION_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: 'own-contributions', page: editContributionPage.value },
+    params: { tab: tabRoutes.ownContributions, page: editContributionPage.value },
     hash: `#contributionListItem-${contributionItemId}`,
   })
 }
@@ -86,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 {