feat(frontend): Vertalingen aan frontend toegevoegd

frontend/src/i18n/locale/de.json

@@ -48,5 +48,8 @@
     "enterSearchTerm": "Lernpfade suchen",
     "enterSearchTermDescription": "Bitte geben Sie einen Suchbegriff ein.",
     "noLearningPathsFound": "Nichts gefunden!",
-    "noLearningPathsFoundDescription": "Es gibt keine Lernpfade, die zu Ihrem Suchbegriff passen."
+    "noLearningPathsFoundDescription": "Es gibt keine Lernpfade, die zu Ihrem Suchbegriff passen.",
+    "legendNotCompletedYet": "Noch nicht fertig",
+    "legendCompleted": "Fertig",
+    "legendTeacherExclusive": "Information für Lehrkräfte"
 }

frontend/src/i18n/locale/en.json

@@ -15,6 +15,9 @@
     "enterSearchTermDescription": "Please enter a search term.",
     "noLearningPathsFound": "Nothing found!",
     "noLearningPathsFoundDescription": "There are no learning paths matching your search term.",
+    "legendNotCompletedYet": "Not completed yet",
+    "legendCompleted": "Completed",
+    "legendTeacherExclusive": "Information for teachers",
     "cancel": "cancel",
     "logoutVerification": "Are you sure you want to log out?",
     "homeTitle": "Our strengths",

frontend/src/i18n/locale/fr.json

@@ -8,7 +8,10 @@
     "enterSearchTerm": "Rechercher des parcours d'apprentissage",
     "enterSearchTermDescription": "Saisissez un terme de recherche pour commencer.",
     "noLearningPathsFound": "Rien trouvé !",
-    "noLearningPathsFoundDescription": "Aucun parcours d'apprentissage ne correspond à votre recherche."
+    "noLearningPathsFoundDescription": "Aucun parcours d'apprentissage ne correspond à votre recherche.",
+    "legendNotCompletedYet": "Pas encore achevé",
+    "legendCompleted": "Achevé",
+    "legendTeacherExclusive": "Informations pour les enseignants",
     "student": "élève",
     "teacher": "enseignant",
     "assignments": "Travails",

frontend/src/i18n/locale/nl.json

@@ -15,6 +15,9 @@
     "enterSearchTermDescription": "Gelieve een zoekterm in te voeren.",
     "noLearningPathsFound": "Niets gevonden!",
     "noLearningPathsFoundDescription": "Er zijn geen leerpaden die overeenkomen met je zoekterm.",
+    "legendNotCompletedYet": "Nog niet afgewerkt",
+    "legendCompleted": "Afgewerkt",
+    "legendTeacherExclusive": "Informatie voor leerkrachten",
     "cancel": "annuleren",
     "logoutVerification": "Bent u zeker dat u wilt uitloggen?",
     "homeTitle": "Onze sterke punten",

frontend/src/views/learning-paths/LearningPathPage.vue

@@ -85,6 +85,7 @@
 
     const navigationDrawerShown = ref(true);
 
+
     function isLearningObjectCompleted(learningObject: LearningObject): boolean {
         if (learningPathResource.state.type === "success") {
             return learningPathResource.state.data.nodesAsList.filter(it =>
@@ -95,13 +96,28 @@
         }
         return false;
     }
-    function getStatusIconForLearningObject(learningObject: LearningObject): {icon: string, color?: "success" | "info" | "warning" | "error"} {
+
+    type NavItemState = "teacherExclusive" | "completed" | "notCompleted";
+
+    const ICONS: {[key: NavItemState]: string} = {
+        teacherExclusive: "mdi-information",
+        completed: "mdi-checkbox-marked-circle-outline",
+        notCompleted: "mdi-checkbox-blank-circle-outline"
+    }
+
+    const COLORS: {[key: NavItemState]: string | undefined}  = {
+        teacherExclusive: "info",
+        completed: "success",
+        notCompleted: undefined
+    }
+
+    function getNavItemState(learningObject: LearningObject): NavItemState {
         if (learningObject.teacherExclusive) {
-            return {icon: "mdi-information", color: "info"};
+            return "teacherExclusive";
         } else if (isLearningObjectCompleted(learningObject)) {
-            return {icon: "mdi-checkbox-marked-circle-outline", color: "success"};
+            return "completed";
         } else {
-            return {icon: "mdi-checkbox-blank-circle-outline"};
+            return "notCompleted";
         }
     }
 </script>
@@ -116,6 +132,13 @@
                 :title="learningPath.data.title"
                 :subtitle="learningPath.data.description"
             ></v-list-item>
+            <v-list-item>
+                <template v-slot:subtitle>
+                    <p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
+                    <p><v-icon :color="COLORS.completed" :icon="ICONS.completed"></v-icon> {{ t("legendCompleted") }}</p>
+                    <p><v-icon :color="COLORS.teacherExclusive" :icon="ICONS.teacherExclusive"></v-icon> {{ t("legendTeacherExclusive") }}</p>
+                </template>
+            </v-list-item>
             <v-divider></v-divider>
 
             <div v-if="props.learningObjectHruid">
@@ -132,8 +155,8 @@
                     >
                         <template v-slot:prepend>
                             <v-icon
-                                :color="getStatusIconForLearningObject(node).color"
+                                :color="COLORS[getNavItemState(node)]"
-                                :icon="getStatusIconForLearningObject(node).icon"></v-icon>
+                                :icon="ICONS[getNavItemState(node)]"></v-icon>
                         </template>
                         <template v-slot:append>
                             {{ node.estimatedTime }}'

frontend/src/views/learning-paths/LearningPathSearchPage.vue

@@ -25,7 +25,7 @@
 
 <template>
     <div class="search-field-container">
-        <learning-path-search-field></learning-path-search-field>
+        <learning-path-search-field class="search-field"></learning-path-search-field>
     </div>
 
     <using-remote-resource :resource="searchResultsResource" v-slot="{ data }: {data: LearningPath[]}">
@@ -33,7 +33,7 @@
             <v-card
                 class="learning-path-card"
                 link
-                :to="`${learningPath.hruid}/${learningPath.language}`"
+                :to="`${learningPath.hruid}/${learningPath.language}/${learningPath.startNode.learningobjectHruid}`"
                 v-for="learningPath in data"
             >
                 <v-img