From 299b30cb0fdc2aaf22f9ed3d8b1e91d016c0d4ef Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 2 Dec 2022 16:31:15 +0100
Subject: [PATCH] Fix route matching with special chars

---
 client/src/pages/competence/CompetenceIndexPage.vue       | 8 ++++----
 client/src/pages/competence/CompetenceListPage.vue        | 6 +++---
 client/src/pages/competence/PerformanceCriteriaPage.vue   | 2 +-
 .../pages/competence/SinglePerformanceCriteriaPage.vue    | 3 +--
 client/src/stores/competence.ts                           | 8 ++++++++
 client/src/stores/courseSessions.ts                       | 5 +++--
 6 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index 50a56ad1..ae4cb5aa 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/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>
diff --git a/client/src/pages/competence/CompetenceListPage.vue b/client/src/pages/competence/CompetenceListPage.vue
index e0cbd607..10938648 100644
--- a/client/src/pages/competence/CompetenceListPage.vue
+++ b/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"
diff --git a/client/src/pages/competence/PerformanceCriteriaPage.vue b/client/src/pages/competence/PerformanceCriteriaPage.vue
index cbce6c60..6dd866c7 100644
--- a/client/src/pages/competence/PerformanceCriteriaPage.vue
+++ b/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>
diff --git a/client/src/pages/competence/SinglePerformanceCriteriaPage.vue b/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
index 323ca6bb..971fe4d6 100644
--- a/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
+++ b/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;
diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts
index 9f17eabc..cfeb70f9 100644
--- a/client/src/stores/competence.ts
+++ b/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();
diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index b6089ebc..d6a96ef7 100644
--- a/client/src/stores/courseSessions.ts
+++ b/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)
         );
       });
     },