🎨 Fixes i18n route navigation in theses/emphasis/results

src/app/euromat/components/emphasis.vue

@@ -38,6 +38,7 @@
 
 <script>
   import { theses } from '@/data'
+  import { getTranslatedUrl } from '@/i18n/helper'
 
   export default {
     name: 'Emphasis',
@@ -56,19 +57,13 @@
       }
     },
 
-    computed: {
-      isGermanLocale () {
-        return this.$i18n.locale === 'de'
-      }
-    },
-
     created () {
       if (this.$browser.supports('sessionStorage')) {
         if (!sessionStorage.getItem('euromat-answers')) {
-          this.$router.push({ path: this.isGermanLocale ? '/de/thesen' : '/en/theses' })
+          this.$router.push({ path: getTranslatedUrl('theses') })
         }
       } else if (this.$root.$data.backupStorage.answers === undefined) {
-        this.$router.push({ path: this.isGermanLocale ? '/de/thesen' : '/en/theses' })
+        this.$router.push({ path: getTranslatedUrl('theses') })
       }
     },
 
@@ -96,9 +91,8 @@
           this.$root.$data.backupStorage.emphasized = emphasized
         }
 
-        this.$router.push({ path: this.isGermanLocale
-          ? '/de/thesen/ergebnis'
-          : '/en/theses/results'
+        this.$router.push({
+          path: getTranslatedUrl('results', getTranslatedUrl('theses', null, true))
         })
       }
     }

src/app/euromat/components/results.vue

@@ -90,9 +90,6 @@
     },
 
     computed: {
-      isGermanLocale () {
-        return this.$i18n.locale === 'de'
-      },
       startOverUrl () {
         return getTranslatedUrl('theses')
       }
@@ -111,7 +108,7 @@
       }
 
       if (!emphasized) {
-        this.$router.push({ path: this.isGermanLocale ? '/de/thesen' : '/en/theses' })
+        this.$router.push({ path: getTranslatedUrl('theses') })
       }
 
       this.emphasized = emphasized

src/app/euromat/components/theses.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="euromat">
+  <section class="theses">
     <div class="header-progress">
       <div>
         <span class="progress-current">{{ currentThesisStep }}</span>
@@ -15,14 +15,14 @@
       </button>
     </div>
 
-    <div class="euromat-content">
-      <header class="euromat-header">
+    <div class="theses-content">
+      <header class="theses-header">
         <h2>{{ thesisCategory }}</h2>
         <h1>{{ thesisTitle }}</h1>
       </header>
 
-      <div class="euromat-controls">
-        <ul class="euromat-btns">
+      <div class="theses-controls">
+        <ul class="theses-btns">
           <li v-for="option in options" :key="option.label">
             <button type="button" @click="submitAnswer(option, $event)">
               {{ option.label }} <component :is="'feather-' + option.icon" />
@@ -45,7 +45,7 @@
 
 <script>
   import { options, theses } from '@/data'
-  // import { getTranslatedUrl } from '@/i18n/helper'
+  import { getTranslatedUrl } from '@/i18n/helper'
 
   export default {
     name: 'EuroMat',
@@ -62,7 +62,6 @@
     },
 
     data () {
-      console.log(this.$i18n)
       return {
         currentThesis: 0,
         thesesCount: theses.length,
@@ -71,9 +70,6 @@
     },
 
     computed: {
-      isGermanLocale () {
-        return this.$i18n.locale === 'de'
-      },
       currentThesisStep () {
         return this.currentThesis + 1
       },
@@ -149,9 +145,8 @@
           this.$root.$data.backupStorage.answers = answers
         }
 
-        this.$router.push({ path: this.isGermanLocale
-          ? '/de/thesen/gewichtung'
-          : '/en/theses/emphasis'
+        this.$router.push({
+          path: getTranslatedUrl('emphasis', getTranslatedUrl('theses', null, true))
         })
       }
     }
@@ -165,7 +160,7 @@
 
   $breakpoint: 835px;
 
-  .euromat {
+  .theses {
     display: flex;
     align-items: flex-start;
 
@@ -219,11 +214,11 @@
     }
   }
 
-  .euromat-content {
+  .theses-content {
     text-align: left;
   }
 
-  .euromat-header {
+  .theses-header {
     margin-bottom: $base-gap + 5;
     text-align: left;
 
@@ -236,7 +231,7 @@
     }
   }
 
-  .euromat-controls {
+  .theses-controls {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -252,7 +247,7 @@
     }
   }
 
-  .euromat-btns {
+  .theses-btns {
     list-style: none;
     display: flex;
     justify-content: center;

src/app/party/components/index.vue

@@ -33,7 +33,7 @@
       <ul>
         <li v-for="option in options" :key="option.position">
           <component :is="'feather-' + positionToIconName(option.position)" />
-          <span>{{ $t(`euromat.options.${option.position}`) }}</span>
+          <span>{{ $t(`theses.${option.position}`) }}</span>
         </li>
       </ul>
     </div>
@@ -86,6 +86,7 @@
 
 <script>
   import { parties, theses, options } from '@/data'
+  import { getTranslatedUrl } from '@/i18n/helper'
   export default {
     name: 'Party',
 
@@ -129,13 +130,8 @@
     },
 
     computed: {
-      isGermanLocale () {
-        return this.$i18n.locale === 'de'
-      },
       resultsPath () {
-        return this.isGermanLocale
-          ? '/thesen/ergebnis'
-          : '/theses/results'
+        return getTranslatedUrl('results', getTranslatedUrl('theses', null, true))
       },
       partyName () {
         return this.party.name[this.$i18n.locale]

src/i18n/helper.js

@@ -51,7 +51,10 @@ export function getTranslatedAliases (data, section) {
   )]
 }
 
-export function getTranslatedUrl (section) {
+export function getTranslatedUrl (section, prefixUrl, omitLocale = false) {
   const url = i18n.messages[getCurrentLocale()][section].url
-  return `/${i18n.locale}/${url}`
+  const fullUrl = prefixUrl ? `${prefixUrl}/${url}` : url
+  return omitLocale
+    ? fullUrl
+    : `/${i18n.locale}/${fullUrl}`
 }