Fix route matching with special chars

client/src/pages/competence/CompetenceIndexPage.vue

@@ -51,7 +51,7 @@ const countStatus = computed(() => {
 <template>
   <div class="container-large lg:mt-4">
     <div
-      v-if="competenceStore.competenceProfilePage"
+      v-if="competenceStore.competenceProfilePage()"
       class="flex flex-col lg:flex-row lg:items-center justify-between mb-10"
     >
       <h1>{{ $t("competences.title") }}</h1>
@@ -83,7 +83,7 @@ const countStatus = computed(() => {
           </li>
         </ul>
         <router-link
-          :to="`${competenceStore.competenceProfilePage?.frontend_url}/competences`"
+          :to="`${competenceStore.competenceProfilePage()?.frontend_url}/competences`"
           class="btn-text inline-flex items-center pl-0 py-2"
         >
           <span>{{ $t("competences.showAll") }}</span>
@@ -129,7 +129,7 @@ const countStatus = computed(() => {
         </li>
       </ul>
       <router-link
-        :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
+        :to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`"
         class="btn-text inline-flex items-center pl-0 py-2"
       >
         <span>{{ $t("competences.showAll") }}</span>
@@ -154,7 +154,7 @@ const countStatus = computed(() => {
         </li>
       </ul>
       <router-link
-        :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
+        :to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`"
         class="btn-text inline-flex items-center pl-0 py-2"
       >
         <span>{{ $t("competences.showAll") }}</span>

client/src/pages/competence/CompetenceListPage.vue

@@ -13,9 +13,9 @@ const competenceStore = useCompetenceStore();
   <div class="container-large">
     <nav class="py-4 lg:pb-8">
       <router-link
-        v-if="competenceStore.competenceProfilePage"
+        v-if="competenceStore.competenceProfilePage()"
         class="btn-text inline-flex items-center pl-0"
-        :to="competenceStore.competenceProfilePage?.frontend_url"
+        :to="competenceStore.competenceProfilePage()?.frontend_url"
       >
         <it-icon-arrow-left />
         <span>{{ $t("general.back") }}</span>
@@ -29,7 +29,7 @@ const competenceStore = useCompetenceStore();
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>
-    <ul v-if="competenceStore.competenceProfilePage">
+    <ul v-if="competenceStore.competenceProfilePage()">
       <li
         v-for="competence in competenceStore.competences()"
         :key="competence.id"

client/src/pages/competence/PerformanceCriteriaPage.vue

@@ -57,7 +57,7 @@ function updateActiveState(status: CourseCompletionStatus) {
     <nav class="py-4 lg:pb-8">
       <router-link
         class="btn-text inline-flex items-center pl-0"
-        :to="`${competenceStore.competenceProfilePage?.frontend_url}`"
+        :to="`${competenceStore.competenceProfilePage()?.frontend_url}`"
       >
         <it-icon-arrow-left />
         <span>zurück</span>

client/src/pages/competence/SinglePerformanceCriteriaPage.vue

@@ -19,8 +19,7 @@ let currentQuestion: PerformanceCriteria | undefined;
 let competencePage: CompetencePage | undefined;
 
 const findCriteria = () => {
-  for (const page of competenceStore.competenceProfilePage
-    ?.children as CompetencePage[]) {
+  for (const page of competenceStore.competenceProfilePage()?.children as CompetencePage[]) {
     for (const criteria of page.children) {
       if (criteria.slug === route.params["criteriaSlug"]) {
         currentQuestion = criteria;

client/src/stores/competence.ts

@@ -53,6 +53,14 @@ export const useCompetenceStore = defineStore({
         return competence.children;
       });
     },
+    competenceProfilePage(userId: number | undefined = undefined) {
+      if (!userId) {
+        const userStore = useUserStore();
+        userId = userStore.id;
+      }
+
+      return this.competenceProfilePages.get(userId);
+    },
     flatPerformanceCriteria(userId: number | undefined = undefined) {
       if (!userId) {
         const userStore = useUserStore();

client/src/stores/courseSessions.ts

@@ -20,10 +20,11 @@ export const useCourseSessionsStore = defineStore({
   getters: {
     courseSessionForRoute: (state) => {
       const route = useRoute();
+      const routePath = decodeURI(route.path);
       return state.courseSessions?.find((cs) => {
         return (
-          route.path.startsWith(cs.learning_path_url) ||
-          route.path.startsWith(cs.competence_url)
+          routePath.startsWith(cs.learning_path_url) ||
+          routePath.startsWith(cs.competence_url)
         );
       });
     },